PROJECT

A Gamified Mental Health and Wellness App

A Gamified Mental Health and Wellness App

Health Tech

0 to 1 Design

Web + Mobile

overview

Patients in remote mental health care often feel confused by unclear follow-ups, which undermines their trust in providers. To address this, we aimed to create a streamlined communication system that improves follow-up procedures and guides patients more effectively through their mental health journey. User interviews revealed significant gaps in clarity and communication, leading to anxiety and a sense of feeling unsupported.

DATE

February 10, 2025-

April 1, 2025

MY ROLE

UX/UI Design Lead

TOOLS AND TECH

  • Figma

  • Adobe Illustrator

  • Procreate

  • Airtable

  • Asana

CORE TEAM

1 UX/UI Designer

1 Developer

1 UX Researcher

1 Motion Graphics Designer

Step 1: research and inspiration

Understanding what’s missing from today’s healthcare experience.

We spoke with users to uncover pain points in their telehealth journeys and identify opportunities for a more supportive, connected experience.

We spoke with users to uncover pain points in their telehealth journeys and identify opportunities for a more supportive, connected experience.

We noticed a few key themes and findings.

Difficult to use the tech + often not user friendly

Like using telehealth for ease, but feel there can be lack of rapport with provider

Feel disconnected from provider and community between appointments

Difficult to keep track of medications and symptoms

We clearly defined our user problem.

We clearly defined our user problem.

User Problem

Patients participating in remote mental health consultations often feel disconnected from their providers due to unclear follow-up procedures. This can result in confusion about next steps, missed sessions, difficulties with treatment adherence, and delayed recognition of mental health issues. Providers may lack effective tools to maintain consistent communication, leaving patients without the necessary support and guidance in their recovery journey.

Patients participating in remote mental health consultations often feel disconnected from their providers due to unclear follow-up procedures. This can result in confusion about next steps, missed sessions, difficulties with treatment adherence, and delayed recognition of mental health issues. Providers may lack effective tools to maintain consistent communication, leaving patients without the necessary support and guidance in their recovery journey.

We conducted a competitive analysis to understand existing solutions in the market.

We conducted a competitive analysis to understand existing solutions in the market.

We took a look at what options currently exist in the market, to identify key areas of improvement.

Step 2: Ideating and prioritizing

Diverging to explore, converging to focus.

Diverging to explore, converging to focus.

We started with a feature brainstorm..

By analyzing competitors and conducting user interviews, we uncovered key pain points, desired outcomes, and strategic opportunities—insights that informed our feature brainstorm. We identified a few key features that we knew would ladder back to our user problem and satisfy user needs.

By analyzing competitors and conducting user interviews, we uncovered key pain points, desired outcomes, and strategic opportunities—insights that informed our feature brainstorm. We identified a few key features that we knew would ladder back to our user problem and satisfy user needs.

In-app messaging for seamless patient-provider communication between visits

In-app messaging for seamless patient-provider communication between visits

In-app messaging for seamless patient-provider communication between visits

Integrated appointment scheduling with smart reminders

Integrated appointment scheduling with smart reminders

Integrated appointment scheduling with smart reminders

Symptom tracking with visual trends to support proactive care

Symptom tracking with visual trends to support proactive care

Symptom tracking with visual trends to support proactive care

Optimized telehealth experience with accessible, intuitive UI

Optimized telehealth experience with accessible, intuitive UI

Optimized telehealth experience with accessible, intuitive UI

Given our timeline constraints, we prioritized a core set of features for initial development, with plans to expand functionality in future roadmap phases.

Given our timeline constraints, we prioritized a core set of features for initial development, with plans to expand functionality in future roadmap phases.

We of course came up with many features that would not be feasible during this launch, so we created a matrix to help us prioritize our main goals.

We of course came up with many features that would not be feasible during this launch, so we created a matrix to help us prioritize our main goals.

Step 3: design!

