Mental health support made affordable and accessible

Peer collective is an alternative to therapy that provides mental health support in an affordable and accessible way

Client
Peer Collective
Services
UX Design
Deliverables
Web & Mobile Application
Web Mockup
Mobile Mockup
Live Site

The OVerview

About The Project

Peer Collective offers peer-to-peer counseling virtually that strives to address the unaffordable and inaccessible nature of mental health care by providing an alternative.

Unlike traditional therapy, which focuses on a diagnosis, Peer Collective provides care through empathy and relatable past experiences to bridge the disparities many face in mental health support.

Our goals was to bridge this disparity between affordability and quality through a reimagined booking process, improved user navigation, and personalized experiences within the MVP.

The OVerview

Role

UX Designer
User Research, Interaction, Visual design, Prototyping & Testing

June '21 - Present

The Problem

After landing on Peer Collective website, users were frequently greeted by the landing page as it would be the first page one lands on. However, our data shows majority of our users quit the page due to the scattered content without much direction on how to book a counseling session. This led to a significant turnover rate and loss of users and capital for Peer Collective. This is the shocker:

70% of Peer Collective Users struggled to proceed through the booking experience as they began navigating the website. 

User funnel drops off by 70% - data retrieved from amplitude.

The Challenge

For the user Peer Collective struggled to connect and engage with users despite the significant need in the mental health space. We focused on creating an MVP that could simplifying the booking experience for users.

However, the other main challenges was focused on the company. We had a severe lack of resources and time day to day, as like most startups, we’re stretched quite thin! We often have to reiterate our designs in order to be achievable within time and technical constraints, while still providing more value to our users.

With these two pieces we approached the entire challenge of:

How might we create a cohesive, personalized experience through the onboarding and booking experience for new and existing users?

The Solution

I elected to implement personalization of features to ease our users pain points while keeping in mind how much change we are making to the backend code. Some key strategies were: personalizing features, simplifying the filter, the paywall, including customizable profiles and the signed-in experience.

The improved booking flow helps users to filter, choose a date easily, and have additional options for payment.

The onboarding process was customized to user's need through more specific questions being added and progress bar to inform users of how far along they were

The counselors feedback was an additional option we created to allow for tracking satisfaction metric for Peer Collective to improve their quality of service.

The Kickoff

Competitive Analysis

After the initial user interviews, I created a competitive analysis focusing on the top five competitors in the mental health space. The highlight was that each company was able to personalize their onboarding experience to fit their users need. 

Ginger - Provides how it works, the step by step experience and user data to improve trust
TalkSpace - Clear and easy steps to onboard user to understand how it works
Mood Health - Clear header of what they are offering

Key Discoveries

From my discovery, they catered to the users needs by utilizing data from the following areas: 

User’s daily life: 

They were confident in their matching process through an effective, simple onboarding survey where they accounted for user's specific needs, consider their location, pre-existing symptoms, and preference of counselors. These simplified options of the service seem to add value to a busy user's life.

User’s needs: 

They provided recommendation of different counselors, medication, straightforward paywall, specific target audience, a different tone, and mood dependent on the user. The use of feature prioritization varied in each website. It depended on which user they were designing for.

Our competitive analysis of five different competitors

How did Peer Collective add value for their users?

They offered one KEY component that no other companies offered, which was compassionate and empathetic peer counselors that have been through similar challenges to better relate to the user. The idea was new but innovative in the mental health space, where it provides a more warm approach to mental health rather than just a clinical diagnosis. The idea was there, but many users were unsure and unclear about what they were actually offering, leading to the extremely high turnover rate.

“That’s what I was looking for, someone who wasn’t a licensed therapist because I didn’t want to pay the licensed therapist price for skills and services that I realistically were never gonna take advantage of"

“I tried TalkSpace for a week, the same with BetterHelp, but I felt like I couldn’t really connect with the [therapist].”

Users enjoyed Peer Collective for its affordability, counselor choices and connection without diagnosis. However, users struggled to find information on Peer Collective’s site which deterred them from signing up.

Heuristic Evaluation

