pandia_health_horizontal_logo_color_large.jpg

Case Study

Pandia Health is a San Francisco health start-up that prescribes and delivers women’s health medication. Four UX designers collaborated to design a new homepage, iterate the sign-up and check out form flow process to increase customers, and lastly add a “ask Dr. Y” Q&A section to pick from a pool of 150 questions CEO and Co-founder Sophia Yen has answered.

For this case study, I will focus on the research, the data findings, and the user flows for iterating the form process.

 
_01-home-mobile.png

Project Summary

_

 
 
 
 
 

Duration

project-duration-v1.png

August 2 - August 23 2018 (3 weeks, 6 days)

People

project-member.png

UX Designers, Pandia Health

My Role

my-role.png

Designer & Researcher

Skills

rgb-color.png

UX, User Research, Prototyping, Usability testing, Iterations

Tools

tools-wrench-screwdriver.png

Sketch, Google, Pen & Tablet

 
 
 
 
 

Clients Needs/Deliverables

 

• Recommendations to iterate the “staging site” homepage from our research and design recommendations. They requested to bring out Pandia Health’s voice and brand, to sound like the “cool aunt” or “neighbor” who women aged 18-34 can count on.

•To investigate why users were dropping off the sign-up process. Then suggest improvements to increase the conversion rate of sign-up form that involves being prescribed a prescription, uploading insurance, and choosing a birth control to be delivered or picked up at a nearby pharmacy.

• Design of “Q & A with a Doctor” page to provide useful answers to customers easily, incorporating an Algolia search API  for quick and concise answer results.

 
 

Market Research

_


Competitive Analysis

Compared direct competitor’s (Nurx, The Pill Club, Lemonaid Health & Alto) homepage/mobile app and sign-up form process for chances for opportunity for Pandia, which are highlighted in yellow.

 
 

Comparative Analysis

We looked at Turbo Tax’s mobile app because they took a serious topic, such as doing taxes to investigate their techniques that make a form less painful and easier to complete.

 
_pandia-homepage-comparative-analysis-GIF.gif
 
 
 

Takeaways & opportunities:

a. Colorful icons

b. Empathetic copy

c. Assistive text

d. Conversational language

e. Save points


 

User Research

-

User Interviews

In order to get inside the minds of the users, we conducted user interviews of seven non-subscribers and requested five current subscribers from the client.

We first spoke with non-subscribers to gain insight on the importance of access to birth control of these women of a reproductive age. We asked questions about insurance, doctor's appointments, cost, and feelings about going through these processes.

For the current subscribers, we wanted to have actual data on their sign-up process, while still fresh in their memory.

Frustrated. I feel like sometimes forms will have fields that are not clear.
— Pandia Health User
 
 
  Client’s Prototype for On-Boarding

Client’s Prototype for On-Boarding

usability-testing.gif
  Usability Testing for Client’s Prototype

Usability Testing for Client’s Prototype


 
 
 
 
 

Discovery from Research

My team collected the data and did affinity mapping to discover trends and patterns. The main reason why a user would not finish a form were due to specific pain points with pandia’s prototype.

 
 Affinity Mapping

Affinity Mapping

01-affinity-mapping_jamil.jpg
 
 

Key Data Findings

 
 
 
 
 

60%

Worried About Running Low

72%

Are Fully Covered By Insurance

81%

Think Long Forms are Repetitive

100%

 

Don't Like Filling Out Forms

 
 
 
 
 
 

PROBLEM

SOLUTION

problem.png

Users are hesitant to sign up with Pandia due to the form’s confusing questions, tedious format, unintuitive user interface, and intimidating clinical language.

puzzle.png

By designing a shorter/quicker form with clear questions, a concise format, and a personable and supportive language, Users will feel confident and successful in signing up with Pandia Health.

Our Strategy

We studied the client’s prototype and made a user flow to gain more understanding of how the form works. We found every possible pathway and got a wider view of the process. The strategy was to make it into fewer steps as possible and use progressive disclosure practices to make that possible.

 

Regulating the user flow

