Untangle

A gamified micro-learning app to help undergraduate students learn about their thought patterns and reframe them

Designing for Learning

UX Design

Prototyping

Visual Design

The rationale behind Untangle

Based on literature reviews, 8 user interviews, and 15 survey responses, we identified several learning gaps.

Throughout the research and design process, we relied on theoretical principles of learning used in pedagogy. In this case study, a learning model is annotated with the label: Model name

We used 'Julie Dirksen’s Learning Gaps' model to outline and categorize the learning gaps that currently exist into knowledge, skills, communication, motivation, environment gaps:

With these gaps in mind, we asked:

How might we help undergraduate college students become aware of their unhelpful thought patterns and reframe them to reduce the negative effects that follow?

Using CBT Techniques for our solution

In consultation with an expert psychologist, we explored various reframing frameworks and considered integrating them to scaffold the learning experience.

However, due to the complexity of managing multiple variables, we decided to focus exclusively on Cognitive Behavioral Therapy (CBT), as it is widely used and serves as an effective starting point.

We used 'Grant Wiggins and Jay TcTighe’s ‘6 Facets of Understanding' to outline what aspects of cognitive distortions and reframing the learners should be able to explain, interpret, apply, perspective, and be self-aware of.

Our interview insights revealed that users are more comfortable learning through fictional scenarios rather than real-life situations. This finding led us to decide that the learning experience should be designed as a game.

Framework for the experience

Using learning models like Scaffolding, Levels of Development of Mastery, and Magic Circle, we designed the sequence and structure of the game. This is the learning model for the experience:

The game is a durational, micro-learning experience aimed to guide the learners from Unconscious Incompetence to Conscious Competence. Each thought pattern is introduced through events the character undergoes, and the user must identify them and reframe their thoughts.

College students often experience "Duck Syndrome", where they appear to navigate college calmly while struggling beneath the surface.

This pressure skews their perception of others, fueling unhelpful thought patterns and self-doubt. Prioritizing self-care is essential to counter them.

73% of students acknowledge the need for self-care

But there is still a gap in translating this awareness into consistent practices (U-M School of Public Health)

To learn more, we set our research objectives:

Identify which aspects of self-care are most effective in helping students overcome cognitive distortions.
Assess students' current knowledge of cognitive distortions and strategies for addressing them.

My Roles

User Research

Product Concept

Prototyping

Branding and UI

Game Testing

Details

Team: Avani, Eugina, Lilly

Timeline: 9 weeks, Spring 2024

The Challenge

Undergraduate students are particularly susceptible to negative cognitive patterns as they navigate significant life changes, alongside academic stress and social comparisons. Addressing these cognitive ‘distortions’ is key to improving their mental health and overall performance and well-being.

The Solution

An engaging, gamified micro-learning app that introduces students to various cognitive distortions and empowers them to overcome these challenges using proven Cognitive Behavioral Therapy (CBT) techniques.

We outlined how a learner would/should go through an event. Similar to CBT, learners will identify the thoughts, feelings, and actions their character might experience after each event.

These are represented as ‘chips’ that users can collect. We chose chips to make the process of articulating these elements relatively simple and user-friendly.

After 3 events, the learner must identify patterns in their thoughts, feelings, actions, and reframe them.

Paper Prototyping

We conducted a quick paper prototype to evaluate the game’s flow and gauge how learners felt about the process of collecting chips. All participants were able to follow the flow and successfully identify patterns in the thoughts.

Gamification of the Learning Experience

Using Marsha Lovett’s Model of Motivation, we ideated on how the goals in the game and the learner’s interests could be leveraged to get the learners to come back to the game, and stay engaged throughout:

Immersive Game Narrative

Pleasant, calming visuals

Storyline

The storyline follows an abstract character living in a whimsical world, whose goal is to reach a beautiful meadow free of problems and ‘thought demons.’ As learners guide the character on this journey, they encounter various events and thought demons. Along the way, they unlock ‘antidotes’ by reframing thought to tame the demons, turning them into friendly pets.

Hook

We plan on posting a ‘Buzzfeed quiz’ type of social media post. The quiz would take the learners through one module of reframing, and unlock a thought demon. They are then prompted to download the app to learn more.

Wizard of Oz. Play Tests

We setup the designed game sequence on a FigJam board and conducted play tests through ‘Wizard of Oz’. Through these tests, we tested the content flow and relatability, the effort of chip selection and reframing.

We conducted 10 play tests and 10/10 users uncovered personal thought patterns, and were satisfied with the experience flow and reported they would play again.

Visual Design

During our play tests, we also tested out 4 different visual styles with our learners. We tried styles like educational, whimsical, comical narrative, and dreamy. 7/8 expressed they liked a mix 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 developed a ‘scroll’ concept for the chips.

CHARACTER DESIGN

We designed the character to be gender neutral with a red yarn around their head. The yarn gets ‘untangled’ as they unlock antidote potions and disappears when they reach the meadow.

The thought demons are whimsical monsters with muddy colors that upon drinking the potion become revitalized.

How does the game work?

Scaffolded + Immersive Start

Onboarding

The game is divided into modules that the character goes through. Each module has a storyline to follow.

Events

Living in a Chapter

Each module presents a series of events or scenarios designed to engage learners. Players can skip an 'event' if it's not relatable

Post each event

Collecting Ingredients

After each event, learners collect scrolls representing thoughts, actions, and feelings they might associate to the experience.

Learning about the thought pattern

Reframing Thoughts

After three events, learners enter the reframing stage, where they identify patterns in their scrolls to unlock thought "demons" (recurring thought patterns).

Build Thought + Feeling + Action pattern

Learning about Patterns

After unlocking thought demons, learners explore related feelings and actions that were dictated by the cognitive patterns.

Reframe Thought Pattern

Rewriting Patterns

Learners are encouraged to reflect and reframe their thought into a scroll. This unlocks an antidote potion.

Receive feedback on reframing Action pattern

Feedback

Receive AI-generated feedback based on the words you use to reframe your thought.

End each learning session with a ‘What if’

Prompting Reflections

Each reframing exercise ends with a rhetorical question for learners to reflect on to carry their learnings into the real world.

What I learnt:

Context is important

We were very invested in designing the game but we struggled a little in getting the hook or the context in which learners could be roped in. It’s important to also think of what leads a user to the experience.

Stringing along ideas

We went through multiple learning models and ideated along each of these but they quickly became disjointed. I would have liked to document them better so we could have strung them along.

Efficient Testing

Using a Wizard of Oz. approach helped me find low-fidelity ways to test a concept without having to invest a great deal of time making wireframes.

If I had more time, I would:

Made versions of the UI and tested it for ‘Uncanny Valley’

Refined the illustration placements for UI

Make the game more immersive with videos