Miricyl Mind Miles

A gamified web app offering a self-diagnosis tool and self-paced treatment plan for individuals seeking mental health support.

My Role

Product Designer
Lead Prototyper

Duration

November  2023 - February 2024

TOOLS

Figma, Mural, Prototyping,
User Research

Team

Amy La (PM)
Tiffany Lau
Arin Ososanya
Callie Rigsbee
Ginny Wang
Sunny Zhong

PROJECT OVERVIEW

Problem: Millions of youth (ages 18-29) in the UK are affected by mental illness, but only 20% are able to find help.

Miricyl is a U.K. non-profit aiming to increase mental illness research for the youth. Recognizing the limitations of PDF and paper-based solutions, they sought to integrate a digital solution into their website.

As a Product Designer, I collaborated with a team of 5 designers to conduct user research and design an engaging, evidence-based digital experience to help U.K. youth improve their mental health.
OVERVIEW

Miricyl Mind Miles — At a Glance

Increasing Accessibility and Engagement in Mental Health Care

👩🏻‍💻 GET STARTED

Users take a Self-Assessment Questionnaire, where we recommend select clinically proven assessments (GAD-7 and PHQ-9).

👟 TAKE YOUR FIRST STEP

After sign-up, users can create their first treatment plan and begin earning Mind Miles.

🎯 ACHIEVE YOUR GOALS

Explore things to do in our Activities Library! Users can engage with and complete activities daily or as much as they want to earn miles and badges.

RESEARCH

Understanding the Problem

To better gauge our target audience (U.K. youth ages 18 to 29), we sent out a survey to explore the current mental health support landscape and the process of accessing such services. We discovered 3 Key Pain Points:

Poor Social Support

Youth face stigma from their personal networks when seeking mental health care.

Financial Barriers

Youth often lack stable income and don’t prioritize spending on mental health care.

Lack of Motivation

Current treatment plans are not engaging, causing many to struggle with consistency.

AND identified 2 Key User Preferences

(% based off 21 Respondents)
of users want some customization in their treatment plan.
of users desire mobile design to track their mental health.
RESEARCH

Sample User Persona

RESEARCH

Client Needs

The web app wasn’t a fully realized idea from the start! As a growing non-profit, Miricyl’s main goal is to increase user retention and build on their existing resources to maximize their offerings. Here’s what we focused on after looking through our Product Requirements Document (PRD).:

BUSINESS GOALS

01 
Integrate an accessible platform for self-screening and assessment.
02
Boost website traffic and engagement with Miricyl’s resources.
03
Encourage timely access to professional support.
(Miricyl’s Website)
IDEATE

The Brainstorming Process

LO-FI DISCOVERY

Wireframes were initially created separately in the styles of the respective designers to best visualize features in action. The team then came together to audit all designs for the most effective design to move forward with when we standardize design elements and guides.

GENERAL USER FLOW

The main challenge with our user flow was encouraging users to create a Mind Miles account with Miricyl to continue their mental health care and create their treatment plan and toolkits. This is what we landed on:

STYLE GUIDE

To ensure the web app integrates smoothly with the current Miricyl website, we created a comprehensive style guide with components to streamline the mid-fi to hi-fi process.
FINAL SOLUTION

Putting it All Together

Considering the business goals of care accessibility and website traffic, along with our findings on user preferences for customization and mobile convenience, we designed a mobile web app with user customization through a gamified approach for engagement. Our final designs were handed off to the Miricyl team for development through Wordpress.

WHAT ARE MIND MILES?

Navigating the mental health journey ONE STEP at a time...

“Mind Miles” is a thoughtfully chosen gamification strategy that allows users to earn miles for completing activities in their treatment plan. The accumulated miles translate into destinations that users can unlock. We visualize this approach via elements of walking, such as steps.

FEATURE HIGHLIGHT

Curated User Selection

Rather than giving users endless options of activities to choose from due to possible information overload, we curated a select few, allowing users to select 3 key activities (self-help, foundation, and hobby) during onboarding.

FEATURE HIGHLIGHT

Profile Engagement

As the profile would be the main entry point for users, we wanted to make it comprehensive, but straightforward with 3 key elements:
01 
To-Do List: Users can see their 3 main treatment activities daily.
02
Progress: Users can keep track of their progress and the badges earned from milestones.
03
Treatment: Users can easily edit or add activities to their treatment plan via the activities library.
REFLECTION

Our Impact

Designed and Prototyped 100+ Screens

Developed 3 Key Features and 22 Design Components

Expected to increase user retention rate and site traffic by ~20%.

"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.”

— Alex Conway, CEO of Miricyl
REFLECTION

My Takeaways

Don’t Be Afraid to Share

The Develop for Good program  provided me with my first experience working with a team and client while making real-time impact. With so many design styles and perspectives, it can be daunting to share one’s thoughts without the lingering fear of judgement.

But there wasn’t judgement, it was a conversation. I found that it was more fruitful to share my ideas, whether they were repetitive or novel. I learned to take the personal out of the feedback process and embrace the conversation of ideation and hey, my ideas really did come to life!

Learn By Being Bold

Stepping out of my comfort zone, I stepped up to be the main prototyper, prototyping 100+ screens designed and ensuring fluidity. This was also my first time prototyping at such a large scale!

Our mentor gave me feedback on the motion and timing of the animations. I realized I wasn’t that great of a prototyper at the end haha, but I took time after the conclusion of the project to learn about motion in UI to improve for the future. Although your first try or second or third might not be great, you always learn from trying and doing!

Loving Miricyl? View My Other Projects:

Web DesignBranding

FemaleFounded Conference

Mobile App DesignInternship

flock: experiences that matter

Thanks for visiting, it means a lot! Let’s connect.

(Optional) Conversation starter: What’s your favorite dessert?
LinkedInEmail
© 2024 by Christina Wu