Remember to Breathe

UX/UI Design Case Study
Project Overview
Modern life comes with its many challenges and the average young person is finding it increasingly difficult to cope with the burden of uncertainty and stress in almost every aspect of their lives. Anxiety and depression are now leading mental health problems around the world, with stress and feelings of loneliness being major contributors. While these mental health issues are treatable, only 36.9% of those suffering receive treatment. With treatment for mental health issues being fiscally inaccessible for many, people suffering are struggling with where to go for help.

In a YoungMinds commissioned survey by Censuswide, two-thirds (67%) of young people said they would prefer to be able to access mental health support without having to visit a general health provider, but over half (53%) said they didn't know how else to access this help. Becoming aware of these statistics and seeing the effects of this issue in my community prompted me to spend time researching the issue which led to the design of Remember to Breathe; an app that allows users to access tools and build practices to help improve their mental health and live a happier, healthier lives.
Problem
When faced with mental health issues, young adults are reluctant to seek the help of a professional or struggle finding the proper resources. While there are many apps dedicated to mental health and self help, research shows that many young adults still feel unsupported, alone, and without the proper self soothing tools to uplift their mood. 
Solution
Remember to Breathe aims to assist young adults with their mental health by encouraging awareness and providing community, a space for reflection, and personalized tools that will help them regulate their emotions and moods. 

The following features of Remember to Breathe help to address the problem of people being able to access the help that they need when facing mental issues 
  • Resources to help when someone is facing a mental health crisis and cannot access a medical professional 
  • Multiple features that allow users to practice self regulation and soothing
  • A community of peers to help tackle feelings of loneliness 
My Role
Process
Timeline
  • Figma
  • Miro
  • Figjam
  • Zoom
  • GoogleMeet
  • User Research
  • User Interviews
  • UI Design
  • Usability Testing
  • Secondary Research
  • Surveys & Interviews
  • Ideation
  • Sketching
  • Wireframing
  • High-Fidelity Screen Design
  • Prototyping
  • Usability Testing & Synthesizing
  • Redesign
  • 4 months
Tools

Research

Ideation

Design

Testing

Reflection

Research

Secondary Research

To better understand the context of the problem, I conducted secondary research and identified the main challenges people face when struggling with their mental health. Through my research; I found that:
‍
  • In a YoungMinds commissioned survey by Censuswide, two-thirds (67%) of young people said they would prefer to be able to access mental health support without going to see their GP but half (53%) said they didn't know how else to access this help.
  • The young minds survey also found that suicide was the leading cause of death for males and females between ages 5 and 34 years old in 2019.
  • The office for national statistics reported that 6% of respondents (approximately 3 million people) said they feel lonely often or always.
Primary Research

To get insight into potential users' struggles with mental health and what they might find helpful, I conducted screener surveys on social media platforms to recruit participants to interview. I then followed up by conducting full interviews with 5 participants.
‍
Interviews

First, I created a screener survey and distributed it on various social media platforms in order to find individuals that met a particular criteria and might find an app like Remember to Breathe useful. From the initial screeners, I was able to find 5 participants and conducted individual interviews via video chat, using zoom or google meet. During the interviews, I spoke with participants and asked questions that helped me further discover more about their feelings and challenges when it comes to mental health, and what kinds of tools they might find most helpful. With the permission of participants, I recorded our sessions as well as took notes that were further analyzed in my next steps.

‍Research Synthesis
‍
‍With the insights gathered from my secondary research, surveys, and user interviews, I organized my findings into affinity and empathy maps. These tools helped me to further organize my research results to better understand and identify common pain points people face when struggling with their mental health and what they might find useful in a mental health app.

Affinity Mapping
‍
With the information and notes gathered from interviews, I created affinity maps that helped me to uncover and group repeating themes, feelings and insights on the subject. The main themes were:
  • Mental health struggles
  • Social media usage
  • Opinions on mental health
  • Physical symptoms from mental health
  • Tactics for maintaining mental health
  • Social media/ app opinions
  • Covid/ lockdown effects
Empathy Mapping
‍
With the data gathered from affinity mapping, I identified two unique types of users for my empathy maps and created the following user personas: 

Molly- A professional woman that deals with mental health and life issues day to day and is trying to find ways to cope with them
Joshua- A student that deals with more serious mental health issues that have more detrimental effects in the long run.
User Personas
‍
Following my empathy maps, I moved on to creating a user personas. The goal of creating a user personas was to allow me to better empathize with my target audience by creating a representative profile of them based on the data and insights I gathered in my user research.
‍‍
Molly- A professional woman that deals with mental health and life issues day to day and is trying to find ways to cope with them
Joshua- A student that deals with more serious mental health issues that have more detrimental effects in the long run.
How Might We?

After gathering all the information I uncovered throughout the process I developed my HMW’s with the goal of prioritizing finding solutions for the main pain points people were experiencing based on my research. The top 5 were:
‍
  1. How might we reduce stress in a user when they are dealing with school or work?
  2. How might we make a user feel less alone when going through difficult times?
  3. How might we help a user during a panic/ anxiety attack?
  4. How might we help a user feel a sense of hopefulness and joy?
  5. How might we help a user feel calm and serene? 

