UX · Product Design Case Study

Droplet

Hydration through empathy.

Explore the prototype

A neurodivergent-aware iOS hydration companion that replaces shame, streaks, and friction with calm, low-effort cues.

Executive Summary

A water app that doesn't punish you for being human.

From rigid streaks to gentle re-entry

Droplet reimagines hydration tracking for neurodivergent users — students, remote workers, anyone whose days don't fit a 9-to-5 mold. The product replaces multi-step logging, punitive streaks, and generic notifications with one-tap glasses, calm visuals, and a pause-without-guilt model. Built end-to-end across research, design system, wireframes, and a high-fidelity iOS prototype.

See the working prototype
Project Role

End-to-end UX & UI

User research and persona synthesis · Journey mapping · Information architecture · Wireframing & iteration · Visual design system · High-fidelity iOS prototype

Target Platforms

iOS native, surface-first

iPhone (iOS 17+) with first-class home screen widget, Lock Screen complication, and Apple Watch face support — keeping hydration visible without ever opening the app.

01 · The Problem Space

Standard water apps quietly fail neurodivergent users.

Habit-tracking apps assume a stable routine, perfect attention, and a tolerance for friction. ADHD and autistic users meet a wall of multi-step logging, generic interval reminders, and red "missed goal" rings that turn an inconsistent week into a story of personal failure. The pattern is consistent: download, configure, miss two days, abandon.

Research surfaced five sequential breakdown moments — each one preventable with the right design choices.

Habit-app abandonment
Week-over-week retention curve
14%
Active at wk 4
Day 0 Wk 1 Wk 2 Wk 3 Wk 4 Wk 5
Generic habit apps lose 86% of users by week 4 — typically at the first missed-streak event.
02 · Visual Design Strategy

Calm surfaces. Honest progress. Zero shame.

A dark, low-stimulation interface that reads as a moment of breath rather than a productivity tool — colored glows for celebration, never for punishment.

Direction · Soft Signal

Warm glow, not red ring

Progress is communicated through luminance and color temperature, not absence. A goal ring that pulses gently when hit; a soft amber "behind today" state that never says you've failed.

Direction · Surface First

Logging in one tap from anywhere

Widget, Lock Screen, Watch, Dynamic Island — every entry point logs the most-used preset in a single touch. The full app is for review, not for the daily action.

+8 +8 WIDGET · APP · WATCH
Phase 01 · Research & Empathy

The User.

Two primary personas anchored the work — both neurodivergent, both already burned by water apps, both giving Droplet one more chance. Their journey through standard apps is a five-stage failure pattern that shaped every design decision that followed.

Research Summary
Methodology & scope

Semi-structured interviews with neurodivergent adults who had abandoned at least one habit-tracker, paired with a journey audit of three top-rated water apps. Synthesis through affinity mapping into two composite personas and a five-stage failure journey.

2
Primary personas
5
Journey stages mapped
User Personas

Who Droplet is built for.

Persona 01
Alex Johnson
"I'd love a water app, but every one I've tried just makes me feel behind."
Age
21
Role
Psychology student · part-time campus job
Location
Austin, Texas
Profile
ADHD · time-blind · gentle visuals
Bio

Full-time psych student juggling classes, a part-time job, and late-night study or gaming sessions. Self-care drops out the moment hyperfocus kicks in. Past planners and reminder apps have left a "I can't stick to anything" residue, so any tool that adds guilt gets uninstalled fast.

Goals

Build a near-automatic hydration habit during study blocks. Stay clear-headed in afternoon classes. Use an app that feels supportive — not one that tracks every "broken streak." Cut down the number of self-care apps by surfacing cues where Alex already looks: lock screen, watch.

Pain Points

Hyperfocus erases hours. Multi-step logging (pick drink → adjust oz → confirm) feels like too much in the moment. Generic interval notifications get muted by week two. Red "you missed your goal" rings trigger shame and outright app abandonment.

Behaviors

Checks the phone constantly between tasks but rarely opens wellness apps unless something is right there on the lock screen. Drinks big bursts when reminded, then forgets for hours. Strong preference for one-tap actions — widget or notification — over navigating screens.

Persona 02
Jordan Rivera
"My schedule changes every week. Apps that assume a 9-to-5 break first."
Age
29
Role
Remote product designer at a distributed company
Location
Denver, Colorado
Profile
ADHD · likely autistic traits · variable schedule
Bio

Neurodivergent remote designer whose week shifts with project demands and time zones. Some days are back-to-back calls; others are deep-focus stretches into the night. Has tried — and abandoned — many habit trackers that demanded more executive function than they returned.

Goals

Stable energy and focus across long workdays via consistent hydration. A tool that adapts to "modes" — meeting-heavy, travel, low-energy — without manual reconfiguration. Copy and visuals that acknowledge neurodivergent realities. Trend visibility without daily-completion pressure.

