Three numbers that run the whole app
WHOOP's band has no screen, which forces the app to carry the entire product. It solves this by reducing physiology to three headline metrics — Recovery, Strain, and Sleep — and giving each a distinct visual encoding you learn once. Recovery is a percentage inside a ring, color-banded green, yellow, and red. Strain rides a 0 to 21 scale rendered in cool blues that build through the day. Sleep is a performance percentage against your calculated need. Everything deeper hangs off these three anchors, so the home screen answers 'how am I today' before you scroll.
The daily Recovery ring is the emotional and navigational hub. It greets you each morning as a single large dial, and its color sets the tone for the coaching that follows — a red morning nudges you toward rest, a green one toward pushing Strain. This is a masterclass in progressive disclosure: one glanceable dial on top, with tap-to-expand breakdowns of HRV, resting heart rate, respiratory rate, and sleep stages waiting underneath for the users who want them.
A dark, data-dense canvas built for graphs
WHOOP commits fully to a dark theme, and it is a functional choice rather than a stylistic one. Against near-black backgrounds, the recovery greens, strain blues, and sleep purples read as signal, and the many trend graphs — HRV over weeks, strain versus recovery, sleep debt accumulating — gain contrast without heavy gridlines. Charts favor thin lines, subtle gradients under the curve, and sparse axis labels, letting the shape of the data communicate faster than the numbers do.
The information architecture leans on a small set of Overview, Strain, Recovery, and Sleep tabs, each opening into scrollable cards that mix a headline figure with its supporting chart. WHOOP resists the temptation to show every metric at once; instead each card is a self-contained story — a number, its trend, and a one-line interpretation. For anyone designing a quantified-self or analytics product, it is a clean example of pairing every raw metric with an at-a-glance visualization and a plain-language takeaway.
Coaching that turns data into a decision
Where WHOOP separates from a passive tracker is the Strain Coach and the weekly and monthly Performance Assessments. Strain Coach gives you a target exertion range for the day based on your morning recovery, drawn as a goal band you fill as you move — the app is not just reporting, it is prescribing a number to aim at. The periodic assessments compile the week into a digestible report of trends and streaks, reframing scattered daily readings as progress you can act on.
The Journal closes the loop by letting users log behaviors — caffeine, alcohol, screen time, late meals — which WHOOP later correlates against recovery to surface personalized insights like 'you recover better on days you avoid alcohol'. Presenting causal-feeling findings from a simple checklist input is a subtle, powerful UX move: minimal data entry on the user's side, meaningful narrative payoff on the app's side. That input-to-insight ratio is the pattern worth studying.
Frequently asked questions
Why does WHOOP use a dark theme throughout?
It is functional. The near-black canvas maximizes contrast for WHOOP's color-coded recovery, strain, and sleep metrics and its many trend graphs, so the data itself becomes the brightest thing on screen.
How many WHOOP screens does dezzayn have?
dezzayn has 218 WHOOP iOS screens covering the recovery ring, strain and sleep dashboards, trend graphs, Strain Coach, the behavior Journal, and the weekly and monthly performance assessments.
Last updated July 23, 2026
