21SUNS: An end-to-end mobile app to help users effectively create + maintain habits
The Project
Project Goal
Design an end-to-end iOS app that helps users track and maintain their habits.
The app will also help users understand the elements of a successful habit and log any obstacles that come up when trying to create a new habit.
Timeline + Tools
3 weeks
Tools: Figma (design + prototyping), Zoom
Role
User Research, UX/UI Design, Prototyping, Usability Testing
Tools: Figma, Maze, Zoom
The Process
1. Empathize
Understand the relationship users have with habits and how they currently track their routines. Research the psychology of habits.
2. Define
Get specific on the problem we’re trying to solve, who we’re solving it for, and how a user will experience the solution.
3. Ideate
Based on research learnings and project definition, we’ll start start to create the UX design and visual design.
4. Prototype + Test
Create a prototype to test the in-app experience and then observe users in real time before making to priority changes.
1. Empathize
Overview
To kick off the research for this project, my first goal was to understand the relationship users currently have with their habits. My intention with user research interviews was to understand what frustrations come up when building habits, how people track their habits, and how they understand if a habit is “working.”
Additionally, I wanted to dive into the psychology of habits. I looked to top researchers in the space to understand the science behind habits and the different approaches to creating a habit.
- Secondary Research + Competitive Analysis
- Primary Research: User Interviews + Findings
- Persona
- Affinity Map
Understanding the world of habits
Over 40% of our daily actions are actually habits, or rather repeat actions. But why is it so hard to create and maintain new, healthy habits?
Despite habits being an energy saving tool that the brain uses so it can go on autopilot, habits have a bad rap. They’re considered boring, take too much time to cultivate, and just generally aren’t fun. But people know they’re good for you and are constantly trying to build new habits, yet don’t always find success. But why?
When it comes to building a new habit, studies have shown that it takes anywhere from 18 to 254 days to form a habit. On average, it’ll take just over two months for a new behavior to become automatic.
Researching surrounding habits is plentiful, but few people opt to read or dive deeper into the psychology of habits. While there are many methods out there, such as James Clear’s Atomic Habits thinking or BJ Fogg’s Tiny Habits method, the two constants in successful habit creation: start small and use the habit loop.
The Four Tendencies, via Gretchen Rubin
Additionally, how people respond to inner and outer expectations varies. So, depending on your “tendency type,” a personality quiz created by author Gretchen Rubin, you are more or less likely to respond to various expectations in your life.
While all people and types are able to create and maintain habits, the process to get there can be different. Knowing how you respond to expectations could make the habit building process easier and help you stick to habits with less friction.
Talking to people about their habits
My research was split into two phases:
Unearthing the problems that users currently have around creating or maintaining habits, as well as get a sense of how much users know about how and why habits form.
Discussing the frustrations users have around creating or maintaining habits and dig deeper into those problems.
My participant requirements were as follows:
Men and women, aged 26-36, who have daily habits and routines
Participants who want to implement daily habits, but have struggled to maintain them
Over the span of these two phases, I conducted 9 interviews via Zoom. I learned about the tools and tricks that people use to keep up with their habits, why they think they fall off habits, and general information on how people define their habits and routines.
- Understand how users currently create and track habits or routines
- Understand how much users know about the psychology behind building habits
- Understand what motivates users to create new habits
- Understand what stops users from creating or maintaining habits
- Discover current frustrations with how users currently track habits
User Research Round 1: Learnings
“I think environment is huge environment greatly affects greatly affects my habits.”
“When I fail at a routine or a habit, I feel lazy and am disappointed in myself.”
“If a routine is too complicated for me, I’ll just stop doing it.”
“Positive reinforcement and encouragement is invaluable to me.”
Goals + Needs
People want flexibility, but also parameters.
People need to be reminded of their habits.
People need to find momentum.
People need a framework for habits.
Motivations
People are motivated by people.
Friends and social media influence habits. .
People are inspired to treat their body and mind well.
Pain Points
Solo habits are harder to maintain.
The more complicated a habit it is, the harder it is to maintain.
Environment affects consistency of habits.
People want to be perfect.
Opportunities
Make it simple.
Educate people on habits.
User Research Round 2: Learnings
Pain Points
The benefits of a habit aren’t always clear.
People don’t like feeling “chained” to their habits.
People don’t always understand why they stopped doing a habit.
People feel like they can’t find the time for habits.
Opportunities
Help people understand the why.
Make habits feel less like a chore.
Educate people on different kinds of habits.
Goals + Needs
People need to feel like they’re in control.
People need a good environment for their habits.
People need to remember the larger goal of what their habit is attached to.
People need to see progress.
Motivations
Someone else’s experience helps incite a new habit.
People are motivated by other people.
Prompts and set time challenges motivate people.
Creating a persona
Meet Maya.
Based on my user interviews, I gathered some of the most prevalent "features" to create this persona. I used quotes and pieces of the interview to create the pain points, motivations, and goals. I also used brands referenced in interviews to build brand affinities that will help guide the design in terms of patterns and integrations the user might be familiar with.
Click to enlarge
Designing an empathy map
To get a better sense of the daily life of Sophie, I pulled quotes and personality traits from the interviews to build an empathy map.
2. Define
Overview
With my user research and understanding of the psychology behind habits as a foundation, I began to dive into ideation for this app. I did rapid ideation exercises to uncover a variety of ideas for how to create a solution for some of these user’s problems.
Once I landed on a solid solution, I used storyboarding to flesh out the user flow, which set the tone for the ideation/design phase.
- How Might We Statements
- Crazy Eights Ideation
- Rapid Storyboarding
- User Flow
Uncovering the problems people have with habits
Overview
After reviewing all interview transcripts and notes, I sat down to list out any possible How Might We statement in relation to a problem that my participants were dealing with surrounding habits. My ideation left me with 30+ statements that I distilled down into three key statements that I wanting to explore solving?
How might we educate people on habit forming techniques?
How might we provide more insight to why habits stick or don’t stick?
How might we help people understand their patterns of unsuccessful habits and change those patterns?
Ideating on the problem
Using the 3 how might we statements, I began to sketch out ideas using the Crazy 8 method, taking 5 minutes to come up with 8 different ideas for how one of the problem statements could be solved. I built upon ideas throughout the process and combined some to address multiple of the How Might We statements.
Visualizing the user journey
In reviewing my Crazy Eights ideas, I found that there were a few ideas that kept popping up:
Educating users on the psychology behind how and why habits stick
Educating users on their own behaviors to inspire positive change
Taking the recurring concepts, I began to sketch out storyboards. Similar to Crazy Eights, my storyboarding was limited to eight screens within five minutes.
Creating a user flow
Upon reviewing my storyboards, I decided to move forward with the concept of educating the user on the habit loop during the creation of a new habit. The user flow shows the steps to create a new habit, and in that process, the user identifies obstacles or excuses that come up that might distract them from keeping the habit. In doing so, a user is more aware of the things that will come up from them and (hopefully!) start to avoid these obstacles from the get go.
Click to enlarge
3. Ideate
Overview
In the ideation phase, my focus was on creating a simple, yet educational flow for how to create a new habit in this app. Secondary to the habit creation flow was the home state of the app and how users would log their habits.
From a visual perspective, I wanted to create a fun, modern, and approachable brand that would speak to my persona.
Once I had the hi-fidelity designs in place, I would be able to test the overall experience and get feedback on the flows in question, as well as the UI design.
- Mobile Wireframes
- Low-Fi Prototype + Usability Test
- Hi-Fidelity Designs
- Brand + UI Guide
Designing mobile app wireframes
Using my user flow as a guide, I created an initial version of my wireframes. The wireframes go through the creation of a new habit and all of the elements required: the overarching goal, the actual habit, the routine of the habit, a reward, and the excuses that might come up. The final screen shows the active home screen where a user would log their habit.
Click to enlarge
Prototyping + testing low-fi designs
In order to test the usability of the habit creation flow, I conducted remote usability tests with the initial version of my low fidelity wireframes. I interviewed 4 participants to get a better sense of any confusion in the overall process and if users felt that there were any key features missing.
Tasks
You’ve just downloaded a new habit tracking app and created an account. How would you go about adding your first habit?
Now that you’ve added a habit, how would you track it and recap your day?
Recapping the usability test + updating wireframes
Key Takeaways + Changes
Feedback from the first usability test fell into the following buckets:
Naming and creating a habit is very personal
Users want to see their progress
Logging a habit and recapping your day are two different actions
Once I identified these themes, I updated the wireframes with necessarily changes that might alleviate these frustrations, as well as make overall improvements to the wireframes based on minor feedback related to icons, navigation, etc.
Naming and creating a habit is very personal
Letting users see their progress
Logging a habit and recapping your day are two different actions
Creating the initial branding
With the initial branding, I led with an overall feel that felt bold, yet simple, approachable and friendly. Taking cues from the Rubix cube and relying on colors to signify different goals and habits, I had hoped it would create a guiding experience that felt very visual for the user.
When it came to naming the app, I chose 21SUNS to evoke the following in regards to habits:
It’s long been said that it takes 21 days to create a habit
1 day = 1 sun
The name 21SUNS has a nice ring to it and feels like it fits nicely into a user’s daily experience (both using the app and not.)
4. Prototype + Test
Overview
Taking my latest hi-fi designs, I set out to create a prototype in order to test my designs for usability. The usability test would help me identify key changes that would need to be made before launch, as well as help me get some feedback on the branding and color palette I had chosen.
- Hi-Fi Prototype
- Hi-Fi Usability Test Findings
- Final Hi-Fi Designs + Prototype
Testing the hi-fi designs for usability
I created a prototype for the flow I wanted to test using Figma’s prototyping tool. Users would be able to interact with all screens needed throughout the flow.
Understanding the hi-fi usability test results
I conducted 5 remote usability tests to test the flow within the 21SUNS app for adding a habit and reflecting, AKA noting excuses and tracking your mood. These tests helped me understand how users interacted with little things like the navigation, as well as understood the concept of the cue, routine, and reward aspect of habit creating. It also gave great insight into how users would go about reflecting on their day and logging excuses that they set up in the habit creation flow.
Key Takeaways + Changes
Users want to be able to log each habit separately, but a habit and an obstacle together.
Users wanted to see their progress in multiple ways: today’s and a bird’s eye view.
A few other changes that were made:
Renaming 'Excuses’ to ‘Obstacles’
In a design critique, a colleague brought up the negative connotation that the word excuse holds and suggested obstacle as a replacement to lean into a positive growth mindset.
Removing the mood tracking feature
While beneficial, users didn’t see how it played into the overall goal and it felt too separate from the other actions being performed on the app.
Is that a new brand?
Why yes, it is. Thanks for noticing. 😄
In usability testing, I noticed that there was almost too much focus on the colors of the app. While users liked how ‘fun’ and ‘cute’ the colors were, they ultimately were a distraction — “Oh so if it’s this color here, it’s the same color here.” So I returned to the goal of simplicity and approachability and redesigned the brand and UI for 21SUNS.
I also feel that this branding leans more into my persona, a 29 year old woman who lives in LA who values visual simplicity, but also appreciates color.
Testing the new branding + hi-fi designs
I tested the latest hi-fidelity designs to make sure the new UI and branding resonated with my users, and in particular, I wanted to see how users responded to the logging a habit and excuse. This interaction was new and I wanted to clarify any potential confusion that might come up.
Key Takeaways + Changes
My final changes for this project revolved around improving the interactions throughout the app. I wanted everything to be clear and simple. The changes based on user feedback were as follows:
Obstacles are extremely personal
The habit loop needs to be reinforced
The action of logging a habit leaves room for confusion
Once these changes were made, I would be ready for my official v1.
Obstacles are extremely personal
The habit loop needs to be reinforced
The action of logging a habit leaves room for confusion
Creating the final designs
Armed with my usability test results and informed changes, I felt that the new branding and overall experience were improved, while still maintaining the simplicity and approachability of an app aimed at educating and supporting users in their journey to create new habits
What are the people saying?
“I would totally use this app!”
“I like how each element has a couple predefined options plus the ability to input your own.”
“Oh my god, I love the colors and vibe. It’s so fun and clean.”
So, what did I learn?
Designing an app that is near and dear to your heart is hard, but oh so rewarding.
If I may confess something: I wanted to build a habit app for myself. But the beauty of UX design is not in designing for yourself. It’s designing for the people. This app was born out of the needs that I saw in my research and backed up with research surrounding the psychology of building a habit.
I think that this project was a great exercise in staying true to the research, but also learning how to iterate on just about everything. I changed a lot of aspects of the overall design: from the branding to the structure of adding obstacles all because of what I was hearing from potential users. This project really hammered home the importance of listening to your users and getting creative where you need to be.
I’m looking forward to the next phase of development!