.png)
Background
QuietMind was a passion project I created based on the following prompt: "identify an opportunity for an app to improve people's day-to-day lives​". The only other requirement - that is has tracking features.
I decided to focus on the mental health space.
User Research:
As the scope of this project was quite large to begin with, I conducted surveys and interviews to narrow in on a specific problem space.
Research
One helpful take-away from the survey included that anxiety was one of the most common mental health problems afflicting users (and unsurprising despite our small sample size, as anxiety disorders are the most common mental health disorders). I therefore decided to focus specifically on anxiety. Furthermore, nearly 99% of users expressed an interest in understanding their own mental health. Thus, I could justify creating a tool to further assist users in doing so.
​
Furthermore, someone suffering from anxiety or depression relies upon multiple resources for help - an app could be incorporated into one's toolkit and help foster both self reflection and self sufficiency. Tracking one's symptoms with an app might not be a full-stop solution, but it might further empower a person on their mental health journey.
​
After creating an affinity diagram with direct quotes from interviews, I learned that most users don't recognize their mental health is slipping until they are already experiencing negative emotions.
All too often, one is already in the midst of an anxiety attack when they are able to truly notice they are anxious. With these insights in mind, I moved on to conduct market research and competitive analysis.
Market Research & Competitor Analysis:
There are a variety of apps in the mental health space, ranging from mood trackers to cognitive behavioral exercises to so called "self therapy". I looked specifically at Moodfit, MoodMission, and Shine.
Through this analysis, I found space in the market for an anxiety focused app that not only allows the user to track their symptoms, but also exercises for calming oneself in the midst of an anxiety attack. A simplified on-boarding and login flow could improve ease of use relative to competitors.
Define & Ideate
User Persona
After studying the survey and interview results, I created a user persona. A user persona, while fictional, represents the core needs and frustrations of our user. It ultimately helps clarify the problem space and reminds me that I am (of course) designing for real people.
Problem & Hypothesis Statements:
To synthesize the main painpoints users face, I created a series of problem and hypothesis statements. From the survey and interview results, I narrowed down painpoints to a few main issues:
-min.png)
With these problems in mind, I formulated the following hypothesis statement to guide me through the design process:
-min.png)
Clarifying painpoints and constructing a hypothesis about how to approach them helped determine a few necessary features and attributes for our app:
-min.png)
Storyboarding:
I tried to imagine a scenario someone experiencing anxiety may regularly find themselves in.
The storyboard exercise helped clarify the value I hope to create for users. I wanted to support a person in tracking and managing their anxiety symptoms, encourage greater self awareness, and be there for them in the case of an anxiety attack. While the app may not help eliminate the cause of anxiety, it may serve as a helpful tool between therapy sessions.
​
Userflow:
For the final step of the ideation phase, I created a userflow to better understand how a user like Jen would navigate through the app upon use. This flow would ultimately assist in creating the flow through screens in all phases of prototyping. Important in this flow is that the user can opt to click on an emergency button before login, in the case that they are in the midst of anxiety attack and require immediate support. Otherwise, the user may head straight to creating an entry.
-min.png)
Prototyping
Lo-Fi Prototyping:
As I developed a (very) lo-fi prototype, I pieced together the various features and buttons informed by the userflow. This first prototype helped hash out some finer details, such as which physiological markers of anxiety to include in our tracker, and how to visually represent the severity of anxiety on a scale.
-min.png)
Mid-Fi Wireframes:
I personally find mid-fi wireframing to be one of the most challenging and exciting parts of the design process. Ideation becomes more tangible in the digital, and details become even finer. At this phase, I also brainstormed some possible names for our app. I went ahead with "QuietMind", though was not married to the name.
Usability Testing, Round I:
I used the mid-fi for a first round of remote usability testing in Maze. Nineteen testers completed the following tasks with a 100% success rate:
-
Login to QuietMind and create a anxiety journal entry
-
Check the calendar for a previous entry
-
Share your "Mood Pie Chart"
I also received some feedback from users to consider for our hi-fi prototype:
-
Fine tune alignment of some elements and check for typos
-
Offer an anxiety solution
While not necessarily related to usability, I found this feedback quite helpful moving forward. It ultimately reinforced the idea to provide an anxiety relief feature, something I did not include in the usability testing. ​
Branding:
I created three moodboards and tested each one against a list of brand attributes QuietMind should convey.
.png)
Those who took the branding survey rated the top moodboard as best representing the brand attributes. Thus, this board informed the style guide and final UI designs for QuietMind.
Style Guide / Design System:
In creating a style guide, I made stylistic choices about typefaces, color scheme, various UI elements such as buttons and navigation, spacings, and alignments. This tile fostered visual consistency throughout the app. It was essential to create a visual design embodying our brand attributes, with the goal of providing a calming, safe environment for a sufferer of anxiety. I therefore used a soft, serene color scheme and a more feminine font. Furthermore, as the aim of this challenge was to create a tracking app, a few iterations of data visualizations helped ensure our users could easily look back on weeks, or months, of previous journal entries and notice any trends (for example, if there was a correlation between quality of sleep and severity of anxiety).
Hi-Fidelity Wireframes:
For QuietMind, I decided to keep the design relatively minimal to encourage feelings of calm. I found a few illustrations to tie the visuals together and represent the peaceful mental state we wished for our users to attain. I also added a "share" feature to the stats page so that a person could share their data with someone like a therapist. Perhaps bringing such material to a therapy session could help someone suffering from anxiety to better understand their symptoms, behaviors, and inner world.
The QuietMind logo (the squiggly ball turning into a line) illustrates the progression from a busy, overwhelmed, and anxious headspace to one of calm and serenity. The hope is to empower our users to achieve such calm.
I also further developed the anxiety relief feature. It consists of a guided breathing exercise, a brief meditation practice, as well as a vagus nerve stimulation. Taking under seven minutes in total to complete, it ends with a few gentle "self-care" reminders.
Hi-Fidelity Prototypes:
I created the hi-fi prototype in Figma. A part of this challenge also included focusing on creating an MVP, or "minimal viable product". In this sense, this prototype is truly a prototype ready for further testing - not yet the final product:
Summary
Learnings:
The next steps of this process would be another round of usability testing. As mental health is a challenging problem space to design an app for, I am sure there is much to learn from users.
Thank you very much for reading this in-depth case study! I hope it has helped you understand how I think, and how I approach my design projects.
