Inspiration
The idea for the project came from trying to build a good product based on a simple idea. And with habit tracking, it is something I struggle with now n then. And someone who'e passionate abt games, I wanted to build something that'll make the habit progression feel more like a game and give joyful experience to the users. So, the inspiration has been result of various things that I like and affect me personally like sticking to certain habits over a long term.
What it does
It helps individuals to track various routines that can then turn into habits. Users can log a certain habit in the app, and do daily check-ins and track their habits. Instead of just giving them a simple check-box to check in their habits, the app uses the mantra Cue-Routine-Reward cycle to motivate users to keep up with their habits daily. It provides a gamified experience to users so that the process of creating, tracking, checking habits feel more like a joy and a game with soothing ui/ux and rewards.
Some Features:
- Habit Buddy: Doing something alone is always a struggle. But when you've someone that accompanies you on your journey, it feels good. That's why I added Habit Buddy i.e associated with each habit user creates, and grows and levels up as user progresses in the habit. And it's really really cute :)
- Daily Reminders: App sends daily nudges at the time specified by the user in habit reminders.
- Home widgets: To give more visibility into users habit progress, users can add habit home widgets to home screen.
How we built it
To achieve a gamified experience with soothing ui/ux, I used Flutter to build the app and Rive to power the motion graphics inside the app. The initial mvp versions of the app were first sketched out in Figma, procreate, then I would implement them in the app and get a feel for the whole ui/ux. Each screen went through at least 5-6 iterations over the entire time, and but with each iteration, the design choices, graphics style for the app, and the kind of feel I wanted to introduce in the app was being more clear. For motion graphics, the sketches were done in something like procreate and affinity designer to get rough idea of the animation, then implemented in Rive app which were exported as runtime controllable animations for Flutter.
Each feature of the app has been well thought over and also went through quite a few iterations to make it fit within the timeframe for the hackathon. But all features try to work towards a single goal of gamification.
Challenges we ran into
Deciding on the overall theme of the app, graphic style, flow and feel of the whole app was really hard to achieve. I started the project with simple goal of building on a simple idea but doing it extremely well. So, designing everything that feels joyful and consistent was very challenging as I'm not a full fledged designer. I had to go out of my comfort zone to create the designs that you see in the app, iterate over them almost 5-6 times, find inspirations and get idea of what makes an app feel joyful, every micro-macro interaction, fonts, animations, and the variety in the flow.
I never before used Figma to this extent where I would first do 2-3 steps sketches of an screen and then implement it in the app. The whole process was rewarding but also very challenging.
Major part of the app is its motion graphics and other graphical assets like habit buddy character you see in the app. Even though I'm a huge nerd when it comes to gaming, animations, and building something fun, I'm not an animator. But this time, I had to become both designer<->animator to create the motion graphics inside the app. Learning Rive for creating those graphics has been one of the most rewarding and challenging experience during this project. Finding references, inspiration and building consistent art style for the app was also very difficult to achive but with time things became more clear.
And when it comes to features, I had lots of ideas to make app more fun and help users in various ways to keep up with their habits. But, over time I had to strip down the features I planned already or were added in experimentation phase like habit buddy customizations due to time constraints. Letting go of the features was hard but it helped me make more time for things that were more critical to the overall functionailty and feel of the app.
Accomplishments that we're proud of
- Turning a simple idea into something really fun to use product with a gamified experience building from the ground up.
- Coming up with different step-methods to get my ideas into figma, doing right amount of experimentation, and from there taking those to the app without wasting time and saving resources.
- Learning motion graphics tool like Rive app, procreate, affinity designer to help create the motion graphics and other graphical assets for the app. All of the graphical assets inside the app (except the Fire streak animation) were designed, built and animated by me using these tools.
- Complete shift from a developer mindset to a product developer/designer mindset.
What we learned
That the ideas doesn't need to be glamorous to feel fun. A simple idea i.e well executed can be thousand times better than the app that does more but at the cost of ui/ux and the feel. And developers can be more than just developers and become a full fledged product developer/designer with enough time and enthusiasm and love for their craft.
What's next for Habit Tracker : Build Routines
I'm going to improve the individual habits tracking experience to be more fun and engaging with features that alert users of the habits and track their progress. And later on I want to extend it beyond individual habits and move into the social habits area. I want it to become a place for both individuals as well as friends, partners and communities to build shared habits.
Log in or sign up for Devpost to join the conversation.