I am the product designer responsible for transforming Manulife's two prescription drug tools into a native iOS and Android experience.

How We Made Drug Coverage Understandable


## Summary

I transformed the entire visual architecture and UI of submitting a health insurance claim into an intuitive and accessible native experience. The redesign led to a <span className="highlight">53% increase in traffic</span> to this feature and a <span className="highlight">197% increase in claims</span> made on the app YOY. The redesign was also a significant factor in improving our app rating to 4+ stars on the Apple’s App Store and Google’s Play Store.

## The Business Problem

The old ‘Submit a claim’ feature was plagued with usability and technical issues. Users bitterly complained about it in our app stores, and it was a significant contributor to our poor app rating. The poor ratings and reviews began turning away prospective clients and sending them to our competitors.

<PostImage
  src="/portfolio/submit-claim-1.png"
  className="max-w-2xl"
  width={1294}
  height={412}
/>

<PostImage
  src="/portfolio/submit-claim-2.png"
  caption="Less than happy reviews that our users shared."
  className="max-w-3xl"
  width={1474}
  height={364}
/>

## A Bit of Historical Context

The Group Benefits mobile team was transforming the Group Benefits app from a hybrid application to a native iOS and Android app. We tackled features one at a time since we were a small team and health insurance is rather complex.

In March of 2019 we began redesigning Submit a Claim. This is a huge, transactional feature so we broke it down into incremental releases. We started with the most used claim category, Paramedical, and worked our way down to the least used category, Dental. Paramedical took about a year to research, redesign, and release. The subsequent claim categories took a fraction of the time because they relied on the patterns established in paramedical. New design and development effort focused on any unique scenarios for each new claim type. In total, 8 claim categories and 35 claim types were redesigned. All the design changes had to work with the established backend systems as backend improvements were not in scope.

## Deconstructing the Flow to Identify Usability Issues

I reviewed the old claim flow to identify key sections and problems. The old flow was broken down into three steps; Member and Claim Information, Provider, and Expenses and Attachments. The steps were arbitrary and two major things didn’t sit right. First, the member began their claim by selecting how they wanted to be reimbursed before identifying who or what they were claiming, and second, some claim types didn’t have a step two. Why show a step two if you skip over it?

Beyond these flaws there were several other usability issues.

- The UI was dated and text heavy,
- Many UI components were difficult to use because of small touch targets,
- The flow didn’t use any defaults, and
- The language was impersonal.

<PostImage
  src="/portfolio/submit-claim-3.png"
  caption="This is what the 'Submit a claim' looked like before the redesign."
  width={1960}
  height={1000}
/>

## Ideating Improvements with Business Stakeholders

I organized a two-day design session with business stakeholders to better understand opportunities to improve the benefits claims process.

We started with discussing the target persona. The group created an empathy map with their assumptions about what this persona sees, hears, thinks, says about Manulife benefits claims. Then we mapped the current user journey of submitting a claim.

Next, we brought in experts to discuss niche areas of the claims process. Topics included:

- Stories and metrics about claim-related calls from Manulife’s call centre,
- Analytics and pain points from the claims processing team, and
- Insights about behaviour patterns of claimants from the Research & Insights team.

Through these activities the group generated several areas to improve the benefits claims journey. Key areas were:

- Prevent errors: Detect problems early in the process, like if a provider is delisted, or if a benefit is about to terminate,
- Ease of use: Ensure users complete all steps, make dates faster to input, and
- Language: Make language easier to understand.

We ended the design session with storyboarding and wireframing. The group worked together to come up with ways to improve the claims submission flow. Some major features of the new flow were:

- Personalization: Refer to the “patient” and their family members by name.
- Clear, easy questions: Replace single, somewhat confusing questions with several, easier questions.
- Mobile patterns: Use common mobile patterns and components.
- Defaults: Once users had been through the flow once, default to their last selection where appropriate.

At the end of this design session, the group had defined what major problems needed to be fixed by the redesign. These learnings and goals were documented so they could be referred to in the future.

<PostImage
  src="/portfolio/submit-claim-4.png"
  caption="Journey mapping and empathy building design session activities."
  width={1960}
  height={974}
