_pandia_hand-phone-transparent

CLIENT

Pandia Health  

PROJECT TYPE

Desktop & Mobile Site 

MY ROLE

Researcher 
Interviewer 
UI Designer

PROBLEM

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

UX DESIGNERS MEET PANDIA HEALTH

How can we improve the conversion rate?

Pandia Health and the team of UX designers had an introductory meeting to review the statement of work. The health start-up was experiencing a low conversion rate from users who visit their site. Currently only 10% of those that sign up complete the process. The stakeholders asked the team to investigate why and suggest iterations for a new site. They currently had a staging site, ready to be deployed with our help (but the staging site was not discussed with the team until later on in the is process). 

Design Challenges for Consideration :

  • 70% of their customers are on mobile
  • They lose 50% after the intro screen
  • They lose 25% after Pandia asks for payment 
     
  • They lose people after they ask for photo ID, government ID or blood pressure.
  • Does a happy intro keep customers for longer?
DISCOVER / RESEARCH

Discovering the Site's Glitches
 

At first, we did not know of the client's staging site, so the designers tested the current client’s website to find a list of glitches. During another meeting, it was clarified that the client also had a new prototype (staging site). So we tested the prototype to still find several glitches. Since the redesign was not based on any research, it is still unknown if they would still have the same problems. Our team’s strategy was to do research on online forms and then test their prototype with users as well as analyze the competitors. 
 

COMPETITIVE ANALYSIS

A competitive analysis was done with similar medication delivery companies including Nurx, The Pull Club, Lemonaid Health, and Alto. The team gathered information based on their desktop and mobile sites to identify strengths and weaknesses in the client's staging site. The strategy was to list features of a site and check off which the competitors were using. We gained insight on how to make Pandia Health's site more user-friendly. 

Rooms for Opportunity to Test:
  • Infographic/how it works
  • Testimonials/reviews
  • Birth control brands
  • Zip code (availability at location checker)
  • Blog link
  • Location by state (keyword)
_competitive-analysis-homepage-pandia
Usable Forms 
COMPARATIVE ANALYSIS

The competitive analysis gave us insight for designing a homepage, but it did not focus on the forms. The business goal was to increase the low conversion rate. Users have to interact with the site with forms, so it's important to have usable forms that are accessible to everyone. We took a look at another company who has a successful form with usability, which was Turbo Tax's mobile site.  

Design Suggestions for Usability:
  • Conversational Language

  • Empathetic copy

  • Colorful Icons

  • Save Points

  • Assistive Text

 

 

intuit-turbo-tax
06_comparative-analysis-1
06_comparative-analysis-2
06_comparative-analysis-4

Interviewing Women for Empathy 

We gained the most insight from the interviews.

Surveys and interviews were conducted to gain insight into women's experiences of getting prescriptions, obtaining the pills, filling out forms, and their level of familiarity with birth control. Women aged from 19-40 were involved with 26 screeners and 12 interviews. 

We asked Pandia Health to connect us with five current subscribers to interview. The requirement was that they had just recently subscribed to their services, so their on-boarding experience was still fresh in their memory. We also interviewed seven non-subscribers to gain more data from people who have no knowledge of the product.

Affinity mapping provided the team with enough information to divide the info into two categories of birth control and forms.

 

“Frustrated. I feel like sometimes forms will have fields that are not clear.” – User

 

  

01-affinity-mapping

Key Discoveries

Birth Control

60% 

Are worried about running out

72%

Use B.C. for reasons other than pregnancy

72%

Is fully covered by insurance

Forms

81%

Find long forms to be repetitive

64%

Use mobile to fill out forms

100%

Don't like filling out forms

Testing the Client's Prototype 

One of the most beneficial methods of data collection was from observing usability testing of the prototype to detect user frustrations.

DEFINE / SYNTHESIZE

usability-testing

No one likes filling out long repetitive forms

Solution

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.
 

DEVELOP / PROTOTYPE

Steps to Simplifying the Form

Pandia Health's new user onboarding form was simplified by first categorizing each page into what data was being collected by the users. By gaining a broader understanding of the process, we were able to combine pages. The staging site evolved from 22 pages to 15 pages. Seven of the pages were removed. This results in fewer pages, less time wasted on loading and waiting. It also made it easier to implement a progress bar to show the user's movements, too many steps in a progress bar intimidates the users.
01-current-flow
02-flow-iterations
03-suggested-user-flow

Pandia Health's Prototype

The first round of iterations

Final form-flow

DESIGN STRATEGIES / LESS IS MORE

Progressive Disclosure

A user can be confused with information overload. To solve confusion only the necessary components were shone at a time for a more efficient process. 

During testing of the client's prototype, the health history page is only necessary if the user needed a new prescription. Previously, the client's prototype asked several questions and to solve the lengthy user flow multiple pages were combined with a new design tactic called progress disclosure.

"Progressive disclosure thus improves 3 of usability's 5 components: learnability, efficiency of use, and error rate." - Nielsen Norman Group 

Current Prototype with Progressive Disclosure
 
FireShot-Capture-23-Pandia-Health-I-He_-https___staging.pandiahealth.com_onboard_patient_history (1)
Progressive disclosure to combine pages
 
04-progressive-disclosure
progressive-disclosure

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 on 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
 

pandia_brand_colors
Color palette provided by the client
 
radio-01-1
Online form design patterns

IDEATION & DESIGN
Whiteboarding Sessions

We drew out wireframe sketches on the whiteboard (and other design artifacts). Then we moved the wireframes into lo-fi wireframes in Sketch.

Whiteboard Sketches

DESIGNING THE FORM

From Whiteboarding, Wireframing, to Prototyping

Pandia Health Prototype

FireShot-Capture-23-Pandia-Health-I-He_-https___staging.pandiahealth.com_onboard_patient_history (1)

Low-Fidelity Wireframe

low-fid-wireframe-02

Visual Composition

03-sign-up-form
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
ITERATIONS

 Upload Photo


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.

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
 

1

Second page that confuses the user
 

2

Suggested design for verification

uploadphoto

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
 
Suggested design for the period frequency question
 
3
5

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

7
DELIVER / IMPLEMENTATION

Final Prototype

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

Selected Work

TargetUX/UI Design

PowerSphyr & SkyCurrentCorporate Web Design

DeluxeWeb and Mobile Design

CloakIdentity Branding

Trichy The PullBotAI Chatbot

SAY HI 👋

Feel like chatting more about my design process, typography or front-end code.

WORK INQUIRIES 🙌

If you have a project in mind or if you're looking to join strengths with a creative visual person.

© Kristen Kelly Design