top of page
Habitat
Team
Isabella Raffo Pedraza
Jun-Ha Kim
Michelle Yi
Nathan Chan
Sophia Kim
Taylor Chan
Role
UX/UI Designer
Timeline
Sep - Dec 2024
Skills
Figma
User Research
Interaction Design
Prototyping
Design System
The Problem
Many people struggle with staying consistent and get discouraged when attempting to keep accountability with daily habits.
Although many habit-tracking apps are currently on the market, most lack the flexibility and customization to keep a diverse audience engaged and motivated.
In this design project, we aim to help users achieve their goals sustainably by incorporating personalization and behavioral science principles.
How might we design a habit-tracking experience that leverages personalization and behavioral science to keep a diverse audience consistently engaged and motivated to achieve their goals?
Our Design Process
Here are the steps we followed...
1. Identify
2. Research
3. Ideate
4. Create
5. Reflect & Evaluate
Research
Competitive Analysis
We conducted a competitive analysis of existing habit-tracking apps to understand the market landscape and identify opportunities for improvement.
Popular platforms like Habitica, Productive, and Finch were evaluated based on their features, such as habit tracking, educational material, gamification elements, and community.
Habit Tracking
Visualizations
Gamification
Educational Materials
Community
Mood Tracking
To-Do Lists
Journaling
Way of Life
Onrise
Habitify
Finch
Proddy
Done
Habit Tracking
Visualizations
Gamification
Educational Materials
Community
Mood Tracking
To-Do Lists
Journaling
Habitica
Productive
(Not Boring)
Atoms
Habit Rabbit
everyday
Secondary Research
Our secondary research focused on exploring what a habit is and the principles of habit formation.
These were some of our key findings:
-
Habit: a repetitive behavior that is influenced by a trigger and becomes automated over time (Stawartz et. al 2015)
-
Most apps focus on habit tracking over habit formation (Stawartz et. al, 2015)
-
Habits can change but don’t actually go away (Delude, 2005)
-
Habits take around 18-254 days to form (Lally et.al, 2009)
User Interviews
We interviewed 18 college students, including those with experience in habit tracking and those with no prior experience.
Some of the questions we asked were:
We interviewed 18 college students, including those with experience in habit tracking and those with no prior experience.
Some of the questions we asked were:
How would you define a habit? What makes it different than a task?
Can you tell me about a time when you wanted to implement a new habit?
Would you want to share your progress with others?
Do you have a preferred a habit tracking tool you use currently?
Do you prioritize aesthetics or functionality?
User Insights
Insight 5:
users prefer to engage with habit tracking tools that prioritize functionality and ease of use over aesthetics.
Insight 4:
students value community features because they find external motivators help them stay accountable
Insight 3:
successful habit formation requires methods to maintain motivation and consistency, like reminders and rewards
Insight 2:
college students are especially susceptible to social pressures, which can lead to forming positive and negative habits
Insight 1:
students find habit tracking apps to be demanding, overwhelming, and timely, so it is challenging to integrate it into their routines
Ideation
Information Architecture
We began developing the information architecture to determine which features to include in our habit-tracking app based on our user research.
This process was challenging because we aimed to create a versatile and engaging habit tracker while avoiding feature overload that could overwhelm users.
Creating a Brand
To create ‘Habitat’, we went through the following process:
Each team member created a mood board.
A common theme among us was a playful, colorful, and rounded style, as we felt this would make the habit-tracking app feel less intimidating and overwhelming.
We decided to add friendly illustrations to design would foster a welcoming atmosphere.
We finalized a forest theme and decided on the name "Habitat," which led us to illustrate various animals and nature elements from the forest as characters predominantly using soft and pastel colors, and rounded edges.
Search
Colors
Type System
Font Family
Nunito
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
Quicksand
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
Font Family
Habitat
Habitat
Elements
Illustrations
Icon Library
Lo-Fi Wireframes
With a clear vision of our branding and overall theme, we moved on to ideation sketches, which evolved into low/mid-fidelity wireframes in Figma to refine our concepts and user flows.
My focus was on designing the "Analytics" user flow and prototypes, while working collaboratively to provide feedback and ideate on other user flows as well.
The Solution
Habitat
Habitat is a habit-tracking app designed to help users achieve their goals sustainably through personalization and behavioral science.
This app goes beyond traditional habit trackers by offering flexible, customizable features tailored to diverse user needs.
Onboarding & Add a Habit
The onboarding guides the user through adding their first habit.
When adding a habit, you have several options to personalize it, such as selecting an icon, choosing a color, setting the time(s) of day, specifying a quantity, tracking streaks, and creating personalized reminders tailored to your preferences.
Friendly Welcome
Habit Customization
Home
When navigating through the home page:
-
Weekly calendar at the top provides a clear overview of weekly progress.
-
Habits are organized by time of day to reduce clutter during tracking.
-
Users can delete, edit, or automate mastered habits.
-
Social challenges with friends offer external motivation and shared habit-building.
Loading Screens with Educational Content
Manage Habits
Social Challenges
Timer
The timer is a feature, also found on the home page, designed to help users stay on task by creating structured time blocks, fostering a sense of accountability and reducing distractions.
-
Users can set personalized goals or focus areas for each session.
-
Timer lengths are adjustable to fit different workflows.
-
Breaks tasks into intervals to support effective time management and progress toward larger goals.
Easily Add Intentions to Sessions
Adjust the Time to Session
Animated Timer
Explore
The Explore page is designed to encourage discovery and learning by connecting users with curated resources and ideas to enhance their habit-tracking journey.
-
Recommends habits based on the user’s existing habits.
-
Features trending articles with tips, insights, and motivation.
-
Includes a search tool with tailored results for habits or articles.
Personalized Habit Recommendations
Trending Habit Articles
Search & Discover
Analytics
The Analytics page gives users a clear visual summary of their habit progress, helping motivate consistency through tracked achievements.
-
Summarizes daily progress by showing completed and remaining habits.
-
Offers detailed stats across weekly, monthly, and yearly timelines.
-
Highlights recent trends to celebrate progress and identify areas for improvement.
User’s Statistics
Recent Trends with Visual Graphs
Profile
When navigating through the profile:
-
Users can personalize their profile by choosing an avatar.
-
Option to add an accountability partner and send nudges to stay on track.
-
View daily habits completed with a partner to build shared progress.
-
Add friends and see recent community activity to encourage social support.
Change Avatar
Accountability Partner
Add Friends
Reflection
What Have I Learned?
1. Building a brand and design system from scratch.
-
Collaborated to create a cohesive yet distinctive brand identity that aligned with user needs and project goals.
-
Strengthened my creativity and UX/UI skills by designing visual elements that brought the system to life with intention and consistency.
2. Working with more complex prototyping on Figma.
-
Explored advanced tools to build interactive, realistic user flows that clearly communicated design intent.
-
Grew by collaborating with an ambitious, experienced team and pushing my prototyping skills further.
3. Working on a highly illustrated project.
-
Co-developed an illustration-driven brand identity that was both visually rich and purposeful.
-
Learned to balance strong visuals with usability, enhancing engagement without overwhelming the interface.
bottom of page