Gamifying the journey of mental health

PROJECT SUMMARY

Through the Develop for Good program, we designed a self-diagnosis questionnaire and a personalized treatment plan app to be implemented on our client’s website.

CLIENT CONTEXT

Miricyl is a mental health charity based in the U.K. with the mission of increasing mental illness awareness and research in children and adolescents. We worked closely with Alex Conway (CEO) throughout all stages of the project.

TEAM

Product Manager: Amy La

Mentor: Nick Conn

Designers: Sunny Zhong, Arin Ososanya, Callie Rigsbee, Christina Wu, Tiffany Lau, Ginny Wang

PROJECT DURATION

Late October 2023 - early February 2024

PROBLEM

Young people in the U.K. have poor access to mental health diagnosis and treatment.

Although Alex (CEO of Miricyl) initially came to us with a clear request to design a diagnosis quiz and treatment plan on his website, we still wanted to do some discovery work before coming up with any design solutions. Our user research phase involved conducting a 16-question survey on 21 people in the U.K. between the ages of 18 and 29.

We supplemented our user research with secondary research, understanding the mental health access issue from the lens of published studies and healthcare professionals. Here are the key insights we gathered:

  • Free mental health counseling in the U.K. is limited and only covers 25% of the population. This results in people waiting 4 months or more before receiving care. The alternative solution is private therapy but costs are high. Our survey participants also reported cost and access to be the biggest concerns when seeking help.

  • Even when presented with treatment recommendations, people struggle to complete them due to a lack of motivation. They may have a productive start but progress plateaus at some point.

  • Family and loved ones are seldom involved or informed on how they can help their loved ones with mental health problems.

PRODUCT REQUIREMENTS

Improving mental health access while meeting Miricyl’s business goals

Our product manager, Amy, worked closely with Alex to carve out the business goals of this design project. As a team, we came up with a list of product features to be implemented on Miricyl’s website. They would not only address the pain points synthesized from our user research but also set the client up for success in satisfying their business goals.

There were many synergies found. Making the treatment plan engaging could increase the user retention rate. Implementing a buddy system can improve community support while expanding Miricyl’s member base. So on and so forth. While not particularly design-focused, the business goals and KPIs proved to be important factors when we made design decisions down the road.

Business goals

  1. Increase traffic to the Miricyl website

  2. Gather data for mental health research

  3. Differentiate Miricyl from other mental health nonprofits

  4. Increase user retention and conversion rates

→

Main Product Features

  1. Self-diagnosis Questionnaire: without having to see a GP, people can determine whether they have anxiety or depression and the level of severity.

  2. Treatment Plan: users follow a personalized plan to help them recover from anxiety or depression long term.

  3. Toolkit: users have interventions at hand to address short-term crises (eg. panic attacks)

IDEATION

Learning how to care for yourself is unlike learning other skills (eg. languages)

Aware of the product features, we were ready to begin brainstorming concepts. Given the limited time of the project (3 months), we decided that it would be productive to ideate and design the lo-fi wireframes at the same time. All the designers came up with their ideas and wireframes before coming together to share feedback, discuss the pros & cons of each design solution, and vote on the ones to move forward with.

We focused on the mobile version of the website features before designing the desktop version.

[Lo-fi] Self-Diagnosis Questionnaire

Ideating for the questionnaire was straightforward. We learned that GAD-7 and PHQ-9 were the standard anxiety and depression quizzes offered online. Most websites ask users to complete either quiz before presenting them with results that contain score ranges. We unanimously decided on this approach.

[Lo-fi] Treatment Plan & Toolkit

lo-fi wireframe

lo-fi wireframe

Ideating for the treatment plan and toolkit was the real challenge due to the full range of creative flexibility we had. We had some great ideas but ultimately had to either narrow down the scope or reject it upon thinking deeply about the intent and the potential effects it has on users.

Namely, the idea I had was a baby bird gamification approach: the user is given a specific point target and they fulfill it by completing treatment activities that award them with points (or “berries”). The user is treated as a baby bird that grows over time. Once the user hits the point target, the game ends and the bird “leaves the nest” - equipped with sufficient knowledge and skills to take care of itself.

Why did we deprecate this idea?

  • The point target assumes a designated end to mental health recovery which to many people, is an ongoing and unpredictable journey.

  • Once users hit their point target, the game is over and they won’t have an incentive to return to Miricyl’s site. User retention rate will decrease.

  • The streaks may be discouraging as they penalize people who have “bad” mental health days and fail to complete activities on those days.

My inspiration for the baby bird approach came from my experience with Duolingo, an app that makes language learning engaging with badges, streaks, and leaderboards. I thought the same incentive could be replicated for Miricyl. However, from attending design critiques and reviewing our user findings, I came to the conclusion that:

