Habidoo is a concept app designed to track habits and analyze progress.
TEAM: Manikandan
ROLE: Product designer
DURATION: Nov 2022 - Feb 2023
TOOLS: Figma, Notion, Tokens Studio, ProtoPie
Objective
Habidoo - the ultimate habit-tracking app has been designed specifically to meet your habit-tracking needs, which offers a clean and minimalistic design with maximum customization and ease of use. Keep track of your progress with my weekly and monthly timelines, insightful statistics, and progress tracking. Intuitive user experience, combined with a host of advanced features, makes it the perfect tool to help you achieve your personal growth goals.
It all started with ...
If atomic habits by James Clear taught us one thing right up front, It’s about habits and how small life improvements today can have a drastic impact tomorrow. At first, I wanted to do my habit-tracking in Notion somehow, but it’s mere checkboxes. I wanted something more personalized. This motivated me to design my own, which would be a great addition to my portfolio, and also I could learn to use design tokens and design systems in depth.
A peek at our competitors' screen
To gain a thorough understanding of how Habidoo could stand out from the competition, I did a competitive analysis of other habit-tracking apps in the market. I asked myself: What do the competitors do? Where do they stand? USPs, and how Habidoo can stand out from them. I present here quick takeaways,
The process
-
Definition (problem or challenge)
-
Ideation (sticking to objective, user research, brainstorming solution)
-
Paper wireframes (scribbles and rough sketches of my ideas on app screens and functionalities)
-
Low-fi mockups (without going too much deeper into the colors, styles, and interactions, I try out perfecting the spacing, typo, visuals, and a few UI elements)
-
High-fi mockups (this is where the final mockups are made, which strictly follow the design system and design tokens where all the values for spacing, sizing, typo, colors, etc. are defined, Fully responsive, prototypes, etc. are taken care of)
First draft and why it doesn't work
Here’s what I expect from an ideal habit-tracking app,
-
Habit, name, progress, and streaks (because that’s what get people motivated)
-
Header, showing brand logo, hamburger menu, and profile or settings.
-
A block for navigating through time -either day-wise or week-wise.
After some scribbles and sketches, this is what I get, putting together the above data into a clean design. But that doesn't work!
Improved design with functionalities
Should habits be skippable?
-
Personally speaking, I don’t want to make habits skippable.
-
A habit is skipped meaning it’s been failed on that particular day. And the streak is broken. Whatever circumstance it may be, fail is a fail. A skip option brings in more excuses.
-
In case users need the option to skip, who’s going to ask? Mark it as done instead, so the streaks don’t get broken too.
Low-fidelity mockups
Branding
I began with some suggestions from AI, but I needed more names to be more satisfactory. After some iterations, Habidoo was born; Habit + do ⇒ Habidoo. And I thought the “doo” is fantastic and conveys the core of the application, to do (habits).
The logo also took a lot of iterations. Having three circles, two filled (habit is done), and one stroke (pending habit) makes it perfectly match with the name if the first circle is modified to look like 'D' - DOO from Habidoo.
Design Tokens
If atoms are the basic elements that fuse to form relatively complex organisms, Design tokens are considered quarks that combine to form an atom. Consider Buttons as an atom in a design system. Then the properties that describe its color, typo, spacing, sizing, radius, etc., would be tokenized and saved as design tokens. This defines an atom and its properties, making it easier in future works.
In this project, I used three tiers of tokens.
-
Base token: contains raw values
_hue.blue: 241, and blue.50: hsl($_hue.blue, 84%, 54%)
-
Component token: for components referring to base tokens
button.fg: $color.primary, or button.bg: $blue.10
-
State token: accounts for different states
button.active.bg: $blue.20
Design System
Spacing and Sizing
I used the 8x scale, where the default is set to 8px, and progressively increased - 8px, 16px, 24px, 32px, 40px, 56px, 64px, 80px. The same is tokenized in tokens studio as follows,
base_size: 8px,
size.1x: 8px, size.2x: 16px,
_button.size.sm: $size.4x
Color
I spent the maximum time here deciding on the palette and finding the colors that work perfectly—playing with saturation and lightness so that every color fits into the screens—then tokenized and synced into the design system.
Typography
Inter is chosen for its minimal, legible, and flexible characters, even at smaller sizes. Inter is also web-optimized, ensuring smooth UX. Six styles have been used - large, h1, h2, h3, body, and small- and two weights- regular and bold.
Iconography
Thanks to ionic.io for their libraries of free icons. The stroke version of the icons has been used for its ample breathing space. Each icon is componentized based on size (16px, 24px, 32px) and color (primary, secondary, and foreground).
UI Components
All the atoms - buttons, navigation bars, modals, lists, toggles, form elements, etc. are made and componentized for every possible variant. For elements like buttons that contain a lot (144) of variants in themselves, a base button component is created based on different sizes and then turned into the main button component. In this way, it's easier to maintain changes.
High Fidelity Mockups
Now that the design system is set up, it's just a jigsaw game of fitting pieces right into the frames. All the edge cases are designed in the mockup phase. Here is a glimpse of some of the screens.
Conclusion
Impact
Habidoo will be the ultimate habit-tracking application that makes you better every day. Analyzing habits and working to improve on them is now made easier via Habidoo's statistics page. Clean and minimal design, maximum customization, and ease of use with multiple timelines and views make it the perfect tool to grow in your personal life.
Next Steps
I want to work on the prototypes for the application in ProtoPie and master the new software. Also, I would like to add a challenges feature that lets anyone take up a challenge and compete with the world in building habits.
Outro
So happy to see you reach the end. I hope you enjoyed my project. Please leave a comment or add a suggestion, or a piece of feedback would be beneficial.
Reach me at manikandan9206@gmail.com
Please watch out for the entire project at Behance, Portfolio.