HiDrate
A hydration tracker designed so a missed day doesn't undo the habit, with the day shown as tiles you can count instead of a percentage.
- Type
- Health and habits, mobile app
- Role
- Product Designer
- Timeline
- 4 weeks, concept to prototype
- Tools
- Figma, Figma Prototyping
count tiles, not percent
nothing resets
no formula, no claims
Overview
HiDrate is a mobile app for drinking enough water every day. I designed the whole first version: setting a goal, logging a drink, gentle reminders, and a weekly view, for a small health-app studio that wanted a tracker people would still open after the first week.
Problem
Water trackers are easy to start and easy to drop. The ones I tried either buzz every hour or keep a streak that resets to zero the first busy day. An hourly alarm is easy to mute, and a reset turns one missed day into a reason to quit. A percentage ring doesn't help either: '60%' doesn't tell you whether one more glass is enough.
Process
- 01I made the unit visible. The day is a grid of pool tiles, one tile per 100 ml, so a 2 L goal is 20 tiles and a glass fills two and a half. You can count what's left instead of doing math on a percentage.
- 02I made logging one tap. Two buttons cover the usual sizes, a 250 ml glass and a 500 ml bottle, and a third takes any amount. The tiles a glass would fill, two and a half of them, show in yellow before you tap.
- 03I tied reminders to moments in the day instead of a timer: after waking, before lunch, mid-afternoon, after a workout. Quiet hours are on by default, and once the goal is met, the rest of the day's nudges stay quiet.
- 04I replaced the streak with a weekly rhythm. The week shows seven bars and a count, 5 of 7 days at your goal, and a short day is one short bar, not a reset. When a day comes up short, the app suggests a fix, like moving a nudge that keeps getting snoozed.
- 05I let people set their own goal and offered a smaller start, with no body-weight formula and no health claims. The app tracks a habit; it doesn't prescribe how much anyone should drink.
The habit counter, twice
v1: one busy day, back to zero
v2: a short day is a short bar
Design system
Pool tiles carry the brand: aqua tiles (#1fb5c4) on grey grout, filling from the bottom row up like water in a glass. The ground is a cool white (#f6f8f7) and the ink a deep pool navy (#0e2a3b), which is also the color of every primary action. One warm color, float yellow (#ffcf3f), marks what's next: the tiles a glass would fill and the next nudge. Type is Lexend, chosen for easy reading at a glance, with tabular figures for every amount. Cards round to 20px and tiles to 8px.
- Ground#f6f8f7
- Pool navy, act#0e2a3b
- Tile aqua#1fb5c4
- Grout#cfdcde
- Float yellow#ffcf3f
Outcome
I designed and prototyped onboarding, Today, Week, and Nudges, plus the tile component the whole app is built on. Before build, I'd test the weekly rhythm against a streak with people over three weeks, to see whether more of them are still logging in week three.
Reflection
The tiles work for a 2 L goal and start to strain above it. At 3.5 L the grid is 35 tiles, the Today screen loses its room, and counting stops being quick. I haven't designed the large-goal version yet; my guess is bigger tiles worth 250 ml each, a glass per tile, but I'd want to see people use it before deciding.