1st Step
UI/UX Design | Jan-April 2023
A mobile app designed to track and assess progress of your habits
“40% of US adults set new year’s resolutions, but less than 10% of those who set resolutions keep their resolutions.”
OVERVIEW
Many people set goals every year, however many of those goals get abandoned in a matter of time. This project dives deeper into the realm of productivity to discover why people struggle with achieving their personal goals, and to see how I can present a solution through design.
Skills
Market Research
User Experience
Visual Design/UI
User Testing/Research
Prototyping
Tools
Figma/FigJam
Optimal Workshop
Miro
Google Forms
Zoom
INITIAL DESIGN QUESTION
How might we help people establish, organize, and track their task and progress to reach their personal goals?
DESK RESEARCH
The gap between setting and achieving goals
Based on secondary research, the “what to do” was quite easy to find. Then perhaps the issue is not with inaccessibility of knowledge, but rather could be found in understanding how people have tried incorporating these methods and where they’ve experienced roadblocks.
COMPETITIVE ANALYSIS
Exploring this industry space by analyzing common features of competitor solutions
SCREENER SURVEY & USER INTERVIEW
The search for the missing puzzle piece
To identify this gap, I decided to interview a group of goal setters to learn in-depth of their personal experiences towards their goal pursuits.
Research Goals
Understand the methods of how users approach and take action towards their goals
Understand users’ emotional journey and prior experiences behind goal pursuit
Uncover the factors that have encouraged or discouraged the users along the way
Discover the various types of tools people use to help them achieve their goals
83 people participated in the survey.
Top 3 tools used were to-do list, note-taking tool, and habit tracker.
Top 2 goal categories were productivity and physical health.
Participants preferred to use digital tool over physical tool.
93%
have set goals in the past 6 months
65%
thought goal setting brought them closer to achieving their goals
26%
thought goal setting rarely worked
The interviews were conducted in a semi-structured, moderated setting via Zoom with participants who met the following criteria.
From various ethnicities, gender, and salary brackets
Have experience setting goals in the past 6 month
Have used digital solutions to aid the process (preferably, if not physical)
RESEARCH WOES
Weeding out facts through empathy mapping
It wasn’t until empathy mapping that I noticed some of their statements contradicted from the stories they shared of their experiences. From that, I was able to focus on data that was more based on past behaviors than verbal statements.
🗣️
🏃🏻♀️
when sharing his daily schedule, his routine was based on specific times in a day
🙋🏻♂️ “I don’t tie a task to time”
she stopped using her physical tracker previously due to the time and effort it took to create it.
🙋🏼♀️ “I might go back to using a physical tracker”
USER INTERVIEW KEY TAKEAWAYS
The importance yet the difficulty of consistency
Upon analyzing the interview data, I noticed a huge emphasis on habits. 7 out of 8 participants believed that habit building was necessary to achieve their personal goals. Once a task becomes a habit and becomes integrated into their routine, they’ve mentioned that the task becomes easier to do as “it takes less mental energy.” However, there were significant pain points concerning habit building.
01
The challenge to keep going when motivation gets low
"when I miss multiple streaks in a row”
“not seeing notable changes”
“reminder notifications are so easy to ignore”
02
The challenge to log and track their progress consistently
“keeping a record can be time consuming”
“have days where I forget to record my progress”
USER PERSONA
Stay focused on the user
As a designer team of one, this persona was used throughout my design process as a reference point to ensure that my design choices stay aligned to user needs, goals and preferences.
REDEFINED DESIGN OPPORTUNITY
How might we ease the process of self-assessment and incorporate ways to encourage consistency for those who are trying to build new habits?
IDEATION
Translating research insights into solutions through user scenarios and stories.
Focusing on the user goals by writing out the user scenarios first, helped me to see the bigger picture in terms of what I wanted this product to achieve for the users. Upon dividing up the main tasks, I was able to freely brainstorm design ideas for each of the main tasks which was then used to write up my user stories as I finalized key features for the MVP.
MY NORTH STAR
Research insights that guided my design decisions
The following design mandates were prioritized and was what determined a lot of the decisions I made throughout the design process.
logging and tracking habits need to be low effort & easy
provide accountability functions between 1) system and user and 2) people and user
personalize the experience to increase engagement
reward system oriented — show insights of user’s progress
“not about physical reward but cognitive — when you actually reach the milestone you set, there’s a cognitive awareness of ‘i’m on the right track’ and this is what boosts dopamine in a healthy way”
- Huberman Lab Podcast
MINIMUM VIABLE PRODUCT
Focus on user engagement and motivation
Habit entry creation & management
Most basic function needed to track habits
Personal progress diary
A personal space for users to record moments of progress and achievements
Daily habit to-do list
Only see “today” list of habits for quick finding and logging
Accountability with friends
For those with shared habits, see each other’s daily progress and be able to react
Progress Statistics
See weekly and monthly progress data
Effective & personalized reminders
Option to receive reminders via SMS, and personalized reminder messages and cadence
As revealed during research, users were more likely to take action when the object they need to reach for is closer in proximity. Hence, designing for a mobile app was the most appropriate choice as there is no other digital device that stays within a person’s reach for the vast majority of the day.
USERFLOW & INFORMATION ARCHITECTURE
Mapping out the interactions between user actions & system inputs
Based on my user stories and identified MVP, I created key user flow to have a better understanding of how user goals would translate into digital interactions between the user and the extension.
Task flow 1: Create a habit entry
Task flow 2: Edit a habit entry
Task flow 3: View habit progress
Task flow 4: Add habit notes
Task flow 5: Invite a friend to a habit
Once key user flows have been mapped out, I was able to consolidate that information to create a site map which I referenced during user testing to verify whether navigation and labeling made sense to target users.
LOW-FIDELITY WIREFRAMES
Early design explorations
Primary navigation bar screens
Secondary navigation bar screens
USER TESTING
Positive tree testing results
Two tasks were presented of which participants had to navigate through both levels of navigation to reach the destination. For each task, there were also two different ways to reach its destination.
Task 1: 80% direct success (8/10) but minor issues
The task was to find the pathway to modify an existing habit.
Task 2: 100% direct success (10/10)
The task was to find the pathway to view progress of an existing habit.
The responses from the post-study question also reflected the study results as participants rated the difficulty level as either easy (50%) or very easy (50%).
While analyzing the results, I noticed a significant pattern: all successes stemmed from one pathway, despite offering two for both tasks. Contrary to my initial assumption, where I expected 'Today' to be more popular than 'My Habits,' the data showed the opposite. In a conversation with a participant, they explained, “based on the options, 'My Habits' seemed more intuitive; 'today' was less clear.”
Rather than rushing to implement changes based solely on this observation, I decided to further validate whether participants would continue to favor the 'my habits' pathway even after being exposed to visual mockups of the app during concept testing.
Early user testing uncovered taxonomy and information display issues, along with opportunities to enhance flexibility and efficiency.
The concept testing sessions were conducted with 4 participants in a moderated setting via Zoom. Participants were able to identify and explain the basic functionality of each key features without much issues. Especially in viewing the “Today” screen, they quickly knew that the screen was where they could view habits pertaining to today, and expected to perform the tree testing tasks through this pathway rather than going to “My Habits.”
01 Replace “goals” with “times per day” to be more specific of what information I am requiring of the target users for this field.
Target users were unsure of what to input in the “goals” section when creating a new habit entry. Hence, I chose a phrase that was more specific and even mentioned multiple times by the participants from this study.
02 Display the progress data in three buckets — completed, partially done, skipped.
In the initial progress screen design, I overlooked habits requiring multiple daily repetitions so only the completion rates were present. However, users also wanted to track partially completed days and felt it unfair to include this data in the 'skipped' category."
03 Increase visibility of the status tracker for each habit in the home tab.
The primary information target users wanted to see on the “Today” tab was the status for each of the habit entries that they need to complete for that day. Hence, rather than having it under the habit title as a subtext, I brought it out to the right and enlarged the numbers for higher visibility.
04 Simplify the filter selection process to reduce the number of taps that user needs to make.
The two major ways target users used the filtering system was to view by status or labels. The screen was already designed to separate incomplete from completed habit entries, so I only needed to focus on the labels. As label was the only category, it no longer made sense to introduce an entire separate filter modal hence I removed the filter button and introduced the labels as tags near the top of the screen for users to select easily.
05 Introduce shortcuts to quickly edit or delete habit entries for expert users.
Swipe left is an interaction that is used in mobile to introduce shortcuts for functions that are frequently used. I wanted to design the product system for beginners but also provide accelerators for users to quickly make changes to their habit entries without going the beginner route.
VISUAL DESIGN
UI design explorations
Translating wireframes into high-fidelity designs
USABILITY TESTING
Another round of testing to uncover deeper usability issues concerning error prevention and user mental models
01 Enhance contextual awareness to ensure users always know their current location when checking their status for multiple days, reducing the chances of marking completion for the wrong day.
1.1 Add dates on the “Daily” screen for the days that habits are scheduled to provide clarity on what date the user is making the update to.
1.2 By replacing the input stepper and progress bar with a system message, it takes away the need for the user to even think about whether action needs to be taken or not.
02 Further learning about the target user mental models to close the gap between the system and their real-life experiences.
2.1 Applying the principle of common area to indicate that the “Done” and “Reset” buttons are related to the input stepper. The previous button label and placement caused confusion, as users thought it would navigate them back home, despite the presence of a separate back button.
2.2 Changing the copy for the label creation button to be more specific to its action as users thought the button was related to creating the habit entry as it was also the last element on the screen.
Final Designs
Signing in
View today’s list of habits in “Today” & the complete list in “My Habits”
Create/edit a habit entry & view habit progress
Mark habit completion & delete habit
Record habit progress via text or image
Invite a friend to a habit for accountability and engagement
Next Steps
Conduct 2nd round of usability testing to see if the iterations actually resolved the issues by measuring task success rates.
Learnings & Gains
Competitive analysis was conducted too early in this process when neither my problem space nor my target users were identified, and had to invest additional time to analyze another product category that had relevance.
Assumptions can actually help progress the design process in providing a clearer direction towards the solution as long as they are tested and verified.
To not be so quick to change designs based on individual user feedback, but to notice patterns of repeated feedback.
The importance of running a pilot test that is as close to the real usability testing setting as possible to catch any logistical bumps prior to actual testing sessions.
