Creating an Anxiety Tracking App
Role: Research, UX Design, UI Design
Project Scope: 10 days
Tools: Pen & paper, Figma
Challenge: Build a tracking app focusing on mental health
Background: Our fifth project at Ironhack Berlin required my lovely partner, Sabrina Baschinski, and I to “identify an opportunity for an app to improve people’s day-to-day lives”. The only other requirement — that it tracks something. We decided to focus on a native iOS app in the mental health space.
Empathize & Research
Survey and Interviews: To better understand our users needs, we created a survey and conducted a handful of user interviews. Questions aimed at understanding what facets of a person’s mental health could be supported by an app and the mental health struggles a person faces day to day.
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). We therefore decided to focus our app specifically on anxiety. Furthermore, nearly 99% of users expressed an interest in understanding their own mental health. Thus, we could justify creating a tool to further assist our users in doing so.
We also wanted to find out what tools a person might use to manage or understand their mental and emotional well-being. Majority of users relied on friends & family, therapy, and/or medication. Only 15% of users reported using an app to take care of their mental health. We wondered if a mobile based application might be a cost effective way to help someone suffering when friends, family, or a therapist are not available.
Furthermore, someone suffering from anxiety or depression relies upon multiple resources for help — our 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 our interviews, we learned that most users don’t recognize their mental health is slipping until they are already experiencing negative emotions.
“It’s more when I realize that I am in a good mood or when I am not in a good mood…its more like… I realize it in the moment. I am aware of it, but it’s more realizing what is happening to me rather than sitting down and actively thinking”
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, we moved on to conduct market research and competitive analysis.
Market Research & Competitive 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”. We looked specifically at Moodfit, MoodMission, and Shine.
Through our analysis, we 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 our survey and interview results, we created a user persona. A user persona, while fictional, represents the core needs and frustrations of our user. It ultimately helps clarify our problem space and reminds us we are designing for real people.
Problem & Hypothesis Statements: To help us synthesize the main painpoints our users face, we created a series of problem and hypothesis statements.
From our survey and interview results, we were able to narrow down painpoints to a few main issues:
- Access to mental health support can be difficult to find and navigate
- Awareness of one’s mental state before more severe emotions kick in can be challenging
- Current mental health apps can add stress to an already negative mental state
With these problems in mind, we decided upon the following hypothesis statement to guide us as we moved through the design process:
We believe that an anxiety symptom tracking app can help the person who suffers from anxiety to better understand and cope with their symptoms.
Clarifying our users painpoints and constructing a hypothesis about how to approach them helped us to determine a few necessary features and attributes for our app, such as:
- A non-addictive yet engaging design.
- No notifications.
- An “emergency” button on the first screen for immediate anxiety support.
- Mindful, soothing design that is for humans, not users.
- An app that is there for you when you need it — not begging for constant use.
Storyboarding: I tried to imagine a scenario someone experiencing anxiety may regularly find themselves in. Jen has just finished a busy day at work and rushes home. It’s only once she sits down on her couch that she starts to feel more aware of how she feels. Then, the anxiety hits her. She even wonders if she is having a heart attack as her chest starts to race. After an uncomfortable 45 minutes or so in front of the TV, she gets into bed and tries to calm down while scrolling through Instagram.
She then opens our app, checking her anxiety symptom stats and indicators (such as sleep quality, food intake, social activity) from the last few days. She recognizes that work has been particularly stressful and that she hasn’t gotten enough sleep over the last week. Finally, as she creates a new journal entry for today, something clicks. She realizes she is in the midst of heightened anxiety — not having a heart attack. This awareness alone helps bring her stress down a notch. She finishes up her entry, walks herself through a breathing exercise the app provides, and is able to fall asleep.
The storyboard exercise helped clarify the value we hope to create for our users. We 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 our 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 us 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.
Prototype
Lo-Fidelity Prototype: As we developed our (very) lo-fi prototype, we pieced together the various features and buttons informed by the userflow. This first prototype helped hash out some finer details, such as which symptoms of anxiety to include in our tracker, and how to visually represent the severity of anxiety on a scale.
Mid-Fidelity 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, we also brainstormed some possible names for our app. We went ahead with “QuietMind”, though were not married to the name.
Usability Testing, Round I: We 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”
We 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, we found this feedback quite helpful moving forward. It ultimately reinforced our idea to provide an anxiety relief feature, something we did not include in the usability testing.
Moodboards & Branding: We created three moodboards and tested each one against a list of brand attributes we wanted to convey with QuietMind.
Those who took our branding survey rated the third moodboard as best representing our brand attributes. Thus, this board informed the style guide and final UI designs for QuietMind.
Style Tile: In creating a style tile we 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. We 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: This project was my first time building up a design entirely from scratch — starting with research and culminating in a user experience reflecting our findings. As a former student of physics, I find the UI design steps wonderfully challenging. For QuietMind, we decided to keep the design relatively minimal to encourage feelings of calm.
My partner, Sabrina, found a few illustrations to tie the visuals together and represent the peaceful mental state we wished for our users to attain. We 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.
Our 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. We hope to empower our users to achieve such calm.
We 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 Prototype: We created our hi-fi prototype in Figma. A part of this challenge also included focusing on creating an MVP, or “minimal viable product”. In this sense, our prototype is truly a prototype ready for further testing — not yet the final product. Given this was our very first time working through the entire design process, and took place over a period of ten days, there are obviously a number things we wish to improve upon in the near future (which I will discuss below). Nonetheless, Sabrina and I are very happy to present to you QuietMind:
You can view an interactive prototype here.
Summary
Learnings: The next steps of this process would be another round of usability testing. Although I feel super proud of both Sabrina and I for what we created (especially considering this was only our first time completing every step of the design process), I think we still have a lot to learn from our users. A few things to think about going forward:
- The nav bar design is pretty weak. I would alter how we show which page the user is on.
- Building out the “more” page
- Reconsidering the vagus nerve stimulation section. I am not sure how scientifically accurate it is… though such an exercise may be calming in and of itself despite a lack of scientific proof.
- Further usability testing.
Thanks for reading. I hope to share a couple more case studies in the following weeks! (:
