you, reflected
Task: Design a mobile app for the health & wellness space
Roles: UX Research, UX Design, UI Design, User Testing
Tool: Figma, Google Forms
understanding the problem
mental health and app market research
1
Users drop mental health and wellness apps when they feel too task-like.
Source: Torous, J., Wisniewski, H., Liu, G., & Keshavan, M. (2018). "Mental health mobile phone app usage, concerns, and benefits."
problem statement
People who want to care for their emotional well-being often lack a space to reflect on their experiences through the lens of their personal values. Existing wellness apps emphasize improvement and correction, which can make users feel like something is wrong with them—preventing the development of self-awareness and genuine self-compassion.
hypothesis statement
If people know their core values and can use them as a framework for reflecting on their experiences, they can increase self-awareness, build lasting self-compassion, and improve emotional well-being.
understanding the people
user research was incredibly important and required vulnerability from participants—helping them feel safe was key
quantitative research
12-question survey, 42 participants
More than 50% consider their emotions daily
More than 50% have a harsh inner voice
More than 40% tend toward self-criticism
qualitative research
3 remote interviews (1-hour ea., recorded)
Cara, 36
“I find self-reflection helpful but if it gets too negative or heavy, I shut down.”
Juliet, 31
"I’ve done therapy but I still have a voice in my head that says I’m not enough."
Simone, 33
“I’ve tried journaling but when it feels like homework, I don’t stick with it.
user personas
3 personas (2 primary, one outlier)
structuring the experience
thinking about how people would achieve their goals with the app was an iterative and vital process
task- and user flows
3 user flows, 5+ task flows
site map
early iteration
card sort study
6 completed
journey mapping
3 journey maps
designing the solution
3 samples from the initial core feature design, from sketching to high-fidelity
define values
search values
animation: text input / predictive drop down
select values
animation: state change / vertical scroll
read quotes
visit profile
read quotes
animation: vertical swipe
love, like, dislike
animation: state change
navigate app, add reflection
animation: state change, overlay
view reflections
navigate between tabs
animation: state change
filter reflections by value
animation: state change, horizontal scroll
view/edit past reflections
animation: vertical scroll
creating a design system
created for emotional resonance for users and easy dev implementation
evaluating the initial designs
usability testing, rainbow spreadsheet, empathy mapping
objective
Evaluate whether users can easily use the core features and if the experience feels intriguing and emotionally supportive.
key questions
Is defining values easy and insightful?
Is adding reflections seamless and fun?
Is navigating the reflection map intuitive?
Is the experience emotionally supportive?
iterating on the design
taking feedback from usability testing, I made significant changes to the designs
define values
reduced uncertainty with progress bar
improved clarity with microcopy
increased accessibility with new background color
lightened cognitive load with one task per screen
read quotes
added emotional resonance with starry sky design
reduced complexity with simple, optional interactions
view reflections
boosted usability with search option
added value with more content at a glance
supported navigability with clearer icons
“Authenticity is the daily practice of letting go of who we think we’re supposed to be and embracing who we are.”
Brené Brown
Want to check out another case study?
Boring Stuff