Early on my journey of becoming a self-taught UI/UX designer, I was lucky enough to have a chance to build a Habit Tracker with my friend — a developer. I wanted to apply all the knowledge I have learnt to that project. The question was how to make my product stand out with all the applications in Appstore?
Brief: Create a Habit Tracker app that helps user to not only create a habit but also make a to-do list inside.
Problems with current Habit-Tracker Apps
At first I set out to do research on users’ feedback about the existing Habit Tracker apps on Appstore. With a sample size of 28, I was able to determine what make them confused when using one:
What I wanted to give users
After researching on most applications in the Appstore, I decided to offer the following solutions for my upcoming Habit Tracker application:
- Intuitive interface enable user to track all habits and subtasks over a period of time
- Minimize the number of click when setting habit in an interface
- Setting feature where user could set reminder multiple times
- Highlight the progress of each habits by day, week and month to increase motivation to use the application everyday
Habit Tracker application design process
- Define problems and solutions
- Draw User flow diagram and Low fidelity wireframes
- Draw High fidelity wireframes and comfirm with the developer
- Prototype
- Develop product
- Launch
- Get feedbacks
Draw User flow diagram and Low fidelity wireframes
*User flow diagram:
My upcoming Habit Tracker application would have 3 main screens:
- Dashboard
- Weekly statistics
- Monthly statistics
I chose these 3 main screens because I wanted to focus on the progress of the habits created in chronological order: by day, by week and month. Users could track all habits in an intuitive way, “Ah, today I have these goals that need to be done”, “This week I already accomplished these goals so far”
*Low fidelity wireframes:
The most special feature of the application is the addition of small tasks (subtasks) in a habit, which will be displayed on the dashboard screen so that user could memorize and mark what has been completed in one day quickly.
The basic screens will look like this:
Draw High fidelity wireframes
*Dashboard:
*Create habit screen:
*Weekly statistics screen:
*Monthly statistics screen:
An user who was interviewed said that: “If I look into monthly review screen, I want to know how I progress day by day so I will have motivation to maintain it”. So the purpose of the monthly statistics screen is to highlight the process of completing habits and then creating motivation to maintain the goal in the next month.
Reflection
This project helped me to understand a lot of things when building an app from the beginning. As a designer, I have learned the following lessons:
- It is essential to understand the insight and needs of stakeholders including users through researching.
- How to group and name each component, saving it into assets tool to make the most of time designing
- When designing each element, it is important to think about every aspect of cases such as the space between two line of text. (At first I just think my friend — the developer will make them responsive but it turns out he just did exactly what I have on screen)
- Pay attention to design to fit all responsive size
- Finally I find it is important to actively listen to opinion and perspective of others, for example respecting the developer’s perspective
So…what will I do next?
At this time I will focus on getting feedbacks from users to improve the application in the next phase. Thanks for your attention to my case study, hope that I will help you some ways to get an application in the future.
Don’t forget to test out the app and give me feedback (download), if you have any concern, please feel free to contact me: thaomt1506@gmail.com
Thank you!
