Kickoff

We began by defining deliverables and discussing the main goals of the project so we could align on expectations and come up with a shared vision.

Evaluate

I conducted a heuristic evaluation of Heard’s previous onboarding survey, followed by a competitive analysis of similar survey types on other sites. I also asked participants to complete the survey to see where the pain points were.

The previous survey was a total of 30 screens, a few of those are seen below.

Prototype

Before I could jump into designing, we discussed the improvements as a team. Prioritizing what was critical to gain alignment and drive decision making. We decided on our critical items based on insights and I was able to move forward with the prototype.

Framework & Consistency

I came up with a few options for the layout and ended up choosing version three where the progress bar was at the bottom of the page. This layout would be used on every page of the survey. I wanted users to focus on the question first and then quickly recognize where they could choose answers.

User Journey Progress

We decided early on that establishing the length of the onboarding process would be a starting point for gaining the user’s trust. The original idea would be a progress bar showing how much of the survey they had already completed. We ended up moving away from that and opted for a tab design that highlighted the current section they were on.

Provide Helpful Information

Heard was currently not able to match users that wanted to pay for therapy with insurance and they were only available in California, Oregon, and Washington. The old survey did not make users aware of these factors until screen six and eight. These critical items affect the overall experience so moving them to the beginning of the survey was a priority. The payment information moved to the first screen also including an option to join a waitlist so they would be informed once insurance payments were available.

We decided to dedicate the third page of the survey to the location information. Users would enter in their zip code and if it was outside Heard’s locations, a pop-up would appear with the option to join a waitlist. We did this for a few reasons. Heard wanted to target interested users and having their location helps define which states they would add in the future. We didn’t want to include too many what-if scenarios on the first screen that would overwhelm the user and moving the location specifics after the email form aligned with business goals.

Flexible & Inclusive

Everyone has different experiences related to mental health and we needed to take that into account when asking questions and providing multiple choice answers. Rather than forcing users to fill out forms even if they weren't applicable, we gave them an option to choose "yes" or "no" when asked if they wanted to include specifics.

On every page of the survey, users had to choose an answer before moving on. We did this to make the process as streamline as possible. Since we provided other ways to skip text forms this made the most sense.

It would be difficult to provide every possible answer for certain questions but we wanted to make sure the answers fit everyone’s needs. We gave users the option to choose “other” for some of the questions so they weren’t forced to choose something even if it didn’t apply to them.

A/B test

We discussed the prototype as a team to see if there were any additional changes to add before user testing. We thought that users might want to know the section number they were on not just the section title. We couldn't decide if that would help or make the process more confusing. So I decided to make a second version of the prototype and include section numbers next to the header and progress bar but everything else would be identical.

For the test, participants would go through both prototypes and I could hear their thoughts about the entire process and ask if they had any thoughts about the section numbers. The main purpose of the usability test was to ask people what they’re thinking and why they’re doing certain things — qualitative data was the focus. But the addition of this simple a/b test was a great way to test one specific thing at the end.

Design Iteration

Feedback reminded me of our original goals — simplify and allow flexibility so everyone can choose answers that apply to them. We discussed the usability feedback as a team and decided to change the way users can provide additional information if they wanted to.

We needed to give users the option to expand on what “other” means for them. I kept the button on the page but changed it to a text form, that way users could click on it and fill in their response. Rather than choosing that option and wondering why they weren't able to expand on their answer. We also changed the copy under the question to let them know they could provide more specifics on upcoming screens as well.

We provided text forms for the questions that gave the option to add more specific information. But participants mentioned that they were unsure of what they would expand on. I revisited those screens and added additional text under the question that showed an example of additional information they could add. This allowed users to see this and then possibly recall specifics that they might want to include.

The final design consisted of 19 screens dedicated to the survey and a starting screen which was the landing page of the Heard site. The survey before being brought on to the project was 30 screens total. We were able to condense the information and make the experience less overwhelming.