Pattern Habit Tracker

Designing a habit-tracking and goal-setting app from the ground up, inspired by James Clear's Atomic Habits

PROJECT TYPE

Proof of Concept

MY ROLE

User Research

Wireframing

Brand Design

Prototyping

Usability Testing

TOOLS

Figma

DURATION

4 Months (2022)

Overview

Motivation is unreliable. I wanted to create a tool that takes a human approach to habits.

Summoning the motivation to daydream about self-improvement is deceptively easy. I love making mood boards, planning out my ideal month in my planner, and reading self-help books grounded in psychology. But for doing the grunt work – studying, going to the gym, not eating hot Cheetos – motivation is unreliable. That's where habits come in!

The idea for this project was inspired by James Clear's Atomic Habits, a book about how to cultivate habits that stick. This quote from the book resonated with me the most:

"Every action you take is a vote for the type of person you wish to become."

This idea has been stuck in my head since I read the book, but I wondered if I could make the idea into a tool rather than just a mantra. I also wondered what problems other people had with achieving their ideal selves, and what actionable methods work for people.

Background

Here's how I discovered the problem.

The main idea behind James Clear's Atomic Habits is that habits are the compound interest of self-improvement, and making tiny changes in your day can amount to huge results. Here's what else I learned:

Habits are closely intertwined with identity, and behavior that is dissonant with one's self-concept will not continue
Successfully building a habit involves four steps: make it obvious, make it easy, make it attractive, and make it satisfying.
The opposite of the above applies to breaking bad habits.

While this concept was on my mind, I sought out psychology podcasts on the topic of habit-building. In an NPR Hidden Brain episode titled "You, But Better," behavioral scientist Katy Milkman discusses the human bias for the present moment. We tend to favor the desires of our present selves over those of our future selves. Catering to both selves is a matter of engineering our habits.

Competitive Analysis

I decided to conduct a competitive analysis, since the modern world is already full of digital tools aimed at making us more productive and focused. I downloaded a few habit-tracking apps and scoured their reviews to get a sense for what they do well, and if there was a gap I could fill.

After reviewing these apps, I noticed some key opportunities that my product could seize:

Habits as an end to themselves: None of these apps remind the user how the habits are contributing to their larger goals or who they hope to become.
Lack of customizability: None of the apps provided much flexibility to customize the interface or write notes.
Lack of forgiveness: Consistency is key so a streak view option is useful, but when it's forced on the user, it's discouraging.
Just an app: Few of these apps were accessible on desktop.

This solidified my interest in building a non-punitive application that encourages users to envision who they could be as they complete habits, with ways to customize the experience.

Usability Tests

I interviewed five people to learn about how people cultivate habits and foster consistency.

My Research Goal

I wanted to know what challenges people face when tracking their habits so I could understand how to build a habit-tracking method users would value and implement – not just one that solves my own problems or assumptions.

When writing my questions, I kept the following objectives in mind:

Determine the role of motivation in habit-formation
Understand how people currently learn new skills or take on new hobbies
Understand the role of habits in people's lives
Learn how people's habits serve as a barrier or catalyst to achieving their goals

Takeaways

After affinity mapping insights from these conversations, I uncovered four major themes:

Emotion: People want to adopt new habits in order to become who they want to be, but current emotion dominates future goals.
Reward: The habits that stick are the ones that make people feel great, in a way that they struggle to live without.
Prioritization: People know certain habits are very important to their future goals or happiness, but they neglect these habits because they might not be as crucial as others, leading to an “all or nothing” mindset.

Define

The problem: people struggle to align their future goals with small daily actions.

I created a persona that encompassed the motivations and pain points I found in the user interviews. This allowed me to empathize with a singular target user.

How might we remind people of what they want for their future selves in moments when they don't feel like working towards their goals?
How might we make people feel rewarded and excited by the process of completing their daily habits?
How might we help people align their daily actions with their real priorities to find balance rather than neglecting them?

Ideation

I began to envision how my persona might use my product to address their problem.

I created storyboards featuring different solutions. Click on each one to view them in more detail. One was based on Mel Robbins' 5 Second Rule, the second was focused on building a unique visual pattern out of repeated goals, and the third was a goal-based system where users could "zoom out" and reflect on priorities to reduce overwhelm. I felt that the final one addressed user pain points most directly.

Sitemap

After conducting a brief card sorting exercise with five participants to get a sense for users' mental models, I constructed the information architecture of the app.

Task Flows

I then created a few task flows to define the happy paths for each key action. I made sure to only outline the flows that were essential to the app's functionality, due to the project's limited scope.

Click to view in greater detail.

User Flow

I created a single user flow to account for any decisions the user may need to make in the app, and to catch any dead ends or edge cases. I defined the following scenario based on the persona I made:

Oliver wants to hold himelf accountable to exercise after work each day in order to train for a marathon. His friend recommends this habit tracker. He downloads the app, creates an account, sets up goals and corresponding habits, then completes his first habit.

Click to view in greater detail.

Design

I explored various screen layouts before deciding on one.

These are a couple pages of my sketchbook, where I experimented quickly with the order of different features on each main screen, and how each action might flow.

Mid-fidelity Wireflows

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

I adapted a few of these key layouts for the web and created a landing page for the app, anticipating that people might want to access the product when they're away from their phones.

Brand Design & UI Kit

In preparation for building high-fidelity wireframes, I curated a moodboard to figure out my brand's personality. This Fran Meneses comic about empathizing with your future self stood out to me the most. It perfectly communicates the sense of positivity and joy that I wanted to help people associate with personal growth.

I decided to call the app "Pattern," because patterns in textiles are composed of multiple, repeated motifs that might seem insignificant and tiny on their own. All together, they create something beautiful – in the same way that a daily habit can compound to transform a person's lifestyle.

I sketched out multiple logo concepts, then chose one that featured repetition to communicate the idea above.

Blue represents serenity and inspiration, so in this palette, it serves as a simple background for the user to exercise their creativity. The secondary colors feature a set that the user can pick from to customize their goals and how they are represented in data visualizations.

As I began building out components, I organized them into an easily accessible UI kit.

High-Fidelity Wireframes (Round 1)

This was my first iteration of the design, specifically for the three tasks: Sign Up, Create a Goal and Habit, and Complete a Habit. I used this version for user testing, and then the final version underwent extensive edits.

Usability Testing

To see if the product actually addressed user needs, I conducted five 1:1 usability tests over Zoom.

I tested three main user flows:

Create an account
Create a new goal and corresponding habit
Log habit completion

Although users had little trouble navigating the app, affinity mapping revealed points of improvement that could be made on the clarity of some features. I created a matrix of what worked, what to change, questions/confusions, and ideas. I grouped common themes together.

Iterating

Priority Revisions

These were the most common patterns in my interviews, and how I addressed them:

Reflection

As my first solo UX design project, this process taught me a lot.

One user mentioned that he would want much more guidance and education on the topic of knowing HOW to create effective habits based on goals. While he was the only one who pointed this out, it did make me realize that I had made an assumption about my users – that they already knew how to identify habits that could get them to their goals. I was focused on the problems of consistency and motivation, but didn't build out a feature for this education.

If I had more time, I would conduct further user testing to see if his concern really is a part of the problem, and if it is appropriate for me to build into my app. With my current time and resources, it is beyond the scope of this project.