Well logo
Hero image of different app screens

The Problem

App on iPhone display

The Solution

A Mental Health App that :

  • Uses evidence-based exercises
  • Incorporates mindfulness 
  • Creates human connection
  • Provides personalized content
View Prototype

My Process

For my design process, I took the following steps:

1. Research & Define

  • Competitive Analysis
  • User Interviews
  • User Surveys

2. Strategy

  • Personas
  • Content

3. Information Architecture

  • User Flows
  • Site Map
  • Sketching
  • Wireframes

4. Branding

  • Logo
  • Color Palette

5. Visual Design

  • Hi Fi Mockups/Prototype
  • User Testing

Competitive Analysis

Next I did a competitive analysis with 3 popular mental health apps. Here were some key takeaways:

Issues to Avoid

  • Poorly sorted features
  • Limited to guided meditations
  • Content not tailored to user goals
  • Groups that are too narrow or broad

Features to Highlight

  • Using evidence based therapy exercises
  • Go-to mediations and longer programs
  • Helpful, relevant, support groups
  • Content personalization
Headspace list of mindfulness exercises
Headspace
App with list of different wellness activities
Sanvello
app with different excercises
Happify
See SWOT Analysis

User Surveys

I started my user research with an online survey (via Reddit and Slack) to find out about users' needs and pain points in using mental health apps (MHAs). My survey results revealed:

"Have you or would you use a mental health app?"

Pie Chart - Most have or would use mental health apps

"What don't you like about mental health apps?"

Chart of pain points

User Interviews

I also conducted interviews with 5 users via Zoom. My interviews corroborated some of my survey data as well as other helpful insights:

Personas

Then I created Personas to gain more insights into needs and pain points.

See Full Personas

Heather

Woman smiling

A project manager from L.A.

Motivations

  • Worried about layoffs at her job
  • Recently went through a breakup
  • Doesn't have insurance for a therapist

Goals

  • Learn ways of improving her mood
  • Have a quick fix for de-stressing
  • Get support with her breakup

Frustrations

  • Doubts about her mindfulness apps would help with a breakup
  • Wants to learn different coping skills
  • Mental health apps don't address her goals and issues

Gerry

Man smiling

Portland Art School Admin

Motivations

  • Has anxiety and recently lost a parent
  • Isn't able to afford a therapist
  • Has heard that mental health apps can be helpful but hasn't tried one

Goals

  • Have a way to calm down when he's feeling anxious
  • Get support with grieving
  • Learn more about himself and skills for managing anxiety

Frustrations

  • Has tried a support group but feels awkward sharing in person
  • Doesn't know how meditation would help with grief
  • Mental health apps seem impersonal

User Flows

See All User Flows

Site Map

Next, I did a card sort with different features to create information architecture as well as narrow my scope. I wanted users to get recommendations on the home screen.

See Full Site Map
Site map

Sketches

Hand drawn wireframeHand drawn wireframe
Hand drawn wireframeHand drawn wireframe
Hand drawn wireframeHand drawn wireframe
Hand drawn wireframeHand drawn wireframe

Digital Wireframes

Click on a wireframe to see full-sized image.
Digital wireframeDigital wireframe
Digital wireframeDigital wireframe
Digital wireframeDigital wireframe
Digital wireframeDigital wireframe
See Lo-Fi Prototype

First Round Usability Testing

Testing was conducted remotely using Zoom with a test script. Feedback indicated the need to: improve visual hierarchy, improve findability of non-recommended activities, improve navigability in the Toolbox, improve the Group joining experience.

Tasks

Before

Digital wireframe before

After

Digital wireframe changes circled

Improved the visual hierarchy & icons
‍
Added descriptions for different activity types

Before

Digital wireframe changes circled

After

Digital wireframe changes circled

Created tabs for activity types
‍
Combined activity lists to improve navigation

Before

Digital wireframe

After

Digital wireframe changes circled

Changed the nomenclature ("Goals") to match onboarding

Changed the layout to be consistent

Before

Digital wireframe

After

Digital wireframe changes circled

Added a search option and removed Join from overview

Improved the visual hierarchy

Branding

Logo

For my logo, I wanted to create something that felt powerful but also felt peaceful. I chose the name "Well" because it has two meanings. Well means healthy, and it also means a source (as in a well of activities and support).

Multiciolor Well Logo

Color Palette

I used a bluish green as my main color to symbolize growth and calm. I chose blue for activities promoting relaxation, and an orange yellow for activities promoting energy or improved mood.

Color palette of 5 colors squares
Color palette of 5 colors squares

Hi Fi Mockups

I started making HiFi mockups to build a prototype and start usability testing

Click on a wireframe to see full-sized image.
Hi Fidelity mockupHi Fidelity mockup
Hi Fidelity mockupHi Fidelity mockup
Hi Fidelity mockupHi Fidelity mockup
Hi Fidelity mockupHi Fidelity mockup

2nd Round Usability Testing

I reiterated and conducted another round of testing remotely with 4 users. Feedback indicated the need to: Improve findability of all activities by combining home and toolbox screen into tabs; making clearer call to action on main toolbox screen, and improving clarity by letting users know where exercise entries are saved.

Tasks

Before

Hi Fi mockup before

After

Hi Fi Mockup with changes circled

Home and Toolbox combined into tabs to improve findability

Before

Hi Fi mockup before

After

Hi Fi Mockup with changes circled

Screens combined a chevron added to improve CTA clickability

Before

Hi Fi mockup before

After

Hi Fi Mockup with changes circled

"Profile" bolded and added to button

Mockup screen with iPhone
Well

A mental health app that uses evidence based exercises, guided meditations, and a virtual support group to help you reach your goals.

View Prototype
Conclusion
I was able to build a solid MVP for a mental health app that is personalized and just comprehensive enough to be effective without being bogged down in features.

Future iterations can focus on improving recommendations and personalization. I’d also like to create more interesting visuals like illustrations on the clickable exercises and relaxing animations during the guided meditations. I would also like to build a more robust Groups section. Finally, recording and testing user responses to audio content would be an important next step.
Contact Me

Let's get in touch