Designing playful paths to better habits

HCI Design (CS 147)
Cross-Platform Mobile Development (CS 147L)

Designed and prototyped a task management app that pairs structure with playful motivation to help users turn intentions into action.

Won 5 awards at the Stanford HCI Project Expo, including Best Demo, Best Visual Design, Best Poster, 2nd Best Pitch, and 3rd Best Overall among 120+ students.

My Roles
UX/UI Design
UX Research
Frontend Development

Team
Krystal Li
Sarah Jacob
Steven Le
Lauren Yu

Tools
Figma
React Native
Javascript
Expo Go

The Challenge

Traditional productivity tools are great at organizing work, but they’re less effective at making people want to do it. We began by exploring personal accountability: how people stay on track, what causes their systems to break down, and what kinds of motivation actually sustain behavior.  

Our question became: How might we make mundane tasks feel engaging enough that people want to keep coming back?

Understanding Accountability

We interviewed 8 people across different ages, careers, and lifestyles to understand how people build accountability.

Rather than asking what productivity features they wanted, we focused on their existing behaviors: what already worked, what broke down under pressure, and what helped them restart.

What we learned

  • Accountability tools work best when they fit naturally into routines users already have.

  • Users want flexibility and systems that don’t make them feel like they have failed.

  • Reminders should support, not overwhelm.

  • Motivation often comes from beyond the task itself, through meaning, progress, or connection.

These findings shifted our focus from simply helping people manage their tasks to understanding what makes them want to complete them.

How Might We?

We translated our learnings into three How Might We questions, exploring the a different person’s specific needs and source of motivation. perspectives that stood out most to us.

Solution Ideation

From the HMWs, we ideated on solutions and landed on one from each HMW:

  1. An app that transforms tasks into a story, unlocking new parts of a narrative with each completed step.

  2. A challenge league where friends complete tasks, and the one with the fewest done faces a fun, group-chosen dare

  3. A digital pet that evolves and reacts with the user’s daily task competition.

We then mapped out our strongest assumptions for each solution, and ran 3 experience prototypes to research whether users demonstrate the expected behaviors that were most vital for the experience.

Prototyping Takeaways

  1. Friends naturally desire to support each other, but consistently doing so requires some structure.

  2. Completing work with others creates an enjoyable shared experience.

  3. Individuals are motivated by curiosity to make progress.

  4. People find greater motivation for short-term tasks when they are connected to long-term goals.

  5. Diverse interactions are needed to maintain long-term engagement.

Andrew, a procrastinator who only engages when he sees the bigger picture.
→ HMW turn mundane tasks into a challenge someone looks forward to?

Sydney, studies best surrounded by focused peers.
→ HMW make accountability feel shared, not solo?

Final Combination Solution

An app that incentivizes task completion through narrative story updates that evolve their personalized avatar, highlighting their progress and accomplishments.

Kevin, has ADHD and typical accountability systems become a burden.
→ HMW make staying accountable take zero setup?

Low-Fi Prototype

We made 4 concept sketches exploring ways to realize our solution, and ultimately chose to move forward with a mobile prototype, because:

  • Users already carry phones, not watches

  • Story needs screen space

  • Fits existing workflows (calendar, reminders)

Usability Testing

Through usability testing with 7 participants, we identified several opportunities to make the experience more intuitive:

  • Added onboarding and clearer iconography to help users understand the experience.

  • Made characters and items directly tappable rather than requiring users to navigate through secondary controls.

  • Moved “Add Task” above the fold after discovering that task entry was too buried within the scroll.

Final Solution

Our app, Unfold transforms task management into a story-driven experience, motivating users to complete tasks through curiosity and emotional engagement, not just points or streaks.

Reflection

Over a 10-week quarter (and what felt like a 10-week hackathon) in CS 147: Introduction to Human-Computer Interaction Design, my team and I tackled design challenges within the studio theme: Design for Behavior Change. We first conducted needfinding interviews to deeply understand user challenges, then designed, prototyped, and tested ideas for innovative mobile applications.

At the Project Expo, we showcased our high-fidelity prototype and poster, presenting the solution we developed through this iterative design process. Out of 120+ students and 30+ teams, our app, Unfold, won 5 awards! Best Demo, Best Visual Design, Best Poster, 2nd Best Pitch, 3rd Best Overall.

From user research to high-fi prototyping, our design process is fully documented here!