User Stories

User stories helped me build a better understanding of what users found most important in terms of the app’s functionality. The top priorities were: 
‍
  1. As a user I want to be able to find all the numbers of helplines in one place so that if I’m struggling badly I have direct and reliable resources.
  2. As a user I want to hear from other people who are also struggling with their mental health so that I feel less alone and have a sense of community.
  3. As a user I want helpful tips and coping mechanisms for panic attacks and managing my anxiety so that I can feel calm again. 
  4. As a user I want to have a journal where I can track my mood every day so that I can see if the tools I am using are working.

Brainstorming

I brainstormed ideas on how to develop solutions for my “How Might We” statements, and came up with 10 possible solutions for users. I created the following sketches for the ones that aligned most with what users said they would find most helpful.  

Ideation

Site Map
‍
With the site map, I was able to create a visual representation of the structure and flow of the app. I identified and mapped out key features, functions and screens. 
User Flows
‍
Following the site map, I created three essential red routes that I deemed vital to the application because they would be paths that the users wouldbe used most frequently. These routes were:
‍
  • Listen to calming music
  • Tracking mood and journaling
  • Reading uplifting posts and interacting with others in the remember to Breathe community 
Sketches
‍
Once the site mapping and planning was laid out, I created some initial sketches to get an idea of possible interfaces that would be effective and easy to use for users.
Wireframes

Using the data gathered in the ideation phase and sketches as a guide, I created low-fi and med-fi wireframes that incorporated all of the high priority functions in a user-friendly application. The purpose of this was to establish a layout of element placement and information hierarchy throughout the app.

Design

Lofi wireframes
Medfi wireframes
Brand Platform and Moodboard
‍
The theme for my brand platform and moodboard is a peaceful and calming setting resembling nature. I wanted to use colors and imagery that convey a sense of being in a serenity for our users.
Style Guide
‍
My style guide was inspired by nature, since we can agree that most people associate nature and greenery with peace, calmness and clarity. 
High Fidelity UI
‍
When designing my hi-fi screens, it was time to bring everything together. My main focuses were ensuring that users would be able to flow through the app easily, while maintaining an aesthetically calming and soothing UI. I wanted the app to feel like a safe space for our users. 
Click here to view all of my iterations in Figma
Prototype

I used Figma to design my prototypes, making many iterations of my red routes until I was happy with the flow and user friendliness of the app. Click here to interact with my prototype in Figma!

Usability Testing
‍
In order to complete usability testing, a prototype of the three flows was created and provided virtually to the participants. All of our usability testing was completed via Google Meet, and participants shared their screens with me so that I could see their progression during the testing.The objective of conducting usability testing was to identify any potential difficulties that users may face while using the application and to recognize any opportunities for further development. 

During testing, users were asked to attempt to complete three different tasks on the app while I observed their process. I asked some probing questions after each task to get a full understanding of the users’ experience and pain points during each task.  

The tasks, which were based on 3 main user flows I designed, were: 

  • Listen to a guided meditation playlist
  • Rate your mood and write a journal entry
  • View the Anxiety board on the community page

Findings
‍
While my users found the app pleasing and easy to use, they did provide some improvement suggestions that would make their experience better. I was able to view my design from the user’s perspective and implement a few changes that would enhance the overall user experience and functionality of the app. 
‍
Below are the main focus points from my findings:

Testing

Issue 02

Issue 03

Users thought that the terminology and emotions on the mood rater could be less confusing.

Users expected to be able to tap or drag on circles for emotions.

Users would like a graph to show if their mood has been improving or declining since using the app.

Issue 01

Synthesizing and Redesigning
‍
After carefully reviewing my findings, I came up with the following changes to make the application an improved and more intuitive experience for users: 
‍
  • Changed  the wording on the labels of some of the emotions to make them more clear and concise, ex: “sad” instead of “bad”, “anxious” instead of “not the best”.
  • Added two more choices for emotions to provide a fuller, more accurate range for users. 
  •  Added a drag and select feature on the mood rater so that the user could easily select their mood with either method that came most intuitive to them.
  • Created a feature that shows a graph of the users mood over the past week. 
This project has provided me with a wealth of knowledge, insight, and appreciation for user research and interface design. It was a truly fulfilling experience to be able to look at a problem that I am passionate about and create a real life solution that could potentially help others experiencing the same issues. 

I learned so much throughout this process, but I'd say that my main takeaway was the importance of staying focused on the user experience and the problem that I initially set out to solve when I started the project. While designing this app, I went through many iterations and challenges because I was having trouble narrowing down the true purpose of the app. I often found myself deviating from my original problem and solution, and creating screens and features that might overcomplicate the experience for a user. Designing this taught me that sometimes less is more, simplicity is better, and sticking to the original problem and solution is essential for truly impactful UX/UI design. 
‍

Reflection

Powered by Webflow
back to top