Nobis et et aliquid corrupti qui odit dicta. Nisi et possimus repudiandae et. Optio sed


To help you with some context, read this page while using this prototype.

Streaks are meant to improve engagement among users. They will be related to all kinds of tracking - food, weight, activity or health checks.
Every day users track anything for the first time that day, streak number increases in 1. Every day they don't track anything at all, streaks are zeroed.
If users miss a streak, go back to that missing day, and add tracking data for that day, it won't count as a streak.

Streak Module on Track Screen


This feature will be placed right below our main tracking dashboard.

We have, in order:

• Streak Badge (see all possible badges below)

• Streaks, in Grey 1, Montserrat Regular 13

• Streaks number

• Show/Hide icon

• "New" tag


Streaks seen with "new" tag

Streaks seen without "new" tag

Streaks seen without "new" tag + notification

When users hit a milestone, we show a 4 points Red dot to indicate that users should tap that area. This is shown until users tap it.

Streaks hidden

When users hide streak count, they also hide the corresponding badge.


Progress Card

Progress card is shown whenever users tap Streaks - unless they have just accomplished a streak goal, when it is shown "Success Card".
It is colored according to the last badge achieved by the user.
It shows current progress in relationship to the next badge to be achieved.
Progress bar is colored in a gradient from current badge's color to next badge's color.
Next badge pulses to indicate "in progress".
It shows user's record and the amount of other users who also share this same record.
Users are able to share it in community or close it.


Streaks progression

Streaks progression bar should go from current badge's color to next badge's color. However, it should work like a masked area that slowly revelas the new color and not a perfect gradient between the two colors that just gets resized.

Success Card

Success card is shown when a user taps on Streaks for the first time after achieving a milestone.


New Card


Dark mode

Top bar dark mode has black background and Off-White text. For the icon, color is Grey 1 when in "hide" mode and Off-White when in "show" mode.

The other elements, like the cards, basically invert text and background colors (text goes from Grey 1 to Off-White and Background goes from White to Black) and adjust CTA contrast (Invert White and Calorie Command 1). All the other elements remain the same (top section, gems, bar).

Figma File for Specification

Related Content

Overall Concepts and Guidelines

Hierarchy and Wayfinding

Pop Up IAM