Desktop & Mobile Site
Users are hesitant to sign up with Pandia due to the form’s confusing questions, tedious format, unintuitive user interface, and intimidating clinical language.
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.
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 :
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.
Infographic/how it works
Birth control brands
Zip code (availability at location checker)
Location by state (keyword)
USABLE FORMS / COMPARATIVE ANALYSIS
Finding Forms that Work
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:
INTERVIEWING WOMEN FOR EMPATHY
The most insight was gained from 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.
“Frustrated. I feel like sometimes forms will have fields that are not clear.” – User
Affinity mapping provided the team with enough information to divide the info into two categories of birth control and forms.
Are worried about running out
Use B.C. for reasons other than pregnancy
Is fully covered by insurance
Find long forms to be repetitive
Use mobile to fill out forms
Don't like filling out forms
One of the most beneficial methods of data collection was from observing usability testing of the prototype to detect user frustrations. No one likes filling out long repetitive forms.
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.
Pandia Health's Prototype
The first round of iterations
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
Progressive disclosure to combine pages
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
We drew out wireframe sketches on the whiteboard (and other design artifacts). Then we moved the wireframes into lo-fi wireframes in Sketch.
From Whiteboarding, Wireframing, to Prototyping
Pandia Health Prototype
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.
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
Second page that confuses the user
Suggested design for verification
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.
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
Here is the final clickable prototype with all the iterations made. We used Sketch to design and wired it up on InVision.