Having defined our focus, we entered the design phase: turning insights into tangible solutions.

Having defined our focus, we entered the design phase: turning insights into tangible solutions.

Based on our research and user testing, we identified a clear opportunity to guide users toward engaging with a mental health game. We designed a task flow to map out the key steps users would take within the app to reach this experience.

We designed low-fidelity wireframes to map out key screens based on our user task flows.

We designed low-fidelity wireframes to map out key screens based on our user task flows.

After gathering feedback, we refined these into mid-fidelity wireframes, which we used for A/B testing to validate usability and functionality before moving into high-fidelity designs.

After gathering feedback, we refined these into mid-fidelity wireframes, which we used for A/B testing to validate usability and functionality before moving into high-fidelity designs.

step 4: a/b testing

We ran two A/B tests to evaluate which design variations best resonated with users and supported key engagement metrics.

We ran two A/B tests to evaluate which design variations best resonated with users and supported key engagement metrics.

On test 1:

On test 1:

  • We tested two chatbot functionalities. The first functionality had clickable answers that users could choose from while conversing with the chatbot. The second functionality allowed users to type in their own answers.

  • Our research told us that users preferred to type in their own answers. They said it felt more personalized and specific than choosing from pre-defined answers.

On test 2:

On test 2:

  • We tested a feedback feature where users could rate how much better they were feeling after engaging in the app, specifically after playing one of the games. They were able to choose between clickable answers, or a slider scale.

  • Our research told us that users preferred to give more detailed feedback about their mood by using the clickable buttons. They said it felt like they could more accurately describe their mood.

After the A/B test, we followed up with a user survey to gather qualitative feedback and validate our findings.

After the A/B test, we followed up with a user survey to gather qualitative feedback and validate our findings.

  • 66.7% of participants preferred manually typing their responses, indicating a strong preference for open-ended input.


  • 16.7% favored selecting prompts, suggesting a segment that values convenience and simplicity.

  • Over 80% of participants felt the gamified activity motivated them to complete daily check-ins, keeping their provider updated.


  • 16.7% were uncertain, suggesting potential for further improvement.

  • Overall, respondents did say that they were very satisfied with a gamified process for managing mental health and communicating with a healthcare professional.

Our users had this to say:

Our users had this to say:

“A chat for my therapist and I to talk would be really nice.”

“Maybe an option to connect to the provider directly if needed..”

“The games are very engaging so maybe a prize for completion would be nice.”

“More games, maybe rewards or something as an incentive.”

Step 5: visual + UI design

We defined our typography.

We defined our typography.

We put together a beginning color palette.

We put together a beginning color palette.

We defined our grid and spacing guidelines.

We built a library of icons and illustrations to be used throughout the app.

We used those atoms and molecules to build components.

step 6: high fidelity mockups

Which brings us to our final, high-fidelity mockup.

Which brings us to our final, high-fidelity mockup.

To illustrate the complete user experience, we created a high-fidelity, interactive prototype. It not only showcased the final design but also streamlined our handoff process with the development team.

Key Takeaways

Key Takeaways

We will improve some existing features and add more features that users indicated they would find useful.

  • There was a strong positive correlation observed between user engagement and gamification

  • We observed a need for a more pronounced communication feature. Addition of chat with provider feature is on the roadmap

  • Additional games added to experience will enhance user engagement

  • Telehealth virtual appointment functionality is on the roadmap to improve patient / provider communication

  • There was a strong positive correlation observed between user engagement and gamification

  • We observed a need for a more pronounced communication feature. Addition of chat with provider feature is on the roadmap

  • Additional games added to experience will enhance user engagement

  • Telehealth virtual appointment functionality is on the roadmap to improve patient / provider communication

WORK

ABOUT

CONTACT

WORK

ABOUT

CONTACT

WORK

ABOUT

CONTACT

Work

About

Contact

© 2024 Sara Duval