Habit Tracker in New Tab

Mares Zhar

Fullstack Engineer
Product Designer
Adobe Illustrator
Adobe Photoshop
Figma
Firebase
Vue.js

The Problem

I tried 100+ habit tracking apps, but none stuck. Eventually, one or more of these would happen:

  • 😅 I would forget to check in.
  • 🔥 Breaking a long streak would kill my motivation.
  • 🐺 Working towards new habits without friends got lonely.

The solution

After 2 weeks of iterative design (analysis + research + prototyping + building), I built my own habit tracker, addressing the 3 core problems with these respective fixes:

  • 🕵️ Put the tracker in a place I see all the time: My browser's New Tab.
  • 🤑 Focus on weekly and annual metrics that reward progress instead of perfection.
  • 👯 Support shared habits and add a leaderboard to compete with friends.

Outcomes

Habit Tracker (Light Mode)



The version above is the latest redesign of the MVP I originally built. Some improvements include:

  • You only see one habit at a time (the one you have to do now), so it's no longer necessary to scroll through all your habits to find the one to mark complete.
  • Progress bars for XP points earned are now always visible (no need to hover anymore)
  • There's a column with stat summaries and easy access to other pages.
  • Shared habits now have their own ranking (you could be beating a friend at some habit, but not another).

Habit Tracker (Dark Mode)

This was version 1.0 of the tracker. (Screens for the leaderboard, habits list, and settings sections are not included in this presentation.)



Thank You for Reading!

Have any questions about any choices I made, or want to learn about some detail not covered here? Just reach out, and I'll be happy to share more :) ❤️

2022

Partner With Mares
View Services

More Projects by Mares