Diving deeper to understanding our user, I completed a full heuristic evaluation of Peer Collective’s website. After completing a thorough 10-step heuristic evaluation,

I was able to identify three key issues within the onboarding process: ‍

‍Visibility of system status: where users get thrown into the experience being expected of what to do and immediately know what is offer

‍User’s control and freedom: users have very little control to customize their profiles and personalize bookings

‍Consistency and standards: users gather inconsistent content, and visuals, the lack of design standard which costed one to go through a smooth onboarding

Three key usability issues after heuristic analysis

Peer Collective's current homepage

New users begin on a landing page with little to no information about what services Peer Collective offers. The only prevalent information was from the awards page

On top of seeing the “What is Peer Collective” content, participants wanted to learn more about the team, the founders, and why we were created. This could create transparency and credibility for the users.

Understanding User’s Needs

In this step, I wanted to fully understand how users found what they wanted from the landing page. We interviewed a few of our users and had them complete a cognitive walkthrough.

In addition, using a tool called Hotjar enabled me to see raw recordings of the user's navigation and where does the drop off happen.
‍
From this, I learned from our users: 

Lacked transparency & information on the Landing page and About us Page.

Dropped off during the assessment funnel as they were frustrated with the onboarding process

They were info gatherers and had a strong interest in learning about what, who Peer Collective is, and how the service works.

Two types of users were identified based on user’s behaviors:

Info Gatherers: Gather as much information as they can about the service and company before signing up (67%). These users wanted to see the About Us and How it Works pages before signing up. Some wanted to see the Our Counselors page as well. 

‍Learn By Doing: Start the assessment to learn what the website entails, and read more about the website later (33%) Implies that we have users that start the assessment and then leave to explore the rest of the website.

To sum up the key priorities after this research, the focus is:‍

Improve the navigation, information & transparency throughout the site
Refine and personalize the user experience of the booking process

Ideation, ideation, ideation!

Finding Our Direction

After honing in on the pain point I wanted to solve, I collaborated with our CEO, Project Manager, and Investors to discuss what direction to pursue. During our meeting we focused on the service as a whole, the personalized booking pages, and connection with the counselor while taking into account the scope, constraints, engineering timeline and budget.

We brainstormed all the potential options with the whole team and made a plan to pursue personalized onboarding as the solution. It was practical, improved personalization for users with their counselors, and would increase our user conversion.

Persona

After dissecting the priorities, we narrowed down to a few user persona which helped me keep Peer Collective’s users in mind throughout the entire design process. 

These were the existing key players we narrowed down to based on our users' data

Sarah was the top performing user persona for Peer Collective, so we moved ahead with her

Dissecting the User Journey 

With the persona, Sarah in mind, I was able to collaborate with our team to create a user journey to pinpoint users key struggles with the booking experience.

Whiteboarding Sarah's persona journey line with the team

We had a team brainstorm session to iterate on Sarah's onboarding process through using sticky notes on labelling her emotions going through the booking process. As we put ourselves into Sarah's shoes, we understood the importance of improving and personalizing the booking process to ease her pain of using Peer Collective.

Whiteboarding Sarah's persona journey line with the team

New and Existing User Journey

After the white-boarding session, I came up with a cohesive user journey to put myself in a user shoe to completely comprehend their journey using Peer Collective. We were able to come up with specific user journey flows for our New User and Existing User.

Our new user's journey flow

Wireframing

Putting It On Paper

Here’s a link to my full sketches on invision>‍

I drew up a few sketches of what personalized onboarding & booking might look like.
This helped me visualize the two different use cases (new user and existing user) before we began wire-framing and testing.

Use case 1: Recurring User’s login experience 
Visualizing profile personalization for existing user’s personalization

Moving to Mid-Fidelity

Once I gathered key ideas about users' needs for personalized onboarding and booking, I created a few wireframes. This helped me to visualize the flow in depth and iterate on the options. This helped me to visualize an alternative look through rapidly ideating. After building, I built the prototype and it was ready for user testing.
‍Link to my full wireframes on invision>

Visualizing profile personalization for existing user’s personalization

Testing The Mid-fidelity

