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.
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
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.
When users hide streak count, they also hide the corresponding badge.
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 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 is shown when a user taps on Streaks for the first time after achieving a milestone.
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).