Gamification can be a powerful tool in mental health recovery. It harnesses the psychology of motivation and reward to inspire positive behavioral change. However, self-care differs from learning other skills. Special considerations are needed to prevent feelings of discouragement and conditions from worsening.

So…what did we land on?

After many design critiques and voting sessions, we decided to move forward with an approach that kept the game-like elements of the baby bird idea while applying guardrails to protect less active users.

Introducing Mind Miles: Instead of having a point target to go after, users can accumulate as many points as they can and for as long as they desire. Points are referred to as “miles” (think step tracker).

Any amount of effort is welcomed. Users can take a rest day and still earn miles simply for loggin in.

one of our voting sessions

DESIGN SYSTEM

I built the design system for Mind Miles

Given the number of designers involved in this project, we needed to have a design system to ensure consistency across screens. I volunteered to take on this task. Although Mind Miles is a new concept being introduced to Miricyl, it will be embedded within the Miricyl website so I wanted to follow the nonprofit’s branding guidelines as much as I could.

Using Miricyl’s brand colors, I expanded them into various shades (primitive colors) and chose the ones that best spoke to Mind Miles (semantic colors). Similarly for the typeface, I designated the sizing and weight for the fonts that would be suitable for the app. Not pictured here are the various components (eg. buttons, badges) I created.

Colors

leveraged Figma’s new feature,
Variables, when incorporating colors

Typography

FINAL MOCKUPS

Design decisions were made based on several key factors.

We transitioned from lo-fi wireframes to hi-fi wireframes using the newly built design system. With each iteration, we shared feedback with the internal team before presenting them to the client each Sunday. Documenting all the flows and design decisions in this case study would make it unnecessarily lengthy. Instead, I’ve decided to focus on the mockups that were designed by me and design decisions that I thought were particularly eye-opening. Decisions were made primarily based on usability, technical feasibility, and business impact.

Onboarding

Upon receiving the results of their self-diagnosis questionnaire, users can opt to receive a treatment plan. The original approach was to direct users to an extensive catalog of treatment activities to choose from. However, this could easily lead to information overload and fail to present Miricyl as the “expert” in mental health treatments. I then thought of the idea of asking users to create an initial treatment plan that can be customized at any time. Miricyl will provide the top activity recommendations based on the results of the questionnaire.

Activities Library

Having a catalog of treatment activities is still important as it allows users to explore various activity types and curate their treatment plan based on the progress they’re making on their mental health journey.

Treatment Journey

Participants in our user survey mentioned they’d feel motivated when they remember how much progress they’ve made. Therefore, we knew it was important to design a treatment journey for users to look back on historical events and journal entries they’ve documented.

CHALLENGES & TAKEAWAYS

What did I learn as a designer from this project?

1) Designing for an external client is vastly different from designing in-house.

Designers often have a preference for whether they want to work in an agency or in-house. I think the two simply require separate skill sets. Working with an external client on this project taught me how important it is to explain UX principles to stakeholders unfamiliar with the field. I learned to see the problem from the POV of a business owner. I also learned how to push back, especially when client requests are made without rationale and happen too late in the project cycle (ex. asking to change colors after the final iteration of mockups).

2) Knowledge sharing across designers is important and should be done often.

The project went smoothly in part because of the excellent collaboration that took place among designers. We established a safe space to share design feedback and ask questions. For example, some of the designers were less experienced with Variables, which is a new Figma feature that we were using. I took the initiative to create tutorials to walk designers through the feature as well as address all questions that came up. It helped us arrive on the same page. I will continue to support knowledge sharing in my future design roles!

3) Information architecture is a necessity when designing end-to-end

If we had more time on the project, I would’ve dedicated it to creating an information architecture map. We were designing an app from end to end, so there was a high volume of flows and screens. We did our best communicating how all the pieces fit together but flow discrepancies were caught at a later time than desired. Creating a site map or user flow diagram from the start would’ve saved us the trouble.

4) Design fast but make sure to back all design decisions with a rationale

Time was a big constraint on this project. I learned to iterate rapidly and increase the turnaround for feedback. Although things were happening fast, I always supported my design decisions with some rationale and documented it.

TESTIMONIALS

We received excellent feedback from the client and industry mentors.

This project was part of Develop for Good, which hosted a Demo Day of presentations during the final week of the program. I’ve collated some feedback we received:

“The team presented a truly excellent presentation that provided a logical flow, visually-impacting images and animations, and clear problem statement, objectives, and outcomes. Additionally, the quality of the UX design mock-ups would stand-up against what I've seen in my product management role here at HPE.”

“Develop for Good’s work was great, and the project went smoothly. The team was professional, supportive, and responsive. All people on the team were enthusiastic, and there was lots of engagement. I’ve worked on many projects with designers, and I’m particularly impressed with this team’s quality of work.”