Overview.
Being a product designer with the growth in the AI and Vibe coding I have always admired how the shift in the technology is taking place. Therefore, to really make use of the current market scenario i reframe the challenges by blending design, with Vibe coding and app design to have a fresh new perspective. — Built and deployed in just 10 days with the primary focus on the clarity of AI concepts, the integration and a step into the new AI age.
I have always admired how the great minds and people who have their part of success have been able to maintain a daily habit or routine which allowed them to focus on a particular habit and master them. Maintaining a proper habit is something which requires a lot of dedication and analyse to really understand where I stand. Previously I used to track my habits on a small notebook but when it comes to analysis that’s where I fail. That’s where the idea of HabitAI comes into play. I thought of integrating my nook for habit tracking and taking the help of AI to make my habit tracking journey better and smoother.
HabitAI is an AI agent digital habit tracking app that not just helps in maintaining a better daily and weekly habit. Other than that, it’s AI companion helps in analysing the habits tracked by the user over the weeks and provide better recommendations and suggestions to make make habit tracking seamless and more efficient. It acts as a partner, a mentor who allows the user to implement better habits in their life.
Problem Statement.
Objective.
Challenges & Constraints.
Business Constraints:
User Segment with Problem Statement.
Below is the market analysis interactive dashboard which I created using the data obtained from Notebook LLM.
You can scroll and go through the detailed research data.
Key Points from Research Data:
As from the data we can see that there is a huge market potential for the habit tracking app. However, the long term success and the drop rate of the app is significant. With almost 52% of the user abandon apps and only 28% are able to maintain a long term habits are some of the major issues which are identified.
Some of the key problems include — Retention issues, Manual Burden, Generic experience and Emotional impact.
Some of the most desired features include — Driven personalisation, dashboard, Automated tracking, data control and privacy and predictive analysis.
Solution.
Data Collection and Research.
Research and Inspiration:
Primary stage of my vibe coding started with creating a Notebook LLM notebook.
The initial source which was added to the Notebook LLM was provided from the report gathered from deep research done on Gemini about “Habit Trackers, their usage patterns, and the information on how to increase the productivity”.
To make my research more comprehensive I added more UGC sources from reddit, X, and quora to find the pain points of the users in the habit tracking space.
Putting all the sources in place, I started to research about AI first habit tracking app, what are the gaps present in the habit tracking applications, I summarised the user pain points from the sources which define about the user problems in habit tracking applications.
Using different questions I tried to Consolidate the research which can be used for creating the PRD in the next step. Some of the things which I researched:
Summarising the ways to evaluate what is considered as the good AI app idea. — One of the key idea which I got was to create a vertical AI agent.
I also tried to understand the various trends which are specific to the AI habit tracking applications.
Finally using the sources which I collected in Notebook LLM and the research data notes collected throughout the process I tried to outline some of the key features of the AI agent app for habit tracking.
The application which I took as the inspiration is TickTick App. The primary reason being:
It has a balance of clean design and powerful feature.
Moreover, I went with a clean and minimal design with attention to data-driven approach.
Consolidating Research
Consolidating the research I asked it to create an MVP with 2 core features from the list of features notebook LLM provided through the research which are most competitive and suitable for the AI agent habit tracking application. It suggested:
Deep personalisation and adaptive intelligence
Intelligence automation of tracking and management
Design Process.
Creating a PRD.
Finally I took all the information gathered and moved to Claude to create a PRD file for the project and this is what it came up with.
The Design vibe was clean and minimal interface with primary attention to data driven insights and the inspiration of app taken from TickTick as it holds the balance and simplicity therefore, reducing friction.
Creating a workspace in Firebase Studio
One of the primary constraints which I was having before the beginning of the project is the budget and therefore, to overcome that, I came up with the option to choose a no coding tool which will not charge me money. One of the obvious choice becomes firebase studio.
Now that I have the PRD file I can use that within firebase studio hence providing it all the necessary information for creating the application.
Generating Styleguides.
Based on the PRD document it gave me style guidelines and tech stack it will use to build the UI.
Initial app Design
Since, i haven't provided me any wireframes or screenshots for inspiration I left it completely on firebase to create the initial design.
Taking the initial design into consideration then i moved on to redesign that is where my product designer instincts would start to work.
When we create a new habit there is a side sheet on the desktop mode.
Added a circular progress bar which gives the percentage of total habits being ticked on that particular day.
Iterating in Firebase Studio.
Changing the Layout.
One of the first things I did was to change the layout of the HabitAI dashboard design. Wanted to have it a minimal look yet serves the purpose.
Created a streak chart where every dots will be marked even if the user checks one habit. It will be dark blue when user checks all the habits.
Added a new AI assistant button button which gives
Focusing more on responsive (smartphone) experience.
Today majority of the users are using smartphone as their primary device for tracking their habits. Therefore, I decided to focus on the smartphone experience as well and hence came up with this design.
Therefore, I decided to make sure the design is responsive when the mobile view is detected.
Making the webapp more responsive.
Errors I faced during making a responsive experience.
