Establishing Trust in Form Design
Preparing our audience before asking for uncomfortable information
Pandia Health is a birth control delivery company dedicated to providing their customers with the right birth control for their needs in a timely manner. The company approached us with the task of maximizing conversion for users who would enter the flow of their website. We found that their on-boarding process was causing a lack of trust with their potential customers. We designed solutions that made sure customers knew Pandia Health was a company they could trust with their information.
For an example of more detailed documentation that was passed on to the developer, please look at the Full Documentation Appendix
Teammates
Janet Lee - Janetlee.design
Winnie Huang - winniedhuang.com
We conducted research, synthesized data about our users, sketched, tested and iterated on low to high fidelity wireframes, and built a clickable prototype within a 3 week sprint.
Role and Duration
Competitive Analysis
Affinity mapping
Created archetypes based on data
Mobile Site Design
Usability testing and iteration
Sketching
Paper prototyping
Wireframes and clickable prototype in Figma
Tools and Methods
Problem
A lack of clarity bred a lack of trust.
Users did not feel Pandia Health was a trustworthy company because of the confusion and frustration they were experiencing during on-boarding.
Upon receiving data from Pandia Health about where users were dropping off on their website, it became clear that throughout the sign up process, there were specific junctions that were having tremendously negative effects on their conversion. In order to understand the problem we began testing the sign-up flow and paying careful attention to those junctures.
Below is a diagram pointing out specific sections in the process that were having the most adverse effects. Our project timeline was limited; it was important that we focus on areas with the most negative impact.
The Y-axis represents the emotions of those maneuvering through sign-up. The x-axis are pages as they appear.
After testing the live sign-up flow, one challenge we found Pandia Health was facing was customers couldn’t understand what was being asked of them and why the information was necessary for the process of getting birth control. This lead customers to feeling suspicious of Pandia Health’s credibility and what they might do with the sensitive information.
70% of users were also on mobile device and were not informed of what information was expected of them before beginning the process. The nature of mobile devices is that users are on the go, their attention is divided, and they are not necessarily in the right place to provide sensitive information.
The on-boarding process asks for many personal questions. The entire process can takes approximately 10 - 20 minutes to complete. The long format and a lack of progression signals caused users to feel anxious and frustrated as they were lost in the sea of intimate questions with no idea how long the form as a whole will take.
Solution
If we address questions before they arise, people will know what to expect.
We must provide clarity in what we are asking and why we are asking for it. If we do that, we will establish trust with our potential consumers.
With that in mind we focused on the following aspects:
Created overview pages that explained what they needed moving forward into each section
Added indicators of progression
Provided two ways to clarify anticipated questions users might have throughout the flow
Added Save and skip functionality so users could come back and finish sections when they were more prepared
Allowed users to review their information before they finished the process
Process
Our designs were centered around clarity and trust; and we took the time to understand what that meant to our audience.
Our process was centered around taking our time to make sure we were considering the research and learning from our users. We never rushed towards a solution and we put a heavy emphasis on the following: if we didn’t know the answer based on what we already knew, we should test our ideas on users and have them teach us what they want.
Research and synthesis: starting the design process loosely
We began this project by learning from our users and taking their valuable insight and putting them on post-it notes, doodling on paper, and whiteboards. This made it possible for us establish a guiding light as we approached improving the on-boarding process.
Competitive analysis
We also began researching competitors early on. We wanted to understand what was common practice in this space. When we pulled together our research and began figuring out a solution, we wanted a full toolbox of ideas to work with to identify what was best for ours users. The companies we compared to Pandia Health’s on-boarding process included, The Pill Club, Alpha, Nurx, and Lemonaid Health.
Low-fidelity testing
After finding our focus we began quickly sketching out possible solutions to problems we were attempting to solve. We took those ideas and began drawing a paper prototype and showing it to our users to get another round of valuable input to make sure we were heading in the right direction. This was an iterative process as we built a version, tested, made adjustments and re-tested those ideas repeatedly.
Raising fidelity
We then built digital wireframes and a clickable prototypes in Figma in order to continue testing our solutions. As we got closer to our deadline, we raised the level of fidelity to match the live version of the website.
Deliverables
Progress Bar:
Our users wanted some sense of progression and gauge of how much time was left, so we added a progress bar. Some of the unique elements of our progress bar were the use of titles as well as the use of numbers. These elements let user know what they have done, what part they are on currently and what is still to come.
Initially the progress bar was only at the beginning of sections, but as we tested our prototypes, we realized people would feel anxious and frustrated when it was not present. This led us to decide to have the progress bar on every page.
Overview Pages
In order to address the need to prepare the user for the form, we created a series of overview pages that let them know what sort of information was going to be asked of them as they proceeded through on-boarding.
The initial version of the flow we were provided by Pandia Health did not have any over view screens. This added to the users not being prepared for the process. During the project, the live version of the site changed and had one overview at the beginning of the process. Through testing we found people would forget and not feel prepared for future sections. We took a step further and added overview pages in every section explaining what they needed as they moved into those sections.
Through testing we also found people had questions regarding why this information was necessary. Part of having these overview screens was to answer those anticipated questions about why Pandia Health needs that information.
Anticipating Questions
Part of establishing trust with our users is to provide clear explanations in moments of confusion. There were two types of anticipated questions users might have and we created two types of question signifiers for those questions.
The first way to answer questions which became already a part of the live version was question mark bubbles. They were used to explain specific categories with a short answer.
They are attached to specific questions that need clarifying like:
What counts as a government ID?
How do I measure blood pressure?
The second way we depicted questions was with drop-downs on overview pages. Drop down questions answer potential questions on an action a user is about to take. These answers give a more thorough explanation to provide context of why is it important to the overall goal of getting birth control.
Some of these questions might look like:
Why do I need to upload a photo of myself and a government ID?
What is the $29 price for if the delivery is free?
Our research showed users had many questions throughout the process. If we clarify their questions as they arise, this will quell their uncertainty and reassures them that they can trust Pandia Health with their information.
Save and Skip
We should be prepared for users who are not prepared to finish the form. Save and skip buttons on section overview pages were added to allow users to finish parts of the on-boarding process when they were ready.
When we tested the original flow, this was something that was heavily requested as often times, they did not have all of their information on hand. This allows them to exit the flow and sign back in when they are more prepared.
Through testing we found out we needed to teach users what the “save and skip” button does, so we provided a page with that explanation early on.
Review Pages
Our users also wanted to make sure they were providing the correct information throughout the form. In order to reassure them we added review pages to the process.
First two screens on the right are examples of the screens that would show up in connection with the save and skip button. If you didn’t finish a section it would notify you if you missed anything.
The last screen is an example of a full summary of the information they entered. This also gives them another chance to change anything.
Confirmations / Affirmations
Through testing, we found users didn’t necessarily know if they were doing the process correctly. In response, we added confirmation pages every time they finished a section, as well as, when they finish the on-boarding process.
On the final page, we provided information about what they should expect after they finish the on-boarding process.
We are moving towards a solution that has instills trust in Pandia Health through the on-boarding process. Next steps in this project would be to adjust the “save and skip” buttons. Some of our users were still confused about what that meant, and, when those buttons were available compared to the “back” button that is normally in its place. It is important to focus on making that feature clearer in visual styling and how it is presented. We would also further test our current solutions to make sure they were successful in our goal to increase conversions.
As for further development, implementing the global changes into sections we did not focus on during this sprint. We would look at other sections and test them with our users to find more adjustments tat would follow our focus in creating clarity and enabling trust.
As the on-boarding process evolves we would re-test to see what junctures users were struggling with most and addressing those problems as we find them.