Pain Points

Standard apps assume stable hours; reminders fire at irrelevant times. Complex setup, detailed analytics, gamified challenges become another project. Strict streaks reset all prior effort after a few missed days. Decision fatigue around exact ounces and drink types.

Behaviors

Switches between laptop, phone, and watch — prefers widget/complication entry points. Uses calendar blocks and focus modes; tools that align with these fit the day better. Pauses routines during travel or crunch and needs guilt-free re-entry. Reads microcopy closely; sensitive to scolding language.

User Journey Map

Where standard apps quietly break.

A composite five-stage journey through a generic top-rated water app — synthesized from interviews with Alex, Jordan, and 4 additional participants.

Stage 01
Discovery & Download
Stage 02
Onboarding
Stage 03
First Week
Stage 04
Breakdown Moment
Stage 05
Re-engagement & Drop-off
😐
Cautiously optimistic

Downloads after seeing it recommended for focus. Hopes it might be different this time.

No language signals it understands irregular routines or low-friction needs.
🟡
Mild frustration

Multi-step setup: weight, activity, daily goal, reminder cadence. No schedule modes for different day types.

Sequential decisions tax executive function before the first log.
🟠
Reminders get muted

Generic interval pings fire during hyperfocus or meetings. Logging requires open → pick → adjust → confirm.

No persistent passive cue keeps hydration visible when the app is closed.
🔴
Streak resets, shame

Two missed days. Streak reset to zero. Red "missed goal" rings. No validating copy, no recovery path.

All-or-nothing punishes inconsistency in users already sensitized to "failing."
Deletes the app

One halfhearted log, then revokes notifications after a reminder fires during a client call.

Reinforces the belief that they're the problem — not the app.
Key Insights

Three principles that shaped Droplet.

Insight 01
One-tap, surface-first logging

The single most-used preset is logged from a widget, Lock Screen, or Watch face — never requiring an app open. Logging during hyperfocus has to be muscle-memory, not a flow.

Insight 02
No streaks. No red rings.

Progress is celebrated when it happens; absence is acknowledged with calm language ("a busy day is okay") and a one-glass re-entry — never with a punitive reset.

Insight 03
Schedule that bends, not breaks

Workday, travel, low-energy, and rest modes change what reminders fire and when — without manual reconfiguration. The app adapts; the user doesn't.

Phase 02 · Foundations

Design System.

A complete, dark-first design language for Droplet — 26 color tokens, an Epilogue type scale, primitive components, and an icon set, all engineered to feel calm at full saturation.

Color Palette 01 · Foundation

Backgrounds & Surfaces
App Background
#0F1629
App canvas
Deep Background
#060d1a
Section recess
Surface
#1E293B
Card / sheet
Surface Sheet
#1a2540
Bottom sheet
Brand Accent · Blue
Primary
#4DA6FF
Brand accent
Pressed
#6FB8FF
Pressed / hover
Primary Soft
rgba(77,166,255,0.12)
Tint background
CTA Text
#071422
Text on primary
Status & State
Success
#3BB273
Goal achieved
Success Soft
rgba(59,178,115,0.14)
Success tint
Warning
#C49366
Behind / nudge
Warning Soft
rgba(183,121,31,0.14)
Warning tint

Typography 02 · Foundation

Display
31px · w700
Ring number
Droplet
Screen Title
22px · w700
Home heading
Hydration through empathy
Brand
19px · w700
App name in chrome
Droplet
Button LG
17px · w700
Large CTA
Log 8 oz
Body Semibold
14px · w600
Log row values
+12 oz · Bottle · 10:30 AM
Caption
11px · w500
Timestamps
Last logged 14 min ago
Micro Bold
10px · w700
Section labels
Recent · Workday

Component Library 03 · Primitives

Buttons
Input
Segmented
Week
Month
Year
Toggle & Mode Pill
Workday
Layout · Quick Log Sheet
Log Water
×
8 oz · Glass
16 oz · Bottle
24 oz · Tumbler
Custom

Iconography 04 · Foundation

Custom-drawn 1.6–1.8px stroke icons sized 22px @ 1×, optical-aligned to the 8px grid.

Art Direction 05 · Voice

Calm motion. Gentle voice. Soft glow over hard edges.

Every animation curves on cubic-bezier(0.2, 0.8, 0.2, 1) — quick to start, slow to settle. Sheets enter from below in 380ms. Toasts fade rather than snap. The progress ring uses a 700ms stroke-dashoffset transition tied to a colored drop-shadow that swaps from primary blue to success green when the goal is hit.

Microcopy never blames. "A busy day is okay. You can always start again with one glass." replaces "You missed your goal." The result is a system that feels measured and careful at every interaction layer.

