Case 031Mobile app design
Habit Tracker
A single Home screen for a habit tracker: a year laid out as a grid of yellow squares, with one prompt for the next check-in.
- Contribution
- Interface design
- Project status
- Interface design · Figma archive
01
My contribution
This file holds one screen I designed, the Home of a habit tracker, built around a calendar component. The year runs across it as a grid of squares, and the deeper the yellow, the more was done that day.
02
A year at a glance, one action below it
Habit timeline takes the top of the hierarchy: months across, days down, a year selector beside the title and a Less to More legend that explains the shades of yellow.
Below it, a single card turns that record into the next step. “Don't lose your habit score streak” leads straight to today's check-in, and the yellow plus button at the top is the only other strong colour on the screen.
