Portfolio

A client-facing ecommerce app for CHANEL Fragrance and Beauty Customers.

Fragrance & Beauty App


## Summary

Manulife Group Benefits aimed to improve the utilization of its prescription drug tools, Drug Plan and Pharmacy Savings Search, due to underuse by members. **Extensive research led the way to a user-centric redesign that provides a user-friendly and effective prescription drug experience.**

## Business Problem

The redesign was driven by a technical requirement stemming from Apple's security policy. Previously, the prescription drug tools redirected users to Manulife's website, which was no longer allowed. This was an opportunity to redesign the tool to encourage user to buy lower-cost prescription drugs so that both members and their employers can save money.

## Deconstructing the Tools

The existing Drug Plan and Pharmacy Savings Search interfaces had major usability issues, such as unclear actions, difficult to tap buttons and poor information architecture. My goal was to identify user struggles and optimize these tools to best serve our users. While both tools are closely related, they have to work separately since they are sold as individual tools.

## Listening to Complaints

I leveraged Manulife’s call centre to gather qualitative data about our users’ problems with the Drug Coverage and Pharmacy Savings Search tools. User complaints and frustrations highlighted key issues, such as finding coverage information, and discrepancies between Drug Plan's "you pay" amount and the actual pharmacy costs. **Members were frustrated, and it was clear that many of the well-intended disclaimers in the app were poorly placed and easily forgotten.**

## Problem Framing with Business Stakeholders

I conducted problem framing and vision-setting sessions with stakeholders, defining success criteria for the business, customers, and members. The problem framing session uncovered the business’ major concerns, internal workings, and technical limitations. The vision-setting session was crucial in aligning goals and providing a direction to focus on.

<PostImage
  src="/portfolio/drug-coverage/1.png"
  caption="A screenshot from our workshop with our business partners."
  width={1840}
  height={1000}
/>

## Analytics to Quantify Problems

Analyzing Drug Plan and Pharmacy Savings Search data revealed critical insights and brought up a number of interesting questions:

**1. Most users didn't search for drugs**

- Only 34% of desktop sessions and 1.2% of mobile sessions searched for a drug after entering either drug tool.

**2. Drug searches were for commonly advertised medications**