(Pun intended) We classified each page with what is being asked and what it was for. Then we also checked which pages have the fewest contents or questions. By knowing these factors, we were able to combine some of the pages. From a total of 22 pages, we cut down 7 of them. Which means. fewer pages, less time wasted on loading and waiting. This also makes it easier to implement a progress bar that has too many steps which can easily intimidate the user.

Overview of images from left to right:

Current User Flow (current at the time), User Flow Iterations, New User Flow (Suggested by UX Design team)

 
  User Flows (Current, Iteration, and New)

User Flows (Current, Iteration, and New)

 User Flow Iteration

User Flow Iteration

 New User Flow

New User Flow

 

Progressive Disclosure

This is one way to solve information overload by only showing the parts the user needs to know at a specific time. During our own testing of the client’s prototype, we noticed that they have used this in their health history page. We took this as a chance to use it to solve our lengthy user flow and were able to combine multiple pages.

 
  Current Prototype with Progressive Disclosure

Current Prototype with Progressive Disclosure

  Progressive disclosure to combine pages

Progressive disclosure to combine pages

 

Design Principles

We asked our client about who is Pandia Health. “What is its voice?” This helps us know how Pandia Health should be portrayed to the user. We were also provided with a color palette as a guide for the visuals. Lastly, we considered standard form practices specifically how to present multiple choice inputs like radio buttons and checkboxes.

“I want Pandia Health’s voice to sound like the cool aunt or best friend.”
— – Dr. Sophia Yen, CEO & Co-founder
 
  Color palette provided by the client

Color palette provided by the client

  Online form design patterns

Online form design patterns

 

Wire-framing & Visual Comp

We made low fidelity wireframes to see how the new form would look like. Considering that there is a prototype to start with, we wanted to have a general idea on how to incorporate a new layout with the icons. Then we turned that into a visual composition by following our design principles.

 
 
 
 
  Pandia Health Prototype

Pandia Health Prototype

  Low Fidelity Wireframe

Low Fidelity Wireframe

  Visual Comp

Visual Comp

 

Usability Testing

_

 

We conducted usability testing with 15 users to see if the new prototype has solved the problems users had with the client’s prototype. We also asked them for feedback and had them compare it to the old one.

There were other problems that came up during these tests and I will discuss them in the next section: Iterations.

_destinee-sara-rox-testing.jpg
 

Iterations

These are a few of the big iterations we made to solve our users’ problems with the forms. These problems came to us from different stages of the project.


Upload Photo

One of the most obvious pain points that our users had was with uploading a selfie, and a government issued ID. Since both pages have a similar layout and content, it was easy to not realize that they were two different pages. Users have thought that the page refreshed and that they would have to input again. It made sense that having these two questions on one page would solve that problem, which also helps with our first strategy, which is to reduce the number of pages. Adding to that too is having visual cues like icon placeholders which represent the data requested.

 
 
  Current prototype pages for verification

Current prototype pages for verification


1.png
  Suggested design for verification

Suggested design for verification

 


Frequency Question

This question was included by the client more for research purposes. A lot of the users were confused and did not know if they would make something up or leave. Most reasons were that they have irregular periods. The solution was to make it an option for the users that have an answer. It not only solves the users’ problem, but also the client’s. The data gathered would be more accurate.

 
  Current prototype for the period frequency question

Current prototype for the period frequency question

  Suggested design for the period frequency question

Suggested design for the period frequency question

 
 

Location Checker

Users who are not eligible only find out towards the end of the flow that they can’t proceed with getting the service. This is if the user misses the information in the homepage, or if their entry point was straight to sign up. This is the client’s marketing strategy to be able to inform previously ineligible for Pandia Health’s location expansion. We decided to let users know right after getting their location if they can’t proceed. By also having an opt-in checkbox, they can be informed once the service covers their location and chances for reengagement. 


  New page for checking location availability

New page for checking location availability


Final Prototype

_

High-Fidelity Comp Presented to Client

Here is the final clickable prototype with all the iterations made. We used sketch to design and wired it up on InVision.

P5-Pandia-Health-Preview-Mode-InVision-Google-Chrome-8_27_2018-3_55_44-AM.gif
I’m floored!
— Dr. Sophia Yen, CEO & Co-Founder