All in One Place, Redesigning United Healthcare App

Let’s be honest, healthcare & insurance are already complicated.

And we probably don’t want the tools to make it even worse.

So…for this personal project, I am redesigning the United Healthcare iOS app in order to:

• unify different UHC plans in one place
• make it easier to log in and access info even on-the-go

1. Let’s analyze the existing system first

I have 2 separate accounts for my dental and vision. When the new site uhOne4me launched, I hoped my 3rd account can finally unite all my plans…and… NOPE.

my dental plan has its own site.

my vision plan has its own page too.

my uhone4me page ONLY shows dental despite branded as the “all-in-one” site.

How about mobile?

I looked at the iOS apps and couple things stood out:

• Health4Me ≠ uhOne4me 🤷‍♀️

When I checked as of Mar 23rd, 2020, there is a new app called “Health4Me” from UHC, which is NOT “uhone4me.com”. Is this an entirely different app? Or just naming inconsistency?

• HealthSafe ID? 🤔

What is this? Do I need to register for another account?

• Plan unsupported? 🤦‍♀️

Seems like my dental account can be used as the login, but unfortunately, the plan is not supported.

Can’t login with my “uhOne4Me” account. Then, my dental account was told as “unsupported”.

If HealthSafe ID is not uhOne4Me, then I guess I’ll sign up (for my 4th account with UHC). N/m I can’t even sign up for it.

What’s happening?

okay, Karen, we get it, there are problems here. But let me debrief what’s actually happening:

• Technical debt.

United Healthcare has been around for 43 years. They already have their database set up in a way when there were fewer considerations on UX. This is probably why they have separate sites for each plan.

• Design system is not standardized.

The visuals in each site and app are slightly different, meaning that they probably do NOT have a clear design system guideline yet.

• Communication is slower than tech adaption.

Given that smartphones now have face/finger ID, they probably developed HealthSafe ID to adapt to this new technology. However, they did not explain well who HealthSafe ID is different from (all of) the existing ones.

What do these mean for design?

• Empathize with Business/Dev/Data Scientists.

Having technical debt isn’t really a problem. Every large company probably has some.

The problem is how we deal with it. Really sit down and talk as much as possible to stakeholders and Dev/Data to understand why everything is set up in the current way, and how can we either fix/work around it.

Bonus tip: consider employee experience (EX), because combining sites and data can potentially cause extra work for billing, claim management, and many other corporate users. When the resource is enough, split into two teams and work on internal+external facing apps side-by-side may be ideal.

• Use conventional UI components and push design conversations.

The brand guideline is there, it’s probably just hard to stay updated given all the fast adaptations. So I’d use existing stuff (i.e. UHC apps/sites, or general design guidelines) as much as possible. Both will make component updates easier later.

Meanwhile, put efforts to solve the deeper challenge, i.e. How might we (HMW) begin to unify designs with a living design system? Otherwise, we won’t solve this issue and efforts spent would go in vain.

we need to get to the root problem. Credit: Idea Sandbox [original post].

• Concise UX copy.

Include a copywriter or UX writer for the project. Reword popups to be concise. Additionally, add a reference to features with a tooltip/notes on-page, so even when users ignore the popup, they can still get informed.

2. if we get over the hurdles above, what’s next?

Once we have all these proper foundational conversations going, we can think about the redesign.

Ideally, analytics and usability testing would be your friend. Given inherent restrictions for this personal project, I won’t do that here.

Instead, I am doing expert evaluations, a quick card sort, followed by creating the wire flow + prototype.

my design process for this project.

Expert Evaluation

Besides what you’ve read in the previous section, I also thought about how can we make the app experience more seamless using NN/g heuristics. The design implementations should include:

• ✔️ Combine dental, vision, and medicare into the same app (based on expert evaluation, NN/g #7: efficiency)
• ✔️ Use plain language, which is simple to understand/process (NN/g #4: consistency)
• ✔️ Stripe/tuck away items that are not frequently used to reduce users’ cognitive load (NN/g #8: minimalist design)
• ✔️ digitize and modernize claim filing process with integrations to increase efficiency (NN/g #7: efficiency), and match expectations from younger users (NN/g #2: match the real world)

Information Architecture (IA)/Card Sort

To ensure we have all the necessary content for the app, I pulled all key navigation items from my dental and vision sites. This is a more robust version of a content inventory.

I quickly laid key contents out on sticky notes, but realized that I was not sure of where “plan usage”, “cost calculator”, and “health tips” should go.

“plan usage”, “cost calculator”, and “health tips” circled on IA stickies.

So I did a card sort with brief user interviews.

The combined qualitative and quantitative data showed that people expect:

• 👉“cost calculator” to go with plan usage information.
• 👉“plan usage” should go with plans.
• 👉“health tips” are a little unconventional so maybe we can omit for now.

quantitative card sort results.

Wireflow

with that, I jumped onto sketching wireflow, which is kind of a combination of journey mapping + sketching.

I am moving fast using the existing iOS design system, but depends on your project, this approach may not apply.

exploring card and data visualization options in Figma.

Prototype

Once I had the layout done, I moved onto add animation and interactions. Play with the annotated prototype here, or see the unannotated prototype.

• adding basic interactions

connect pages with basic on “click”/ “tap” events so they can flow.

screens for use case one: find a Dental doctor.

screens for use case two: file a Non PPO Medicare/Health claim.

• polishing animations

smoothen the UX with micro-interactions and subtle animated transitions.

smooth log in screens with realistic animations.

allow swipe to easily call a doctor.

integrate with DocuSign to allow filling pdf forms on-the-go.

3. Reflecting on the project

• losses

I do like the redesign, but without a feeling of the existing app, I could have reinvented some wheels (remember? I can’t even sign up for it 🤦‍♀️).

Without collaboration with Business and Dev, this still is a single-sided facelift. It’s a typical caveat for personal projects. We “solve” the problem by not really solving it.

The project could also have more user involvement. Ultimately I should never design in a bubble.

• gains

I am happy to experiment with Figma and the iOS UI kit.

Created a clean, organized, intuitive, and concise healthcare app.

Pushing micro-interactions was pretty emotionally rewarding.