This was a quick test done collaborated with Christine, our User Researcher, to test the usability and functional aspect of the site before designing the high-fidelity version. All users could do a cognitive walkthrough of the wireframes with ease without alerting any key usability issues.

Feedback: Users prefers booking information rather than bookings

Users don’t want to be taken back to the home page if rescheduling since they prefer to edit quickly. Users suggest an “edit” option instead of “reschedule”

High-Fidelity Prototyping

Using the sketches and wireframes discoveries, I then was able to design the initial hi-fi prototype for testing. I used Figma to design the prototype because of the ease of making changes, gaining feedback when testing, and ease of developer hand-off.

Initial Design before Testing

High-Fidelity Interviews & Testing

After the initial designing, I collaborated with our User Researcher, Christine, to develop a test script to ensure we are eliminating user's assumptions and bias to ensure we are following usability standards. I also kept in mind of design standards throughout to develop a consistent design system and pattern according to usability standards. It was a crucial step for Peer Collective's success since it provided a framework for us to work with.

Our test script we came up with

These questions we came up with together will address if new flow was easier to comprehend, more intuitive, and allowed for personalization throughout the booking experience. This would, in turn, boost user engagement and solve the key problems of what our users currently are facing. I received the following feedback from testing:

One user said, “I wish it were easier for me to edit the preference of certain counselors, so I don’t have to go through so many steps.”

The Finale

Time to Make Changes

The final design had resolved one of the key users pain point throughout the booking process, the ability to customize filters in a personal yet intuitive way, helped simplified the experience on the screen and flow easily. Some new key features that were added from User's feedback were allowing for the menu bar and the back button.

These were the changes made to filter. This also accounted for future phases where more filtering would be implemented.

The survey sections also got a large revamp with allowance of going back, new ways of selecting options, and overall look/feel changes

Testing The Final Design

I A/B tested the changes with the same set of users and learned that the new design helped them easily filter counselors' preferences they were interested in.

Users could easily select the personalized filters that catered to their needs of what type of counselors they needed instead of going through multiple drop downs to figure out what best fits them. This helped drive further user personalization and engagement while improving counselor connections for Peer Collective. 

As addressed with users pain point above, the final designs were able to address key personalized features such as the filters, the options for paywall, personalized sign in experience, and profile management.

“I am a really big fan of this filter, it applies as I move through the booking flow, I don’t have to click anything extra to book an appointment.”

“Really great first impression, I would come back to a site like this and let it make a positive difference of my life, I’d love to see more about this.”

“I liked the flow of everything, it makes me more confident about creating an account and actually purchasing it” 

Our Curated Design System

This whole process required design consistency for the whole product, users needed to be able to navigate across web and mobile along with seeing consistent buttons, navigation and components.

The way I ensured everything was consistent was through a creation of a custom design system in which I got input from the development team on levels of effort. We decided to take MUI as a base and expand to this existing design system. 

Our master library of Design System

There were many elements involved in the design system, however a few of my favorites to create were the custom icons and the cohesive color palettes.

Our design system

High-Fidelity Mockups

Link to the web app>

Link to the mobile app>

The Development Handoff

I was working with our engineer Joshua throughout my process to coordinate on realism of the development side of things. I was aware of the timeline and how long things would take to developed. Thus, we utilized component libraries that were of design standards such as MUI components for quicker development time. We used tool like Jira to work alongside developers requesting for change request, and for clarified communication.

By working with developers:

Communication is key. Without clear communication, our milestones would not have been achieved. To avoid this, I continually checked in on Joshua to make sure he is not overwhelmed and could perform the task that I designed. 

As addressed with users pain point above, the final designs were able to address key personalized features such as the filters, the options for paywall, personalized sign in experience, and profile management.

What I learned & Success Metrics

Upon reflection, I learned first hand what it was like to work in a fast paced, agile startup that I had to work on my toes everyday to keep in mind of my scope, constraints and budgets. I learned to work within the design process and collaborated each step along the way while translating user data into prototypes, through our final design and working through development. 

While the project turned out successful, we used these key measures of our success metric: 

Successfully converted 50% of users after the improved version of MVP
Were able to get more investor funding by 1 million dollars


Back To Top