.png)
Habit Stackr
The Habit Tracker App Built on Behavior Science
Target User: Anyone trying to build better habits or break bad ones.
Problem Solved: How might we help people start good habits by using their current habits as natural starting cues?
My Role: UX Designer + UX Writer
My Process
Because if you don't have a process, you don't know what you're doing.
1
Discover
Competative Analysis
Literature Review
User Interviews
2
Define
Problem Framing
Requirements
User Flow
3
Design
Style Guide + UI Kit
UX Writing + UI Design
Testing
1. Discover
Competative analysis + literature review
Most habit trackers suck.
That was the conclusion I came to after personally using several of them. I mean, just look at this one trying to add a single habit.
.png)
Cognitive overload much? My competitive analysis showed that pretty much every habit tracker suffers from this issue.
But I couldn't put my finger on what else was wrong with them. They just didn't seem to really help me with my desired behavior change.
So, I thought, "How might I make a better, brain-friendly habit tracker app?"
To do that, I discovered and relied on the behavior change model “COM-B”, a highly recommended model from behavior change literature.
This model proposes that “Behavior Change (B) happens when people have the capability (C), opportunity (O) and the motivation (M)”.
.png)
This model became my template for organizing my research during user interviews.
User interviews
When I interviewed to people who were actively trying to build habits using habit trackers, several verbatims showed that their struggles mapped cleanly to COM-B.
For example:
Motivation
"Everytime I look at my guitar I just think about how far I have to go to play the songs I want."
User Verbatim regarding her habit tracker app not helping with motivation.
Capability
"Having an expert tell me that I only had to practice the guitar 5-10 minutes was reassuring."
User Verbatim regarding an online course, not a habit tracker app.
Opportunity
"How do you know when to do the habit? I just don't know sometimes. That's what I struggle with."
User Verbatim regarding her habit tracker app.
2. Define
Problem framing
To sum up my research and properly define the problems I could solve, I found that habit tracker apps have 3 big issues:
Users start from scratch - Most habit builders put the onus on the customer to choose a time and date to start each habit. The habit almost assumes they currently don’t have an existing life and are therefore starting from scratch.
Users lack of context - Users don’t know why they need to submit so much information, which inhibits their motivation to stick to the app’s features.
Cognitive overload - Many habit trackers try to double as to-do lists, which crowds out their key purpose. They also try to present too much information into a single screen.
Requirements
To counteract these issues and many others, I found 3 tactics from habit building research that became the overall bedrock of my Habit Stackr app:
Increase opportunity with...implementation intentions - A conditional "After X, then Y" sentence that provides a user a specific cue /trigger to do a certain action. In this case, the cue would be a CURRENT habit, and the action would be a new desired habit. This is the core of "habit stacking".
Increase capability by...making it tiny - Making a habit only last 2 minutes makes it easier to stick to because it’s less intimidating. So I knew I wanted the app to prompt this at some point.
Increase motivation by...giving context - Provide a screen to ask people WHY they are creating the habit. Once people know the “why” behind something they can better predict why something is worth doing.
User Flow
To bring these ideas to life, I thought through the ideal time to implement them within the habit builder using a user flow diagram.
- Name the habit
- Make it tiny / easy
- Pick a habit trigger in the form of an existing habit--good or bad
- Give details to the existing habit (place and time)
- Tell yourself why you want to do this (motivation booster)
- Create the stack
3. Design
Brand style guide + UI Kit
Once I had an idea of the flow, I knew my general UI needs, which then prompted me to create a brand style guide and UI kit.
My thought process for the style: "Stacks" made me think of "bricks".
So I chose red/pink-ish primary color and a blocky header typeface (Bebas Neue) to work together as a brick theme. Secondary colors and body type were chosen to complement those primary elements.
Now that I had my flows and style, it was time to build my screens.
UX writing (Content first, duh)
Using my flow as a story structure, I opened up a Google Doc and wrote out the content for each screen, each serving as its own scene. By organizing the the content as a walkthrough, the user could appreciate why each piece of input mattered and gave me space to implement different behavior change tactics.
Once I had my "script" written out, I brought it to life in the UI design.
UI Design
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Overall, my design principles were:
Hand holding through wayfinding - Let people know where they're at in the process in the top part of the screen and show where they are going using explicit button text.
One decision per screen - Allow the user to fully focus on why the decision matters.
Keep short-term memory in mind - Pull previous answers into future screens so it's clear how previous decisions impact the next.
Make it concrete - Use filler text to make it apparent what I'm asking for and give examples of answers so there's no doubt what kind of answer you should give.
Testing
After testing a prototype with users, two problems arose. For one, when asking details for “When does this current behavior finish?” users were confused what "this behavior" referred to (it was their existing habit).
So I changed the wording so that it’s clear that I'm asking for details of what info they just provided.
This change embodied the "keep short-term memory in mind" principle.
.
.png)
Second, once they clicked “Finish Habit Stack” at the end of the flow, users were confused if it actually worked and wanted confirmation, so I added a success screen.
.png)
Future Features
If I had more time, I would love to add more customization around breaking bad habits and how to group habit stacks together so they become an on-going chain.