/>

## The Redesign

Redesigning the claim flow involved a lot of trial and error. I created several potential form designs and did quick, iterative usability testing on a physical device to validate if the navigation was intuitive. As the form took shape and became more high-fidelity, I put it through more measured testing to ensure that the design was meeting the targeted experience defined in the stakeholder design sessions.

<PostImage
  src="/portfolio/submit-claim-5.png"
  caption="Final screens from the Submit a Claim feature."
  width={1960}
  height={1000}
/>

### Restructuring the Flow

The restructure relied heavily on established mobile patterns, particularly those from Apple. Emulating the iPhone patterns lead to 100% task completion for our iOS users during usability testing. They found it easy to orient themselves in the form and knew how to interact with it. I “translated” the iOS UI into Android and we found that Android users had equal success with the flow.

In the new flow, the idea of “steps” was eliminated since not all steps were needed for every claim. The new form is a single page that groups questions into related sections. The sections were set up to follow a “who, what, where” pattern that ends with the reimbursement question. Straight-forward sections are completed right on the form, while sections that require more real-estate and details, like adding an expense, bring users to a new page.

<PostImage
  src="/portfolio/submit-claim-6.png"
  caption="The iOS form (left) and Android form (right)."
  width={1960}
  height={1000}
/>

### Introducing a Confirmation Page

It was important to ensure people reviewed their information before submitting. We couldn’t expect people to scroll back up to the top of the form after filling it out since that’s counter-intuitive to task completion. We introduced a confirmation page before submitting so users could review what they entered and correct any errors. The confirmation page was also a perfect spot to house the banking information and the terms and conditions, which had to be agreed to every time for legal and compliance reasons.

### Simplifying the Language

UI is like a joke, if you have to explain it, it’s not very good. The redesign focused on eliminating all explanatory copy and making actions obvious. Language was simplified in two ways, UI changes and label adjustments.

UI changes were adjustments to the visual structure that communicated meaning. A lot of this copy cutdown came from relying on standard mobile components to communicate actions so we could remove the “explanation text”.

Label adjustments focused on making copy shorter and more understandable while maintaining accuracy. Things like “Reimburse my claim from” were changed to “Pay me with” and “Select a claimant” became “Who’s this for?”. Cutting down label length was particularly important for our French customers. Manulife serves all of Canada and operates in both English and French. French copy is typically 1.5-2X longer than English copy, so shortening the copy was key to keeping the claim form at a reasonable length for our French users.

### Adding a New Front Door

After all the claim types were “nativized”, I designed a better entry page that would make finding a claim type easy. As I mentioned before, the team released claim categories (like Paramedical and Vision) one-by-one because we could get improvements out to market faster, but the problem was users had to know which category their claim fell into. I designed an easier and more helpful entry point into the claim form that introduced a search, draft, and recent section. Search allowed users to find claim types more easily. Draft let users save their progress and come back to their claim before submitting. Recent provided quick and easy access to the claims a user makes most often.

<PostImage
  src="/portfolio/submit-claim-7.png"
  caption="Interim Submit a Claim form entry (left) and final form entry (right)."
  width={1960}
  height={1000}
/>

## Wrap Up

After the redesign, we measured a 53% increase YOY in traffic to submit a claim and a 197% increase in claims made on the app. Our business partners were happy because we began seeing positive comments about claim submissions on the app stores, and our ratings increased significantly. From the start to finish of the redesign, our Android rating rose from 1.8️ to 4.2️️ and our iOS rating from 2.4️ to 4.4. Our app store presence turned into a selling feature that helped attract new clients to Manulife.

<PostImage
  src="/portfolio/submit-claim-8.png"
  className="max-w-4xl"
  width={1800}
  height={434}
/>

<PostImage
  src="/portfolio/submit-claim-9.png"
  caption="Happy customer reviews on the App Store and Play Store."
  className="max-w-5xl"
  width={1920}
  height={332}
/>


I transformed the entire visual architecture and UI from a replication of our back-end systems, into a intuitive experience that’s understandable for people.

This content is protected.