Phase 03 · Structure

Wireframes.

Translating research insights into structural blueprints — from a tightly scoped information architecture to mid-fidelity flows that proved out the one-tap and recovery-nudge patterns before any visual polish was applied.

Information Architecture

Three tabs. No deeper than two screens.

A deliberately flat hierarchy — every primary action reachable in one tap from the home tab, every secondary action one tab swap away.

Droplet · iOS App
Today
Ring · presets · recent log · mode pill · quick-log sheet
History
Week / month / year segmented · day-row drilldown
Settings
Goal · modes · reminder windows · units
Primary node
Today tab — opens to ring + amount selector. 80% of sessions end here.
Secondary node
History tab — passive review surface. Read-only by default.
Tertiary node
Settings tab — schedule modes and goal. Touched once at setup, rarely after.
Low-Fidelity Sketching

Four screen archetypes.

Pre-fidelity layout passes — proving structure and information density before any styling was applied.

Start Screen
Home · Default
Quick Log Sheet
History · Week
Mid-Fidelity Showcase

Two flows that proved the model.

The Home screen and Quick Log sheet — annotated mid-fi mockups that locked structural decisions before visual design.

Home · In Progress
droplet Workday
57% 46 of 80 oz
8
16
24
···
+ Log 8 oz
+16 oz · Bottle12:10 PM
+8 oz · Glass10:30 AM
+12 oz · Mug9:00 AM
Annotation 01
The ring uses a colored drop-shadow that swaps from primary blue to success green at 100% — celebration through luminance, not iconography.
Annotation 02
Amount presets appear as 4 horizontal pills above the CTA. The active preset writes itself into the CTA label ("Log 8 oz") so the action stays unambiguous.
Annotation 03
Recent logs are read-only with a single inline Undo on the most recent — no edit, no archive, no friction.
Annotation 04
The sheet enters from below in 380ms with the dim layer fading at 240ms — calm, not abrupt.
Annotation 05
2×2 preset grid with one slot reserved for a custom amount toggle. Selected state changes both background tint and CTA label simultaneously.
Annotation 06
Dismissing the sheet does not undo a log — only the explicit Undo on the recent row reverses the action. Predictability over cleverness.
Quick Log · Sheet
droplet Workday
Log Water
8 oz · Glass
16 oz · Bottle
24 oz · Tumbler
Custom
Log 24 oz
Design Iteration Logs

What changed, and why.

Feedback Loop

Three rounds of usability tests with 6 participants surfaced a consistent objection: even gentle "you're behind" framing felt judgmental. Copy and visual treatment for the under-goal state were rewritten to remove any temporal language.

"The amber color and the 'busy day is okay' line was the first thing in any tracker that didn't feel like a teacher checking my homework." — P3 · Round 2
Technical & Structural Changes
  • Removed the streak counter entirely from the data model — not just hidden in UI.
  • Collapsed onboarding from 5 screens to 1 with sensible defaults; settings absorbs the rest.
  • Replaced "missed goal" red ring with a soft amber recovery card that fires a single, shame-free nudge.
  • Schedule modes (Workday, Travel, Low-Energy, Rest) became first-class data, not a settings checkbox.
  • Quick Log sheet became reachable from the widget, Lock Screen, and Dynamic Island — not just from the app.
See it working
Phase 04 · Interactive Prototype

Prototype.

A high-fidelity, click-through iOS prototype built directly in the design system — every primitive, every motion curve, every microcopy line ready for stakeholder review and engineering handoff.

Interactive Component

Droplet · iOS Prototype

Tap through the full Today / History / Settings flow including the Quick Log sheet, recovery nudge, and goal-hit celebration.

Open in new tab
Droplet · Combined Prototype
Core Interaction Flows

Two flows. Both shame-free.

Flow 01

Quick Log · One-tap from anywhere

The primary action. Logs the most-used preset in a single tap with optimistic UI, a frosted-glass success toast, and an inline Undo on the most recent row.

1
User taps the + Log 8 oz CTA — or activates from widget, Lock Screen, or Watch.
2
Ring fills with a 700ms eased stroke transition. Frosted-glass toast confirms "8 oz logged" for 2.4s.
3
Recent log appears at top of list with a 16px Undo affordance — one-tap reverse, no confirmation.
4
If goal is hit, ring color swaps blue → green and pulses once at scale(1.06).
Flow 02

Recovery Nudge · No streaks, no shame

Triggered when consumption is below 35% after 2 PM. A calm amber card replaces what would be a "missed goal" red state in any other app.

1
Behind state detected — not "missed", just "behind." Recovery card slides into position above amount selector.
2
Card reads: "A busy day is okay. You can always start again with one glass."
3
A single tap on the inline pill logs an 8 oz glass and dismisses the card with a soft fade. No badge, no streak, no notification.