Case Study · Mobile UX

Habit Stacking App

A behavior-driven mobile experience that helps users build lasting routines — one brick at a time.

Download Case Study PDF View Prototype Back to Portfolio
Role: UX Designer & Researcher Platform: iOS / Android Duration: 6 Weeks Status: Prototype Complete

The Problem Worth Solving

Most habit-tracking apps focus on streaks and checkboxes — but they don't address why habits break. Users quit not because they lack discipline, but because the apps don't support them when life disrupts their routines. The Habit Stacking app was designed to meet users where they are, using a "brick by brick" metaphor that makes progress feel tangible, forgiving, and worth continuing.

Core Insight: The biggest drop-off happens not at Day 1, but at Day 3–7, when the novelty fades and friction kicks in. The app's Replacement Brick system directly addresses this failure point.

What We Were Designing For

🎯

Reduce Early Drop-Off

Design a system that keeps users engaged through the critical first two weeks.

🧱

Make Progress Visible

Give users a physical metaphor — building a wall of bricks — that communicates momentum.

🔄

Handle Failure Gracefully

Introduce a Replacement Brick mechanic so a missed day feels like a pivot, not a failure.

Minimize Onboarding Friction

Get users to their first habit logged in under 90 seconds from first launch.

Understanding the User

I conducted competitive analysis across five leading habit apps and synthesized themes from 12 user interviews with adults aged 22–40 who had tried and abandoned at least two habit apps in the previous year.

01

Competitive Analysis

Audited Habitica, Streaks, Fabulous, Finch, and Productive — mapping where each lost users and what gamification mechanisms they used.

02

User Interviews (n=12)

Semi-structured conversations exploring habit motivations, failure triggers, and what "success" looked like. Synthesized into an affinity map with 4 major themes.

03

Persona Development

Defined two primary personas: The Restarter (rebuilding after burnout) and The Optimizer (adding structure to an already-productive life).

04

How Might We Statements

Reframed research insights into four HMW statements that guided the ideation phase and kept the team anchored to user needs.

Brick by Brick Visual Language

The design system reflects the core metaphor. Colors signal state: Deep Green for active habits, Burnt Orange for replacement bricks, Soft Mint for streaks, and Golden Yellow for milestone celebrations. Every UI element reinforces the feeling of building something real.

Deep Green
#2A7A4B

Burnt Orange
#E05C2A

Soft Mint
#9EDBC8

Golden Yellow
#F5C842

Deep Navy
#0B1628

The Mechanics That Matter

🧱

Brick Builder

Each completed habit adds a brick to the user's visible wall. The wall becomes a personal artifact of consistency.

🔁

Replacement Brick

Miss a habit? Log a related micro-action instead. The wall keeps growing — a missed day is never a wasted day.

🔗

Habit Stacking

Chain habits together using anchor triggers. The app guides users through a pairing flow backed by behavioral science.

🏆

Milestone Moments

At Days 7, 21, and 66, the app celebrates with full-screen animations and badge unlocks that feel worth sharing.

What the Testing Revealed

Usability testing across 8 participants (2 rounds, SUS scoring) validated the core flows and surfaced several iterations. The Replacement Brick mechanic was the highest-rated feature — nearly every tester called it "the thing that would actually keep me using this."

88
SUS Score (Excellent)
90s
Avg. First-Habit Time
8/8
Testers Liked Repl. Brick
2
Iteration Rounds

What I'd Do Differently

Given more time, I'd run a longitudinal study to measure actual retention past Week 2. The Replacement Brick system was hypothesized to reduce churn, but real behavioral data would sharpen that story significantly. I'd also explore push notification personalization — timing habit reminders to each user's logged peak-energy window rather than a static schedule.

Biggest takeaway: Habit apps live or die on the emotional resonance of failure states. Getting the "you missed a day" moment right is just as important as celebrating a streak.

How It Was Built

Figma FigJam React TypeScript HTML / CSS Affinity Mapping User Interviews SUS Testing Competitive Analysis Persona Development Prototype Testing HMW Framework

Ready to see more of my work?

Download Case Study PDF View Prototype Back to Portfolio