Fitness habit tracker mobile interface

Summary

A fitness-focused habit tracker interface showing a seven-day checklist with progress rings for two activities (workout and cycling), status capsules for incomplete days, and motivational prompt cards below the fold.

Visual description

White-background iPhone interface titled "Habitual" with a top bar showing 9:41, notch, signal, and a settings gear. Below, a seven-day week grid (Monday-Sunday abbreviated) displays teal-green circles for completed days and filled-halfway rings in teal for partial completion; off-days show empty gray circles. Below the calendar, two large white cards each contain a half-circle progress ring in teal wrapping a grayscale icon (dumbbells for "Workout 1 hour"; bicycle for "Cycle 10 km") with sans-serif motivational copy: "Do a workout to keep your streak going!" and "Cycling helps me to stay focused." Pale teal accent color, expansive white space, and rounded corners throughout establish a calm, approachable energy. User avatar in top right.

Key takeaway

The double-duty design of the day-of-week grid: checkmarks signal completion, while ring-fill depth communicates partial progress, so one glance shows both binary completion and continuous progress. Pairing numeric activity cards below the calendar keeps habit goals from disappearing below the fold. The teal accent color is warm enough to feel supportive (not clinical) against the cool grayscale.

Reuse notes

A strong pattern for fitness, health, and productivity apps targeting casual users who need both quick-win visualization (the checklist) and motivational reinforcement (the activity cards). The progress-ring component scales well if displayed in grids; works for 1-5 tracked activities. Motivational copy tone prevents sterile data-heavy feel. Less ideal for expert users or high-volume habit trackers (>10 habits); dashboard density would break the calm layout.