A gamified learning app to help students with their mental health
ROLES
User Research, Product Design, Visual Design
COLLABORATORS
2 Experience Designers,
1 Researcher
DURATION
6 Weeks, 2024
TOOLS
Figma, After Effects, Illustrator
PROBLEM
College students struggle to follow through on mental health practices
Navigating college is hard, and self care is key. While 73% of students acknowledge the need for self-care, there is still a gap in translating this awareness into consistent practices. (U-M School of Public Health).
What do they specifically need to focus on?
Fixing unhelpful thought patterns is a crucial first step
We all form thought patterns that shape how we handle challenges. Some help us grow, while others trap us in negative loops. The first step to healthier thinking is recognizing them.
But overcoming patterns is hard
We conducted 8 user interviews, 15 survey responses, and literature reviews on self-care and found these core barriers:
Unaware of their thought patterns
Students did not identify that their perception of a situation might be skewed
Lack of commitment and time
Students don’t know what benefits come from changing their thought perspectives
Unaware of tools that help
Students do not have an understanding of what tools can help them overcome negative thoughts
Interviews, Surveys, Competitive Analysis, Julie Dirksen’s Learning Gaps Model
From UX audits, 6 interviews, and 40+ survey responses, we saw that people had problems with shopping, but even after that.
With this, we asked
How might we empower college students to recognize, reframe, and overcome unhelpful thought patterns?
Presenting Untangle: A gamified micro-learning app
Impact
FEATURES
Immersive modules for lessons
The game is divided into modules that a whimsical character goes through
Going through life events
Each module presents a series of events designed to engage learners as they learn about different thought patterns
Collecting thoughts (ingredients)
After each event, learners collect scrolls representing thoughts, actions, and feelings they might associate to the experience
Encountering thought patterns (thought demons)
Learners enter the reframing stage, where they identify patterns in their scrolls, which appear as thought demons
Learning about patterns
After unlocking thought demons, learners explore related feelings and actions that were dictated by the cognitive patterns.
Rewriting patterns (brewing an antidote)
Learners are encouraged to reflect and reframe their thought into a scroll. This unlocks an antidote potion.
Receiving feedback
Receive AI-generated feedback based on the words you use to reframe your thought.
Prompting reflections
Each reframing exercise ends with a rhetorical question for learners to reflect on to carry their learnings into the real world.
PROCESS
Leveraging tools that clinicians use
In consultation with a psychologist, we chose to focus on Cognitive Behavioral Therapy techniques as they are widely used, effective, and a manageable foundation for teaching reframing.
Expert interviews, Literature reviews
The game is based on the idea of practicing CBT to overcome a thought pattern by collecting thought, feeling, and action scrolls after a scenario
Learning about emotional concepts through fiction
From our interviews and initial idea testing, we found that users preferred exploring emotional concepts through fictional scenarios, so we decided to design a gamified learning experience
Designing a framework for the app
Attracting learners with shiny things
In Julie Dirksen’s model on capturing learner attention and motivation, she talks about using “shiny things” to attract the learner's attention.
We focused on two: the immersive, relatable visual style of the game and subtle gamified nudges that keep learners curious and coming back.
What is the game narrative?
A whimsical character, Mae's goal is to get to a meadow. In her journey, she encounters life events which makes her collect thoughts, feelings, and actions. These reveal thought patterns that can be fixed by reframing, taming demons to friends
Designing the Visuals:
Whimsical and Dreamy Visuals
We designed 3 different moodboards outlining prominent gaming visual themes that exist in the paradigm of learning games. We tested these with and found that they preferred a combination of “Dreamy and Whimsical”
We developed a color palette and visual system to support this style. We went for a whimsical forest setting, and chose colors and fonts to complement that.
We chose Petrona and Manrope to create a whimsical, dreamy feel while maintaining clarity and readability.
Simple, repetitive layouts
OUTRO
Designing for mental health isn't just about making something functional, it’s about creating an experience that feels safe, motivating, and easy to return to. Here’s what stood out during the process:
What I learnt:
Context is important
We learned that designing the hook is just as crucial as the experience itself—engagement starts before the first tap.
Mental health design needs nuance
Tone, timing, and visuals all influence how safe and effective the experience feels.
Behavior change needs micro wins.
Small, scaffolded learning moments kept users engaged and reduced cognitive fatigue.