- This suggested that members may be researching their coverage before they’ve visited a doctor.
- None of the top 20 searches were part of the most [commonly prescribed drugs in Canada (2018)](https://www.iqvia.com/-/media/iqvia/pdfs/canada/2018-trends/top20dispensed_en_18.pd-).

**3. Drug Plan was more popular than Pharmacy Savings Search, despite most members having access to both**

- Drug Plan averages 13X more traffic than Pharmacy Savings Search.
- Only 10% of traffic flowed from Drug Plan to Pharmacy Savings Search.

## Generative Research to Understand the Member Journey

Collaborating with a UX Researcher, we conducted interviews to uncover the member journey between getting and filling a prescription. We conducted ten 1-hour long research interviews with Canadians of varying ages, family sizes, geographies, pharmacy experiences and health needs. Our research indicated that redesigning the tools alone might not lead to increased usage.

I proposed to the business that we redesign the tools as planned and monitor traffic after it was released. We could test our hypothesis and see if the redesign increased usage. If not, then we could work on an alternative strategy to better integrate the prescription drug tools into the member journey.

Three key insights from this research shaped the redesign:

**1. Health takes priority over price**

- People see these medications as the key to recovery. Typically, they focus on drug costs much later in their journey, often only considering prices when they're about to make a purchase.

**2. Limited Time Between Prescription and Purchase**

- Expecting members to check drug prices before filling their prescriptions is unrealistic because it's not a top-of-mind concern at that moment.

**3. Little insights make a big difference**

- Many individuals lack awareness regarding drug coverage and pricing. Only a minority know that drug prices can vary between pharmacies. These insights, though often overlooked, have the potential to greatly benefit members.

<PostImage
  src="/portfolio/drug-coverage/2.png"
  caption="A screenshot of our notes from our generative interviews."
  width={1840}
  height={1000}
/>

## The Redesign

The redesign prioritized delivering information that matters most to our members in a user-friendly manner.

<PostImage
  src="/portfolio/drug-coverage/3.png"
  caption="Final screens from Drug Plan and Pharmacy Savings Search."
  width={1840}
  height={1000}
/>

### Give Coverage and Pharmacies Equal Visibility

The first key transformation involved revamping the visual architecture. After members search for their medication, they now encounter an intuitive page offering a concise overview of both Drug Plan and Pharmacy Savings Search. This page presents essential details, such as payment estimates and medication costs at nearby pharmacies, in a readily digestible format. Users can delve into specific sections for more in-depth information.

<PostImage
  src="/portfolio/drug-coverage/4.png"
  caption="Final screens from Drug Plan and Pharmacy Savings Search."
  width={1840}
  height={1080}
/>

### Enhancing Visibility of Pharmacy Prices

The redesign sought to enhance the visibility of pharmacy prices. The new layout simplifies the identification of average drug prices in your vicinity and highlights which pharmacies charge above or below the average. We employed colour-coding to facilitate easy scanning, clearly distinguishing "more expensive" from "less expensive" options. Expressing these price differences in actual dollar amounts eliminated the need for mental math.

<PostImage
  src="/portfolio/drug-coverage/5.png"
  caption="Pharmacy list and pharmacy details."
  width={1840}
  height={1080}
/>

### Precision in Language

To ensure clarity in communication, I assumed responsibility for all UX writing in this project. The research revealed that coverage amounts in Drug Plan, such as "You pay" and "Your plan pays," represent averages rather than exact figures due to varying pharmacy pricing. I adjusted these labels to emphasize their estimative nature. Moreover, I repositioned legal disclaimers related to varied drug prices under the coverage section to reinforce their status as estimates.

An additional design adjustment involved prioritizing the member's out-of-pocket expenses. While this change might appear straightforward, our research indicated that individuals remember and prioritize their personal costs rather than the overall drug price.

### Contextualize Legal Disclaimers

Members frequently overlooked or forgot the previously front-loaded legal disclaimer. I broke up the long disclaimer and moved the pieces to the appropriate content sections. This approach eliminates the need for users to retain the disclaimer's content, making it more likely that individuals will engage with smaller, contextually relevant sections of information. Collaborating closely with the legal team, we ensured all required language adjustments were seamlessly integrated.

## Wrap Up

I had left Manulife before this project was released, but I anticipate the redesign led to increased usage and improved understanding of the tools. The redesigned UI is more user-friendly, and business stakeholders were thrilled with the changes.


Research and redesign to make finding and understanding drug coverage intuitive.

Drug Coverage


## Summary

Insurance companies are often associated with complex and confusing processes, and in 2019, Manulife's mobile health claim feature was no different. The 'Submit a Claim' feature was burdened with usability and technical challenges, resulting in a substantial number of complaints and unfavourable app reviews. We redesigned ‘Submit a Claim’ to so that individuals could easily submit a claim anytime, anywhere, and the results led to a **53% increase year-over-year in traffic** and a **197% increase in claims** made on the app.

## Identifying Usability Issues

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.

The ‘Submit a Claim’ flow had glaring usability issues and needed to be rebuilt for each of the six claim types. We wanted to create a new claim flow to improve the usability, and reuse the same components for all of the varying types health and dental claims.

I reviewed the old flow to identify the key problems. There was a laundry list of visual and usability issues that needed to be addressed. Some of the major issues were:

<PostImage
  src="/portfolio/submit-claim/5.png"
  alt="Identifying usability issues"
  width={1380}
  height={912}
/>

## Stakeholder Workshop

To address these issues and get business alignment, I organized a two-day design workshop with our business stakeholders. We delved into understanding our target persona, mapped the user journey, and consulted experts from various teams, including the call centre, claims processing, and UX research. This collaborative effort led to identifying key areas for improvement: preventing errors, enhancing ease of use, and simplifying language.

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

## The Redesign

The redesign process involved extensive trial and error. I created various designs and conducted quick, iterative usability tests to ensure intuitive navigation. As the form evolved, we shifted to more in-depth testing to ensure alignment with the targeted user experience from outlined in the stakeholder design sessions.

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

## Flow Restructure

In the new flow, we eliminated the concept of "steps" since not all were relevant for every claim. Instead, we designed a single-page form that grouped questions into related sections following a "who, what, where" pattern, concluding with the reimbursement question. Simple sections remained on the form, while more complex ones, like adding expenses, redirected users to a new page.

<PostImage
  src="/portfolio/submit-claim/3.png"
  caption="The claim form UI"
  width={1840}
  height={1080}
/>

## Introduction of a Review Step

We introduced a confirmation page so users would review their information before submitting. This was both a usability and a business win; the confirmation page made it easy for users to spot mistakes, which resulted in more accurate claims. The confirmation page also served as a convenient location for banking information and mandatory terms and conditions acceptance for legal compliance.

## Language Simplification

Our redesign prioritized simplicity, aiming to make actions self-evident without the need for explanatory text. We achieved this through two methods: UI changes and label adjustments. UI changes focused on refining the visual structure to convey meaning, reducing the need for explanatory text. Label adjustments aimed to shorten and clarify copy while maintaining accuracy, which was particularly crucial for accommodating French-speaking users, given Manulife's bilingual presence in Canada.

## Wrap Up

Ultimately, the redesign resulted in a **53% increase in traffic YoY** and a remarkable **197% increase in claims** made through the app. The positive feedback and increased ratings in both the Apple App Store and Google Play Store were indicators of success. On Android, our rating rose from 1.8️ to 4.2️, and on iOS, it improved from 2.4️ to 4.4. This transformation not only enhanced our app's reputation but also served as a compelling feature to attract new clients to Manulife.

<PostImage
  src="/portfolio/submit-claim/4.png"
  caption="Happy customer reviews on the App Store and Play Store."
  width={1840}
  height={1000}
/>


Designing a seamless and straight-forward health claim submissions.

Claim Submission


## Summary

The redesign of claim history was a visual overhaul that focused on modernizing the UI and making claims easy to find. The redesign **increased traffic by 400% year-over-year**.

## Starting Point

This was the first feature that the mobile team redesigned in the Group Benefits app. Our mission was to transform the hybrid app into a fully native iOS and Android experience. We began the app redesign with Claims History since it was our most used feature.

## Identifying Usability Issues

The old UI relied heavily on a chart-based interface that lacked elements to promote user interaction. Every claim looked the same and users were forced to read lots of small text to access their claim information.

## The Redesign

The design objective was to establish a foundational user experience that made finding claims simple.

### Transforming Table Rows into Cards

The primary layout change involved transforming the table rows into cards. Cards are an optimal component for a mobile experience, and were designed to emphasize the service type and claim status, making it simple for users to identify claims. Usability testing was done to ensure that the card design had the perfect balance of information so users could identify the claim, without being overwhelmed with information.

<PostImage
  src="/portfolio/claim-history/2.png"
  caption="Claim card design."
  width={1840}
  height={1080}
/>

### Making Audits Easy

The team implemented a novel feature to enhance the user experience during audits. In the previous user interface, audits were merely flagged without any guidance on how users should resolve them. When we redesigned the audit submission flow as part of the [‘Submit a Claim’ redesign](/portfolio/submit-claim), I added an alert to flag the audit, and included a direct link to expedite their entry into the audit submission workflow.

<PostImage
  src="/portfolio/claim-history/3.png"
  caption="Audit flow from an Orthodontics claim."
  width={1840}
  height={1080}
/>

## Wrap Up

The redesign, coupled with an effective marketing campaign, resulted in a remarkable **400% year-over-year surge in claims traffic**. This achievement served as a significant revelation for our business partners, who had not previously placed a strong emphasis on the mobile channel. Following the successful launch of the revamped Claims feature, we garnered substantial support to proceed with the redesign of more intricate features within the app.


Visualizing claim history to make finding claims easy.

Hi, I'm Deanna.