Mobile App Design & Prototype
A mobile app designed to make it easier for a user to venture into and learn about mental health and therapy.
Responsibilities: UX/UI Designer, UX Research
Timeframe: 22 weeks
Tools: Figma, FigJam
Mental health is a growing topic that is being discussed more and more. It affects everyone. Both youth and adults strongly witnessed the negative impact of mental health during COVID-19 (Forbes, 2024). It also appears that "adults 18-34 have the highest rate of mental illness currently" (American Psychological Association, 2023).
Despite people gaining more awareness towards mental health, any guidance for care remain new and unknown for many. Many people do not have access to care they need or are unsure with where to begin with caring for their mental health.
As a person who is involved with her own mental health, I have experienced the positive impacts of therapy and having the mental health knowledge. I wanted to find ways that would pave an easier path for someone to begin understanding themselves more. Ultimately, I hoped for others to be able to have better care for themselves too.
"More than 1 in 5 adults experience or live with mental illness"
— CDC and National Alliance on Mental Illness (NAMI) in 2023
"Economic burden of mental ill-health can rise up to 4% of GDP. Individuals with mental-ill health have poorer education, employment, and physical health outcomes than those in good mental health. Yet, historically two thirds of people seeking mental health support reported difficulties getting it."
— Organisation for Economic Co-operation and Development (OECD), key data for 2022
Mental illness affects a person's quality of life. More people seek support but have expressed difficulty in obtaining help for their mental health.
Here are a few grievances that people have expressed:
Users should have a more cohesive, positive experience with mental health.
Brainwave is designed with the intent to provide guidance for a user who wants to take better care of their mental health.
Here are ways I want to help:
To better understand the market, I did research to determine my target audience and to make note of any current, important events relevant to mental health.
I also made a chart for a Competitive Analysis. My goal was to examine what concepts were successful or acted as barriers for the existing mental health apps. This analysis would help me figure out what to incorporate in my design.
I examined 4 companies with mobile apps focused on mental health care: Calm, BetterHelp, Headspace, and Finch
Users will have a favorable, mobile app experience for mental health if it is designed to be straightforward and when information is prioritized. It is best to avoid enforcing a subscription since users will not want pay to learn more.
After our search, I gathered more insight of the matter through user interviews.
I interviewed 6 individuals who were around 21-33 years old, which fit my target audience of young adults.
Almost all of the interviews were conducted online via voice chat, with the exception of one in-person interview.
The interviewees were all cooperative and were willing to share:
Once I received everyone's input, I worked up an affinity map. This helped me sort out all feedback I received and discover if there is a commonality.
To determine the direction of Brainwave's design, I generated 3 point-of-view statements to set my goals going forward. My top priority was to make it easier for people to be guided and redirected properly to the mental health care they seek.
I created "How Might We" questions to help me stay on track of my goals. I wanted to focus on:
From the interviews, I created personas who were inspired by my participants. These personas help us keep in mind of what actions and expectations a user may have when interacting with Brainwave.
About Kiki
Age 21
Graphic Designer
Kiki represents a user who wants to see a therapist regularly. She seeks a user-friendly app that will remind her often to take breaks and focus on self-care.
➜ Brainwave should be designed to include the opportunity for a user to set reminders to help reach their mental health goals. Since Kiki desires to see a therapist regularly, Brainwave needs to make it easy for a user to achieve in getting in touch with a therapist. A contact list of therapists should be implemented into the design.
About Zack
Age 27
Programmer
Zack represents a user who doesn't know much about mental health. He seeks an app where he learns more about mental health and finds a solution for handling his mental state.
➜ A user like Zack should be able to navigate with ease looking for information about mental health. Becoming a resource center for mental health should be incorporated in Brainwave's design. There should be guides available to help users reach their goals for learning and their resolution for care.
About Lydia
Age 23
Journalist
Lydia represents a user who wants a mental health app that has a human approach instead of pushing a business agenda. She wants to be able to directly search and filter what they are looking for.
➜ Word choice will matter when presenting information on Brainwave. Careful word choice will help diminish any impression of a sales pitch and put more emphasis on being there to help. Adding a search and filter function would also help a user find what they need quickly. Especially with a topic as broad and daunting as mental health, it will help narrow down their focus and address their needs appropriately.
After sorting all of my insights, I started brainstorming my design approach. I jotted several ideas that I believe would create an impact. I thought features that would greatly help out users would be a Wellness Check-In and Instruction Manual.
The Wellness Check-In would provide the user a chance to set a reminder for making their self-care a priority. The feature would emphasize the desire to support the user.
The Instruction Manual would make it easy for a user to take steps towards getting to their desired page and action. While making mental health care information more accessible, it will also educate them in the process.
To help me envision a user's experience more, I created two storyboards.
I drew a user's possible experience if they were to receive reminders from the Wellness Check-In function.
This storyboard displays how people get caught up with their busy schedules and often become overwhelmed with all the tasks they have to complete. A reminder about checking in with their health may give people a stronger push to take better care of themselves despite having so much to do. It is important to maintain a healthy life balance for the result of a happy outcome!
I also drew the experience for how an Instruction Manual for therapy would affect a user's life.
This storyboard highlights how people have different priorities with their lives. This means that the extent of a person's knowledge about mental health will vary per person. By having a set of steps or instructions to follow, a user is now informed and will be able to make decisions regarding their mental health. If they ever forget any steps, they can easily reference the instructions that break down the main ideas for them.
I still needed more information to how to best design Brainwave. I interviewed 6 more individuals to gather insight on what would be crucial for mobile users. I provided 40 words and asked the interviewees to sort the words into the 5 categories that were available.
The 5 categories available were:
This exercise would allow me to see what would be ideal nest within the same page and/or tab for an easy find.
It would also collect ideas for what content to consider adding within the pages.
After obtaining more ideas on what to include in Brainwave, the next step was to brainstorm what to establish in the structure.
The site map helped me with designing the potential layout of Brainwave. It shows the layers of a page and what I decided to nest within it.
You can also see the way I designed the information hierarchy.
Brainwave would include:
Now that I had Brainwave's structure in mind, making user flows would remind me of what I hoped for users to accomplish with their navigation.
The pathways I examined:
This user flow with looking for a therapist indicates that this set of action would be primarily for new users.
I wanted a user, who may have several questions with seeking a therapist, feel more confident to begin their search.
If the user is already knowledgeable with the therapy search process, they can just jump straight into the search.
This log in user flow is to examine the course of action for a user who has already made an account is undergoing therapy.
When the user has ongoing therapy sessions, I wanted Brainwave to be designed to help them keep track of their Wellness Reminders and Mental Health Goals.
If the user did not make an account with Brainwave yet, I created a pathway that demonstrates what steps they might take for setting up the account.
More research of existing mobile app designs was done. My creative process needed some help, so I made a mood board too!
My drafts for the low-fidelity wireframes of Brainwave were all done in my sketchbook. Sketching them out on paper helps me focus better on layout structure and prevent me from wanting to fill out the contents immediately.
Would you be surprised to learn that I had 3 different high-fidelity wireframes of my homepage?
There was so much I wanted to cover with Brainwave's first version.
Below, you can see that I executed my main focuses of a Wellness Check-In and Instruction Manual.
Starting with the homepage of Brainwave, I wanted to display ways for a user to get started with their mental health care.
Provided are:
The goal was to show as much support I can to a user upon first glance.
The checklist is just one of the instruction manuals I provide in Brainwave.
The items in the checklist also help redirect users to the pages they should be looking for!
In the Learn tab, users can find more information on:
With the Learn More section, I hope for users to feel more at ease with having all the information at their fingertips! Especially for new users, they are given a starting point for growing their knowledge on mental health. It would be less daunting than aimlessly searching on Google.
In the Find Care section, a user can begin their search for a therapist.
If they have a specific topic they wish to discuss, they can filter their search by choosing what they would like to address. This way, they can get acquainted with someone who specializes in that topic. Or, they can also search for a therapist's name if they had someone in mind.
Besides a point of contact, this list of therapist also includes a rating system. Users can decide if they want to take a chance with a therapist, based on the reviews the therapist was given.
In the Goals section, a user will find tools like:
We use our phones for socializing, purchasing, and searching up things, so why not use our phones to help ourselves with our lifestyles?
Sometimes we need a little push! This Goals section would do just that for a user.
You've reached the prototype! Press play to see how my research and design choices created the final design of Brainwave's 1st version.
7 participants participated in my usability testing for Brainwave. All of the testing was conducted online via voice chat and screenshare.
They were asked to interact with Brainwave's prototype without any guidance to see their natural response, initial approach, and honest impressions of the design.
During the test, I sought out to see if the participants were able to complete the following tasks:
Complete the new user steps in the checklist / taskbar
Setting a mental health reminder
Interacting with the header section of Brainwave
After seeing and hearing the live reaction from the participant, I would ask each of them about:
The participants were able to complete the 3 tasks that I was on the lookout for with ease. Most of the participants gave a rating between 4-5 since they hardly ran into errors. Stating that Brainwave's design is straightforward and self-explanatory.
The visuals were also good in style and contrast, that it made it easy for them to read and navigate. They highlighted how the app was very informative.
Their comments made mention of how Brainwave was helpful and encouraging. They believed other users would be able to achieve their goals of therapy searching and mental help without guidance, just like they did.
There were 2 participants who gave Brainwave a rating of 3-4.
They requested for improvements with the checklist since it was an initially just a checkbox. I also went through and changed the wording to be more inviting.
These were both simple fixes! I felt their comments greatly helped me achieve my desire for more ease and accessibility for users.
With this project, I knew I did the best I could. I did not realize I bit more than I could chew, but that just meant I was passionate about wanting to help!
My initial plans for Brainwave's design were to add on several features:
However, I learned a lot about my project constraints quickly.
The constraints I discovered:
With lacking time, I was unable to execute all the desired functions for my first version.
I wanted to add a Community aspect for users to add their friends to chat with them about their therapy progress or post on community forums.
An Appointment Tracker would have helped users stay on top of their therapy sessions and add notes if needed.
The Emotion Check would allow the user to rate their emotions on a scale of 1-5. I also wanted to give them options to click on bubbles that display current emotions. Depending on what they clicked, it would be neat to help redirect the users to an article that may help them.
If I did try to execute all these functions, I think it would have resulted in a weak instructional guide and information center.
Due to lack of time, the visuals lacked as well. I would have loved to create my own images rather than use stock images. I did my best to choose stock images that helped make the app more inviting and "less business."
I also wished I was able to find participants who varied more in age range. Most were between 21-29 years old instead getting a more insight of my target audience of 18-34 years. The interviews or usability testing were also conducted online through voice chat. I think I should have pushed for video chats if I were unable to meet most of them for an in-person interview.
Brainwave proved to be a fun, challenging project for me! Mental health care is a topic that resonates with me closely. I am aware how daunting it can be. It was surreal to hear more about people experiencing difficulty despite how much they desired help. I believe mental health care should be more accessible for all, so I really enjoyed making a design like this.
