Mei Yi Tan
Project Summary
Background
Mobile App for mental health tracking
Tools
Adobe XD, Pencil + Paper, Balsamiq,
Google Forms, Miro, Optimal Sort,
UsabilityHub, Zoom.
Duration
7 months
My Role
UI/UX Designer, Solo student project
Case Study Walkthrough
Watch the video or scroll down to learn more about this study.
Step 1: Empathy
Problem Statement
Young adults would need a way to track their mental health as well as create positive habits because it would promote better mental health hygiene.
Competitive Analysis
Competitors
Competitors include mental health and tracking apps like Calm, Headspace, Bearable, and Moodly. They all either provide some sort of symptom tracking, habit forming tactics, or education on mental health topics.
The Gap
While there are many apps on this topic that could make it hard to stand out, there’s a potential to stand out with the combination of functions our app has that more popular apps don’t provide.
Opportunity
Currently there aren’t programs that combine journaling, mental health resources, and meditation to promote better mental health habits. Having both would provide a high level understanding of their health and how to improve it.
User Interviews
12 Questions | 3 Participants | Ages 30+
All three interviewees pointed to stress as being their main focus for their mental health. Keeping stress down affected the rest of their quality of life.
- End of the day usage to wind down
- Best coping methods are Exercise and Meditations
- Common use of Journals to relax
Step 2: Define
User Persona
This app is aimed towards young adult women who lead an active lifestyle and may not have the time to spend a long time on an app. The app should have a simple and inviting interface to ensure a small learning curve.
User Flows
The goal of user flows was to determine the best path of how a user could best use the app and complete a task. An example is displayed below of how Natasha could view how her mood entries over time trend.
User Journey
In addition to a user flow, user journeys showed the flow from user goals gets translated into actions to complete them.
Step 3: Ideate
Site Map
Prior to wireframing, a site map was created to determine the overall structure of prototype flow. To test if my sitemap made sense, I used Optimal Sort to ask participants to make categories for items.
An average of 4-7 categories were made for my 12 cards.
The largest amount of category overlap falls between these key areas:
- Home
- Meditations
- Blog
- Log
- Account
- Favorites
Wireframes
Low fidelity wireframes were sketched by hand to conceptualize the visual flow for site map and mid fidelity wireframes (Blasamiq) further refined its ideas as exemplified below.
Step 4: Style Guide
The next step in forming the vision came after establishing a style guide with the goal of creating a simple, clean, and bright design that conveyed joy and friendliness.
Step 5: Testing
Remote Testing via Zoom | 6 regular Participants| 3 UX expert reviewers| Using high fidelity grayscale prototype
- 2 High Priority Issues (mainly clarity in word choice and imagery)
- 1 Medium priority Issue
- 2 Low priority Issues (spelling, etc.)
Using a rainbow spreadsheet, responses were recorded and compiled to show averages and display the highest priority areas of concern. In summary, there were:
Affinity Map
Additionally, an affinity map was made to organize the results. Blow are quotes from the user interviews that are organized in 4 ways: positive quotes, negative quotes, errors, and observations.
Changes
Alongside the review from participants, UX peers critiqued the work to ensure my designs were optimized. I would then make changes accordingly for my final design, as exemplified below with changes before and after review..
Prototype
After testing, my high fidelity prototype went through several iterations to its final form.
Reflections
Keep the main problem in mind
While I was trying to solve the wants and needs of users from user feedback, I got lost in the details.
The main problem should be referenced more often so I don’t stray from the core product.
Make design more accessible
Although my app is rather simple in nature, there were some visually difficult elements and other considerations.
Accessibility considerations should form design decisions first instead of having designs conform to accessibility standards later.
Have more user tests
While I had very high quality user interviews for most of my tests, it would’ve been helpful for a survey to take stock of a much larger quantity of opinion so that I could gauge what was accessible to most people or not.