heartsease

Design for good
ROLE
UX Designer
TOOLS
Figma
DURATION
Jan - Feb 2023
Overview
The problem
Many people do not have the time or means to go to in-person therapy sessions despite needing help, and some are not comfortable with talking to a stranger face to face.
The goal
Design an online therapy service that allows people to receive therapy via communication forms they’re comfortable with, and at the time and place they’re available.
Research
Interview

I conducted several interviews in order to understand the needs of the users I’m designing for. The primary user group identified through these interviews were people in need of easily accessible therapy. There was a general consensus of not having enough time to go to therapy, not being able to find a suitable therapist, or complaints of commuting.

User Personas

Xana is a medical resident struggling with depression who needs easy access to therapy while having very little free time.

Miles is a queer high school student who wants to receive guidance without his parents finding out.

User Journey Maps

Mapping out the personas' user journeys revealed improvement opportunities for the app.

Competitive Analysis

I also researched several direct and indirect competitors—BetterHelp, Talkspace, Cerebral, Brightside, and ieso—in order to understand the current market for online therapy apps. There were many commonalities between these apps, such as therapy via messaging as well as scheduling live sessions, and also a matching system between users and therapists. These were major features that users seemed to want most from this type of service. Through the competitive analysis, I found many opportunities for improvement in the user experience.

Design
Paper Wireframes

I sketched out my preliminary ideas, getting inspiration from my user research and competitive analysis.

Digital Wireframes

I then expanded my ideas and created digital wireframes. I thought a calendar function would help users keep track of their days, including live sessions, therapy homework, and journaling. This feature would also set the app apart from its competitors.

Low-fidelity prototype

Connecting the wireframes, I created the first low-fidelity prototype.

Click here to view the prototype.
Usability Study

I conducted a usability study to test the low-fidelity prototype and fix any issues before I went ahead with the high-fidelity version.

STUDY TYPE
Unmoderated usability study
PARTICIPANTS
5 participants
Length
~10 minutes

Three areas in need of improvement were found through this usability study.

  • Live session

    There was no direct way to schedule a live session, which should also be accessible from the homepage

  • Unintuitive buttons

    The drop-down button to move between chat and live session, and schedule and journal is confusing.

  • Calendar

    The purpose of the calendar is unintuitive, the user doesn’t automatically think scheduling or journaling would be in that feature.

Lo-fi prototype 2

Using the findings from the usability study, I improved on the issues in the low-fidelity prototype. I will elaborate more on these changes in the next section.

Click here to view the prototype.
Refine
Mockups

I changed the homepage to direct the check-in to the journal feature, added a live session scheduling button, and quick access to the chat and live session pages.

I changed the button for switching between the chat and live session pages to be more intuitive.

Lastly, I changed the calendar feature to be more intuitive, with an add event floating action button and a menu button to change the calendar view.

High-fidelity prototype

After implementing the changes in the design, I ended up with this high-fidelity prototype.

Click here to view the prototype.
Final Design

These are some important features of the high-fidelity prototype of the heartsease app.

Journaling

Chat

Calendar

Scheduling

Responsive Design
Website Design

Since a service such as online therapy typically needed a website to couple with the app itself, I set out to design a responsive website using the mobile-first approach.

The contents of the app can also be accessed on the website via the login page to account for users who cannot or do not want to download a separate app.

Mobile Website

Homepage

Get started

Log in

Tablet Website

Homepage

Get started

Log in

Desktop Website

Homepage

Get started

Log in

Reflection
Takeaways

While working on this project, I learned that the function of features that I find to be easy to understand aren’t necessarily intuitive for others. Users can’t read my mind, so I have to be more aware of possible differences in users' views when I design features.

It was also fulfilling to design something that could truly help people who use it. It makes me look forward to working on projects that will actually be released and used.

Next Steps

The next steps, should I choose to continue this project, would be to conduct further usability testing on the app and website, identify any areas of improvement that can be found, and continue iterating on the design for a better version.