Hopeful

Overview

Hopeful is a responsive website that helps people suffering from depression, anxiety, sadness, loneliness or any other issue by connecting them to a therapist of their choosing.

Workflow

1. Defining the Problem

The initial part of my workflow is always about defining the problem. This includes possible problems and possible solutions to those problems. I then describe the concept and formulate a problem statement and using all the insights gathered I craft a solution statement.

The Concept

• There aren’t that many platforms out there that connect people suffering from mental health issues to professionals
• Some of the platforms focus more on meditation than therapy
• The platforms that do provide mental health support don’t provide any free content to the users
• Users lose motivation easily since meditation is hard practice
• People are fearful of being judged by their friends and family if they reach out for help

Problem Statement

Our users need to find a way to get access to licensed professional help because apps nowadays lack human element to them that doesn’t tackle the problem from the core. We will know this to be true when we see users downloading and sticking to our products using analytics and the number of sessions sold.

Solution Statement

A responsive website that lets people book online sessions with a therapist or a relevant professional of their liking. Users can schedule and pay for their session online. In addition to that, the website will offer free content such as Sleepcasts. These not only provide free content but also facilitate users to sleep better and bring their anxiety levels down.

Competitor Analysis

The two competitors I chose for the analysis were Headspace and Present. Both these apps are meditation based and the insights I gathered from this analysis are as follows.

Key Insights

• Users lack human connection while interacting with digital products
• Users don’t want to commit to a monthly subscription plan
• Headspace provides users with free content that engages them
• Present has a pricey plan at 40€ per month and will not engage users
• Present uses gamification to retain users
• Opportunity lies in creating a platform where the users can connect with real psychologists to cope with anxiety

Link to the full prototype.

2. Understanding the User

I started out with preparing a test script and plan for my interviews. I picked out 3 people who have been to therapy or have used a meditation app to interview. The interviews were mostly about people’s motivations, experiences and frustrations with the current platform they are using. Following that I did affinity mapping to put everything into perspective. Here’s a picture to showcase my findings.

Affinity Mapping

Findings

• People are having difficulties with slow processing times using governmental institutions
• Prices are very high for private institutes
• Location seems to be a big issue as people don’t want to travel far
• People have to go through an assessment phase to actually get to talk to a therapist
• Digital platforms are not primary means of reaching out for help (in Finland)
• Websites have discoverability issues
• Free consultation is available in order to get a feel for the therapist

Way Forward

Based on the insights gathered from the people I interviewed, there is definitely a potential for a digital platform that would facilitate people in consulting a therapist for whatever issue they might encounter. The price seems to be another issue that people take into consideration. If we can offer people simple yet affordable means of getting therapy then from the looks of it, people would gladly use the product.

User Personas

It’s time to introduce the personas, meet Carla and Jodie. They are both at a different stage in their lives which translates into different motivations, goals, frustrations and needs.

User Journeys

I designed user journeys based on my findings and observations from the personas. These take us through the entire process of what a user does and feels while interacting with the product.

User Stories and Flows

Following user journeys I made user stories and flows. These were based on the most important aspects on the app, such as;

• Booking an appointment with a therapist
• Listening to a Sleepcast

3. Foundational Design

It was time to get my creative juices flowing by designing some low fidelity wireframes. I also decided to create paper prototypes by annotating the wireframes.

Low Fidelity Wireframes

Booking a session

Here we can how a user might book a session with a therapist using low fidelity wireframes for mobile.

Listening to a Sleepcast

Users can also listen to Sleepcasts free of charge. It serves as a nice function of utility.

Mid Fidelity Wireframes

Now it was time to go to my favorite design tool, Sketch, to design mid fidelity wireframes for booking a session with a therapist and listen to sleepcasts.

Booking a Session

Here's the flow for booking a session with a therapist. I used Sketch to lay down the foundation for my final screens.

Listening to Sleepcasts

Subsequently, I designed the flow for listening to a Sleepcast as well

4.Usability Testing

I figured my wireframes were detailed enough to conduct usability testing. So I booked time slots with 6 different people. The tests were based on the following parameters;

• Booking an appointment with a therapist
• Listening to a Sleepcast

I used unmoderated, remote testing using the app called ‘Participate’. It was nice because the participants could do the test whenever it was suitable for them. After recording the feedback, I divided it into observations, positive quotes, negative quotes and errors. To put everything into perspective, I conducted another an affinity mapping study, Here’s what it looked like.

Key Insights

• People were satisfied with the functionality
• The body text was too small, so I enlarged it
• There was no way to check the appointments, so I made a brand new appointments screens

Some of the feedback was too specific and would require a lot of context. Therefore, I won’t get into nitty-gritty here.

Refining the Design

Now we come to the part where I made all the visual design decisions. I established a color palette for the design. I wanted to use yellow with a minimalistic touch to the website. It didn’t stop just there, I also established a design language system, establishing some guidelines that would drive my design decisions. Here’s what it looked like.

End-to-End Design

Landing Page

The landing page welcomes the users and has a warm welcoming tone with a CTA suggesting users to register to the platform. In addition to that, featured therapists are located just below and that is the main feature of the website. Sleepcasts section follows afterwards which provides the users a nice function of utility.

Booking an appointment

Here’s the flow for booking an appointment for a therapist. I focused on simplicity. There’s many filters the users can choose from depending on their situation. The therapist profile has all the information that is needed for the users. Users can pay using Paypal or a credit card.

Desktop Screens

Desktop screens for a booking time and therapist’s profile. Notice that the functionality remains the same across different platforms regardless of the size of the screen.

Listening to a Sleepcats

Here’s the flow for listening to a Sleepcast. It is fairly simple. The users can access Sleepcasts through the Hamburger Menu.