STORY
Counseling Booking Flow Revamp
As the solo-designer/researcher at Safe Space, my role is to execute the end-to-end process of revamping the client counseling booking flow to increase conversion rate, hence improving the B2C revenue.
OVERVIEW
TL;DR
The old booking flow caused high drop-offs before transaction. Therefore, the project is to revamp the flow in order to increase B2C revenue. The process includes understanding the user's expectation and pain points during the exploratory process using various research methods. Some of the challenges include working with other stakeholders to ensure that the revamped flow does not disrupt the value they gained from the old flow.
The new booking flow has a 20% increase in average unique users per month and a 56% increase in total appointments booking. The increase is estimated to be a $51,800 gain in revenue over the 3 months after launch.
Role
UI/UX Designer (Fully Remote)
Skills
Research | Research strategy planning, user interview, usability testing, card sorting, survey, AB test, data analysis
Design | Fast prototyping, responsive design, high-fidelity design
Product | Tech handoffs, requirement writing, quality assurance testing
Tools | Figma, Miro, G-suite, Optimal Workshop
Stakeholders Involved
External | B2C clients, therapists
Internal | Counselling team, support team, tech team (out-sourced),
sales team
Timeline
Jul - Sep 2022 | Research + design
Oct 2022 | Tech handoff + testing
BACKGROUND
Safe Space is a mental health-tech platform that allows users to book and conduct counseling session directly through the platform. An ideal Safe Space client journey experience look like:
Due to mental health counseling being a highly stigmatized topic in Asia, the "Before" phases indicated in the chart could take more effort for a user to realize that they need counseling support. This process could include, trying out self-help method, talking to friends, searching for methods online, until they become receptive to the idea of "counseling".
At Safe Space, when a user is ready to "Action", meaning they are ready to look for counseling support, this was the old user flow they needed to go through to book a counseling session.
THE PROBLEM
The booking flow demonstrated above was developed during an extreme short period of time with no time allowed for research nor proper design effort, resulting in a low conversion rate of 15% as demonstrated below over the
6 months period (Nov '21 - Apr '22):
What do we see from the conversion rate?
-
The two high drop-off pages were the Intake Form page and the Select Date/Time page.
-
30% of the user did not complete the intake form; and 30% of the user did not make a decision about the date/time of the booking (assuming no technical bugs occurred).
-
Side note: The 30% loss in traffic from Select Date/Time to Make Payment was also impacted by the Login/Signup page. Due to tracking limitation, we weren’t able to separate logged-in user and new user traffic. A portion of the users were lost because of the signup/login wall.
-
-
Interestingly, from payment to actually completing booking, the drop was only 10%, meaning users who arrived at the payment page had 75% chance of completing the transaction.
Therefore...
From the conversion chart, if we increase the traffic to the Payment page by finding out why users drop-off at the Intake Form or Select Date/Time, we will be able to increase the overall conversion rate, hence achieving the business goal of increasing the B2C revenue.
In other words, we wanted to learn more about the "Aware", "Action", and "Explore" phases of the user journey to find out the reason for dropoffs. That is, what is the client's JTBD?
*JTBD = the end goal, intention, or the expectation that the user hope to achieve when they perform an action.
THE PROBLEM SOLVING PROCESS
1. DISCOVER: UNDERSTAND THE CLIENT'S JTBD
I conducted two rounds of research with 8 strangers and 6 clients to understand the new and old perspectives about the client’s JTBD when they come to Safe Space mental health counselling platform.
✏️ Research Round #1
General usability testing of the booking flow with strangers
Each of the participants were given a scenario where they get to recall a time that they feel stressed, and they were introduced to Safe Space by friends. As a user who had never heard about Safe Space, their tasks were to perform the user journey of getting help from the recommended platform, Safe Space, while thinking out loud.
Objectives
-
To understand from a fresh perspective, the thought process when landing on Safe Space's website with the goal of feeling better mentally.
-
To understand from a fresh perspective, the service exploratory behavior pattern and and how the current flow aligns with their expectations.
✏️ Research Round #2
General user interviews + usability testing of the booking flow with clients
Two-parts interview: we started with open-ended questions to understand the clients' thinking process of getting to know Safe Space, then we asked them to perform the task of booking an appointment on Safe Space while thinking out loud.
Objectives
-
To understand the thought process and behavior before a client choses Safe Space.
-
To understand the decision making process and important factors when a client choose + book a therapist.
I first categorized all responses into sticky note groups: Observation, Neutral, Positive, Negative, Suggestions. Then I go through each notes to identify the common themes and write down the potential opportunities on the side. With FigJam stickers it is very easy to label the notes to help with thoughts processing.
💡 Insights From The Research
-
[OBSERVATION] When users are seeking mental health support, they are often in a frustrated or depressed mental state, often times secretly as well, as they don't want their friends to find out that they have "mental health issues" due to society stigma on mental health.
-
[OBSERVATION] Before users commit to go with Safe Space (commit = purchase a session), an important part of the exploratory process includes understanding the “supplies” and how the supplies can satisfy their needs. The actions involved in this exploratory process include:
-
Playing around with the booking flow and experimenting with the filters, and comparing different therapists’ profile. This is a process that includes a lot of back and forth navigation.
-
Clicking on the "Therapist" page first when landed on the marketing website
-
-
[PROBLEM] When user click "Book an appointment", their expectation was to book a session with a therapist, not answering questions (intake form), and the questions doesn’t make sense to them. Their cursors moved around the screen to find a way to skip the questionnaire.
-
[PROBLEM] When user arrive at the therapist results page, all profiles look the same and they don’t know which one is more suitable for them.
-
[PROBLEM] When user already has a specific therapist in mind, they cannot directly book with the therapist. (Lack of entry points)
To map out the user thought processes on an empathy map:
Client's JTBD:
When users enter the booking flow, they want to know which therapist is more suitable for their needs, so that they can book a session with the therapist in order to soothed their mental health needs as effective as possible.
2. DEFINE: HOW CAN WE SOLVE THE PROBLEM WHILE NOT DISRUPTING THE JTBD OF THE OTHER STAKEHOLDERS?
From the Discover phase, we've understand the user's expectation/motivation and how the old booking flow was going against that. From there, we have identified the two main areas in the user journey where challenges arise.
However, before we proceeded to come up with design hypothesis, there were still questions to be answered to understand how exactly the user journey can be improved to effectively solve the problems without disrupting other stakeholders' user flow.
In the Define phase, we will be uncovering the questions under the two main challenges.
📌 Challenge Area #1: The Intake Form Flow
The mandatory intake form at the beginning of every booking did not serve the user's JTBD (not relevant to their needs), it was confusing and delayed the expectation of "finding a suitable therapist", which frustrates the user.
Constraint that we had to consider:
The purpose for the intake form is to provide data for the therapist to prepare before the session, and the data is also anonymized to give the HR manager (who partnered with Safe Space) insights on how their employees are feeling.
Problem statement:
How might we re-design the intake form to make it relevant to the user's expectation, while still providing value to the therapists and HR managers?
Questions to help answer the problem statement:
-
How much impact do the responses have on the quality of the session itself?
-
What is the least information we need to provide to the therapist?
-
What information does the HR manager need to see to create an impact on B2B retention?
-
How can we balance the amount of data to collect while not impacting the conversion rate?
📌 Challenge Area #2: The Product Recommendation
After users went through the intake form, they would see the product recommendation (therapists recommendation). But the therapist profiles were displayed in a way that they "all looked the same" to the users. The recommendation was very weak and didn't help them understand which therapist is more suitable for their needs.
Design problem:
How might we better guide user to find a “suitable” therapist with the least effort, so they can feel confident about making a booking with the therapist?
Questions to help answer the problem statement:
-
Why do they think that the profiles "all looked the same"?
-
How do we define “suitable”?
-
How is the mentality of selecting a therapist different from shopping for clothes or e-commerce platform?
-
How does it look like when the user spends “least effort” to find a therapist?
After rounds of user interviews and testing, we have discovered that there are three factors that influence a user's decision on whether a therapist is "suitable":
-
Affordability: Do I have the time and budget to afford this session?
-
Capability: Is the therapist capable of treating me?
-
Comfort: Will I be comfortable with the therapist? Can he/she relate? Do we vibe?
We have also uncovered that the intake form only serve as a "good to have" insight for the therapists, the only information they need is the "reason" of why client came, and whether or not the client has suicidal intention.
With the insights, we were able to finalize the problem statement for the project and proceed with design:
How might we re-design the exploratory process of the booking journey so user feel confident that the therapist they selected is "suitable", in order to increase the conversion rate to the payment page?
3. DESIGN: VALIDATING THE HYPOTHESIS THROUGH USER TESTINGS
After defining the problem statement, we started to come up with design hypothesis and taking them to user interviews for validation.
📌 We came up with four hypothesis on the iteration of the "first page" of the booking flow and tested them with users:
[HYPOTHESIS 1] If we align the user's expectation by explaining the process clearly and why it’s important to fill out the intake form, then users will be more willing to go through the intake form because it aligns with their expectations.
Before
After
What did we change: In this iteration, instead of throwing users the questions on the first page, we let them know what to expect before asking the questions. We also modified the copy to make it more welcoming.
❌ Hypothesis failed: Users feel like there are a lot of steps to go through and they cannot find the immediate value. Plus adding a page in the booking flow meaning the conversion would decrease.
[HYPOTHESIS 2] If we align the user's expectation by showing the testimonial and therapists’ pictures, then users will be more willing to go through the intake form because it aligns with their expectations.
Before
After
What did we change: In this iteration, we welcomed the users by displaying the pictures of our therapists (which matches with their expectation of finding a therapist) and testimonials.
❌ Hypothesis failed: Users are attracted when seeing the testimonials but as they go through the mandatory questions they still feel frustrated as they cannot see the value. And the conversion rate is definitely impacted.
[HYPOTHESIS 3] If we display intake form in a way that the therapist is “asking” the question, then user will be more willing to go through the intake form because it aligns with their expectation.
Before
After
What did we change: We understand that the when user is answering the intake form questions, it's in fact a similar mentality when user is talking to the therapist about their problems. So it led to the idea of what if the therapist is the one who "asks" user the questions during the intake form. This iteration is to test out the hypothesis of user selecting a therapist before answering the intake form.
✅ Hypothesis validated: Users had no confusion nor frustrations when going through the questions that are "coming from the therapist", some of them are even happy that they get to tell the therapist early.
[HYPOTHESIS 4] If we make intake form a “tool” get match with a therapist and user has to activate it themselves, then user will be more willing to go through the intake form because it aligns with their expectation.
Before
After
What did we change: The third hypothesis considers the use case when user has chosen a therapist by simply browsing, but it has not solve the issue of "therapists all look the same". In this iteration, we make the intake form as a Get Matched "tool" for user to use, we also revamped the questionnaire inside the intake form to match with the users' JTBD. (E.g. instead of asking "How are you feeling?", we asked "I would like to talk to the therapist about...")
✅ Hypothesis validated: When user arrive at this page, they would browse the therapists first, then 80% of them clicked "Start Here" to get match. Of all who entered the questionnaires, 100% completed the questionnaires without hesitation nor confusion.
We conducted 24 user interviews & usability testings during the iteration process. With every round of iterations, we gathered more insights about the user behavior to help us make design decisions that can better drive conversion rates.
We have validated our hypothesis that influenced the final design decisions:
-
Users are more receptive to answering the intake form when the therapist is the one "asking" the questions
-
Users behavior during the exploratory process include browsing, filtering, and comparing.
-
Elements like photos and personal bios are important element to influence a user's comfort level toward the platform.
-
Questions like "feelings, physical symptoms" are more personal and can be optional as they don't impact the quality of the session.
4. DELIVER: THE FINAL ITERATION WITH TECH IMPLEMENTATION PLAN
To recap the problem statement, 'How might we re-design the exploratory process of the booking journey so user feel confident that the therapist they selected is "suitable", in order to increase the conversion rate to the payment page?'. We have arrived at the revamped flow as demonstrated below:
-
When user first entered the booking flow, they will see a list of therapists that Safe Space offers. —✅ Client JTBD matched
-
User can browse through the therapist list or click "Filter Therapists" to select any therapist. —✅ Client JTBD matched
-
User can click "Get Matched" to get match with a therapist based on their preferences. —✅ Client JTBD matched, Therapist's needs satisfied
-
-
If a user goes through the flow of selecting a therapist first, they will be redirected to answering the questionnaire after selecting the date/time. —✅ Client JTBD matched, Therapist's needs satisfied
-
After payment completed, at the Complete Booking page, user see the optional questionnaire that can "Help the therapist understand you better". —✅ Client JTBD matched, Therapist's needs satisfied, HR dashboard display satisfied
Revamped client counselling booking flow
🎨 The Final Design Iteration Demo
Booking flow first page & Select therapist page
Before
.png)
.png)
After
The design decisions:
-
This is the first page that user see as they enter the booking flow. In the old flow, user are mandated to answer the intake form questions before accessing the list of therapists. In the new flow, user can immediately browse the therapist lists which satisfies their expectations of "finding a suitable therapist as fast as possible".
-
The intake form questionnaire is revamped into two parts, with the mandatory questions re-packaged as the "Get Matched" questionnaire, and the optional questions placed after user complete the payment.
-
The layout of the questionnaire option is revamped to single-column to improve readability and reduce cognitive load.
-
A progress bar with indication of the therapist icon is added to indicate the progress of the questionnaire to set expectation.
-
The therapist profiles are revamped to highlight the information that are relevant to the user, in other words, the information that would influence the user's decision on whether a therapist is suitable. The design is based on the three factors: affordability, capability, and comfort. (The design process for this will be demonstrated in another project in this portfolio).
-
Progress bar is omitted in this step as the user is not ready to enter the booking process yet. At this stage, they are still exploring, so the progress bar could confuse them.
The time selection page
.png)
Before
.png)
After
The design decisions:
-
In the new design, we indicate the number of available slots in the next months, to reduce the disappointment if the therapist does not have any availabilities remaining in the current month.
-
We display all available time slot options in the page instead of hiding them in a dropdown menu, we also categorized the time slots into Morning and Afternoon/Night for easier navigation as user can spend less effort in clicking.
-
The left column of the page displays the booking information user selected so far, which gives user a sense of security and reduces the cognitive load needed to remember the booking details.
-
The "Back to Melissa's Profile" button is shifted to the same page as the time UI, as it was not obvious in the old UI and user often mis-clicked.
The signup/login wall
Before
After
The design decisions:
-
In the old signup/login page, user had the experience of being "interrupted" in the user journey as the only thing they saw is the signup/login prompt. In the new design, we kept the experience flowing by...
-
Keeping the booking details recorded at the left column
-
Adding a helper text underneath the title to let user know the benefit of signing up
-
-
Knowing the exploratory behavior of "going back and forth" to select the therapist, we also implemented a separate URL to each step of of the booking flow, so when user exited the booking flow, their booking details will still be remembered when they come back.
The complete booking page
.png)
Before
.png)
After
The design decisions:
-
In the new design, we separated the Intake Form questionnaire into two parts, with the mandatory questions embedded inside the booking process, and the optional questions to be displayed after user completed payments, at the complete booking page.
-
We highlighted the therapist's photo at the complete booking page, to give assurance and confidence to the user that "My therapist is here for me".
-
We reused the component of the booking details from the left column during the booking process, to reduce tech effort and increase consistency in design.
To experience the full revamp booking flow, check out the link: 🔗https://app.safespace.sg/booking
MONITORING THE RESULTS
💰 Data tracking
We spent 3 months for research + design + tech development + QA, and the final revamp is launched in November 2022. After 3 months of monitoring from November 2022 to January 2023, we are able to see the positive impact of the new booking flow:
Unique Users / Month: 20% increase ⬆️
OLD | 278 unique users / month
NEW | 336 unique users / month
Total Appointments Per Month: 56% increase ⬆️
OLD | 306 total appointments / month
NEW | 478 total appointments / month
B2C Revenue Increase Per Month: $17,200 ⬆️
💬 What our clients said after the flow revamp
🥰 “The website is extremely user friendly and encouraging for people to use, especially for first timers.”
😆 “SafeSpace has made my entry into getting professional help for my mental health a lot easier and much more convenient. I really glad I was able to find this platform and will definitely recommend it to friends who wish to seek help as well.”
😊 “Thankful to discovered this platform. Have already shared on my social media. This platform needs to reach more people, it is helpful!”
😎 "It's safe and private. Good match too"
😌 "Ease of booking and cancellation."
🤩 “Thank you for creating this safe space. It was hard, really hard to reach out for help until this space makes it so fuss free with a click.”
(Testimonials collected from Q1 2023 Client Impact Measurement Survey & Post-Session Survey)
MY THOUGHTS AFTER THE PROJECT
One of the biggest learnings in this project was to always, always, remind myself of the problem statement and not be too attached to my design "solutions". Because any kind of solutions could be our "assumptions". This was a learning that my amazing Product Manager taught me, whom I worked alongside in this project. At the beginning it was challenging to frame my design thoughts as assumptions, but toward the end I realized that it has become my way of thinking during problem solving.
During the project, I had to plan and execute all the research processes and analyze the insights before applying them to my designs, it was challenging, but fun. I really enjoyed the process of uncovering users' thoughts by talking to them, and learning how to balance different stakeholders' requirement while achieving the goal. I also enjoyed the process from seeing user being confused about my prototype during usability testing, to being able to finish the booking flow with no frowns nor hesitation on their face toward the end of the design process.
If I could improve anything about the project, I would spend more time thinking about the possible scenarios that we could have in the future in terms of counselling services. Because I have identified a few flaws that could become an issue if we were to implement a different kind of counselling services, for example, if Art Therapy were to become one of the option, then user will have to go through multiple "validation" during the process before making a booking.
Overall, it was a fun project that came with a huge amount of fruitful learnings. Most importantly, it is so rewarding to see clients' lives being impacted by our platform, whether it's their first time to counselling and already having a transforming experience, or them making Safe Space their lifelong mental healthcare partner. :)
