Real Smile - Men's Mental Health Website
Role: Lead UX/UI Designer
The Product
A website to help men with mental health issues find help through booking online video therapy sessions.
Project Duration
October 2022 - April 2023
The Goal
To create a website dedicated to men searching for help. The website will provide a clear and simple on-boarding process to booking an online video therapy session with a therapist discreetly.
The Problem
Suicide is the leading cause of death for men under 50. Men don’t typically openly talk about their mental health struggles with friends or family and suffer in silence. Traditional methods of therapy are currently failing this demographic and new options need to be created.
Research
To begin the project, I conducted an online survey across a broad spectrum of men to identify common challenges faced when looking for help with mental issues. Prior to the survey, we had made assumptions that most men didn't seak traditional methods of therapy and found help online. However, we discovered this to be inaccurate as from the small sample, over half had been to some form of in-person therapy.
As part of this project, we looked at a broad spectrum of men to get a comprehensive look at the experiences they are currently receiving. These insights would allow us to target the users' pain points and find the gaps in the market. Our survey found the following are the main pain points for our target demographic:
-
Long wait times
-
Long distance to travel for help
-
Expensive to not use NHS
-
Prioritise Privacy
Meet the Users
From the study, we determined two personas that would need to be catered for by the app. The first persona was a busy husband and family that needed to cater to his family's needs quickly. The second persona was a single female that regularly has takeaway as a social event and has a higher priority on value for money.
Wireframes
We created wireframes to allow us to test the primary user flow to see if the experience performed as expected. This would allow for quicker iterations prior to applying branding, colours and fonts. The testing performed on the wireframes discovered some key pain points that we were able to address for a seamless experience.
Iteration
After creating our prototype from low-fidelity wireframes, our team prepared an unmoderated usability study for participants. We asked 5 male participants to run through different a selection of scenarios in our prototype in hopes of garnering enough feedback to use for each set of design iterations. We found the following:
Unclear CTA
"Get Started" wasn't a clear indication of the main flow
Price easily missed
Users missed the cost of the session as it isn't clear enough
3rd party sign in
Only Google was used but was biased towards android
Unclear information
Most participants didn't know what to expect once booked
Didn't save card
Most users didn't save a card as trust hadn't been built
Step 1 - Pick a time
The lack of information about the booking was noted during the testing of the original wireframes. To improve this we split the booking process into two columns. The first column was used for the user to input the required information and the second displayed the information about the users booking as they progressed.
Step 2 - Log in/Sign up
The original wireframe included a 3rd party login Google button. This was found to be biased towards the Google/Android ecosystem. In the final version, we added the Apple login to cater to a larger amount of users and to not show bias towards one ecosystem.
Step 3 - Payment
The original wireframe included a "Save Card" feature that wasn't used by first-time users. This feature was kept as the first step of the process was updated to include a "Session type" drop-down selection. This allowed this process to be capable of creating all types of bookings, not just "Welcome Sessions". Repeat users will be more likely to want to save card details to save time in future.
Step 4 - Complete
The original wireframe included details about the booking that had been completed by the user but lacked information on the next steps. The final version was updated with clear steps and additional CTA's that would aid the user with the booking.
Style Guide & Components
Combining two incredibly distinct fonts helped to create Real Smile's modern look. This was combined with a vivid colour scheme that was bright and came across as "Happy".
Live Prototype
Below is the live prototype which was developed as a result of the testing completed on the wireframe. The end result had a positive feeling that was aimed at introducing a new generation to a new way to receive therapy. By focusing on the end result, rather than the current problem the design is focused on providing hope to those who most need it.
Takeaways
This project was completed as part of my Google UX Design Professional Certificate and was created using Adobe XD. The research stage using real people helped the design to avoid my own bias, resulting in a better user experience. Targeting the primary goal of creating a booking help me to create a more satisfying and enjoyable experience that would perform.
"The booking process was key to the success of the project, so was the focus of the user testing."
The use of quantitative and qualitative data points highlighted areas where we lost people or didn't provide enough information to enable the user to progress. If I was to continue this process of making improvements I would try testing the booking process again to see if the updates have fixed the issues found by the first round of testing. The second round of testing would also be focused on how the added styling has affected the user journey and if new issues have been created. The user journey testing would also be expanded to the different user types, including the returning customer to see how this journey has been affected by the changes made to the wireframe.