UX Research & Design for a Mental Health Mobile App

What is the current user experience?

4 user interviews and a behavioral survey of 25 respondents surfaced trends I used to build two personas: users actively working on their mental health, aware of how their challenges affect them, and who value close relationships. Depression and isolation were often tied directly to that value.

Low fidelity: sketches & Figma

Using a mobile-first approach, I sketched how the design would work for logged-in and logged-out users, then moved into low-fidelity Figma, centering the research finding that a daily check-in with easy access to goals provides key support for this user base.

Mid & high fidelity designs

Mid-fidelity introduced color into the component library based on stakeholder feedback. From there, designs moved into high-fidelity prototypes, including Community pages for posting within a group, and a tutorial flow built to feel integrated within the app rather than a separate FAQ.

The design below showcases iterations of the Community page, and how it would look to post within a Community page.

This user flow below showcases how a new user might experience the app's tutorial. It was intended to feel integrated within the app, so that the new user could visualize where each tool lived. This design allows the user to feel immersed in the app, without having to read a separate FAQ or how-to section.

Much of this design uses placeholder graphics, but it is meant to showcase the intended user flow for a new user.

Tradeoffs

It was important to balance the needs of the stakeholders/founders with the needs of the users. For example, one stakeholder requested he wanted a "Superhero" theme throughout the app. However, I was worried that those colors would be somewhat jarring to users and wouldn't evoke feelings of calm and support that were important to our user personas. Ultimately, it is important to make stakeholders happy but if designs don't solve for user needs, the final product won't be successful. In this instance, I emphasized the needs of the user and tried to find a middle ground - rather than using bright superhero colors, I used variations of those colors that were more muted. This way, I was able to center the user's needs while still validating the stakeholder's request.

High fidelity: Prototypes

Below are a few Figma prototypes showcasing different user flows: Navigating community updates, personalizing your pet, and using the chat feature.

Results

• Shipped full low-to-high-fidelity prototypes and user flows for the entire app (community, check-ins, chatbot): built from 4 interviews + a 25-person behavioral survey rather than assumption

• Delivered 2 validated user personas that shaped every major flow, including the onboarding tutorial designed to sit inside the app instead of needing a separate help doc

• Established a consistent component/color library used across all fidelity stages: gave the founders and engineer a shared design system going into build

Next steps

• Coordinated handoff with developers to confirm designs and flows fit technical scope

• Planned future usability testing for accessibility and intuitive flows

What I'd do differently

• Bring asmall round of concept testing (even 3-4 users) to the Superhero branding conversation instead of relying on my own judgment call to find the middle ground would have more firmly validated the decision

• Build in a lightweight design-principles doc early, so aesthetic requests from founders have a shared reference point to be evaluated against