Skip to content
Hanna c:
San Francisco
--:--:--
← All work
Spring 2024 Product Design Self-led case study

Blue Cross
Blue Shield

Redesigning a health insurance app to be calm, navigable, and actually useful.

Self-led redesign · Spring 2024

Health care should feel
calm, not confusing.

The Problem

Health insurance apps make people feel worse

BCBSMA is used by everyone from college students to retired elderly — making it a critical tool for accessing benefits, finding doctors, and managing claims. Yet reviews of the app were consistently scathing: basic tasks were hard to execute, navigation was full of dead ends, and the interface felt designed for the app, not the user.

The question I set out to answer: how do we streamline finding doctors, making claims, and accessing plan benefits — especially for users who struggle with dense, unintuitive apps?

The Solution

Fix the two root causes

After reviewing user feedback, I identified two core problems: a cluttered home page that overwhelmed on first open, and a navigation system riddled with dead ends and button loops. The redesign addressed both — surfacing what people actually needed upfront, and reorganizing the information structure so every path led somewhere.

Design Process

Five steps from problem to product

Step 1

Identifying user pain points

As a self-led case study, I relied on App Store and Google Play reviews to surface pain points at scale. The feedback was consistent and damning.

Awful.

★☆☆☆☆  RDUPUIS

"The app, when it can't do something for you, will hand you over the website which will then route you back to the app — completing the loop."

Terrible user interface.

★☆☆☆☆  ATOMIC DRAGON

"Unable to do simple tasks without encountering a bug. Logging in was a nightmare — after that, finding plan information was just going through menu after menu."

Remarkably unhelpful.

★☆☆☆☆  ANONYMOUS

"Finding a doctor is even more frustrating on desktop. The act of fighting with this app's completely non-intuitive layout is comically futile."

The Main Problems

From the reviews, the main problems were clear: the app's unintuitive layout and disorganized information structure. It took users 7+ screens to find their plan benefits — and the app required re-login every session, with navigation loops that sent users in circles.

Step 2

Creating a new user flow

To solve the layout and information problems, I mapped a new user flow — grouping screens around the app's three main jobs: finding a doctor, accessing plan benefits, and making claims. Each path is direct with no dead ends.

Redesigned BCBSMA user flow diagram
Redesigned user flow — created in FigJam
Step 3

Wireframes

Using the new user flow, I wireframed the main screens to validate navigation logic before committing to high-fidelity. The goal was to test structure first.

BCBSMA wireframes — home, find a doctor, results
Low-fidelity wireframes — Home · Find a Doctor · Results
Step 4

Usability testing

I ran the wireframes with actual BCBSMA users, asking them to complete four tasks: find a doctor, access their claims, view plan benefits, and locate their ID card. Two clear issues surfaced.

✕ Issue #1

Users wanted the ID card on the home screen, not hidden behind a button

When opening the app, users expected to immediately see their ID card — not navigate to it through a button. They wanted it front and center.

✓ Solution #1

Display the ID card prominently on the home screen

I moved the ID card to a prominent card on the home screen. Tapping reveals front and back, with Face ID support for sensitive plan details. Insurance plans are now color-coded for easy scanning.

✕ Issue #2

Users couldn't browse all specialties when searching for a doctor

Typing a specialty freeform was unreliable — users worried they were missing sub-specialties they didn't know existed. They wanted a full browsable list.

✓ Solution #2

Add a "See all specialties" button with alphabetical browsing

Under the search field, I added a "See all specialties" button that opens a full alphabetically-sorted list — so users can browse without guessing keywords.

Revisions

More refinements across the app

Beyond the tested issues, I redesigned several other key screens to reduce visual noise and improve scannability. Hover each item to see the before & after.

  • MedicationsMedications before and after — Added medication images so users can quickly identify pills at a glance. Added member-selector tabs for family plans. Medications before and after
  • ClaimsClaims before and after — Replaced the dense Year-to-Date table with color-coded status chips (Pending, Completed) and summary totals at the top. Claims before and after
  • Search filtersSearch filters before and after — Replaced the popup-within-popup filter system with an inline dropdown that stays in context. Search filters before and after
Step 5 — The MVP

Try the prototype

With usability issues resolved, I moved to high-fidelity screens in Figma and built out a fully interactive prototype. You can try it below — log in, search for a doctor, check your medications, and browse your claims. The interactions are all wired up.

Interactive Figma prototype — try it

Outcomes

What this demonstrates

This case study started from a real frustration: health insurance is already stressful, and its apps make it worse. The redesign shows how much a product experience can improve with focused structural thinking — better information architecture, clearer navigation, and a visual language that doesn't add to the anxiety.

The gap between "technically functional" and "actually good" is enormous in healthcare UX. This project is about closing that gap.

Back to start

Iterative Health