frances.
HEALTH & WELLNESS · RESPONSIVE DASHBOARD

DAYWELL

One calm dashboard for sleep, screen time, water and steps, numbers translated into stories you can act on.

SLEEP ✦ SCREEN TIME ✦ WATER ✦ STEPS ✦ DESKTOP + MOBILE ✦ NATIVE DARK MODE ✦ SLEEP ✦ SCREEN TIME ✦ WATER ✦ STEPS ✦ DESKTOP + MOBILE ✦ NATIVE DARK MODE ✦ 

Why
DayWell

Because your health data shouldn't feel like a spreadsheet.

End-to-end design: UX, UI, responsive layouts and theming for late-night check-ins.

End-to-End Product DesignerFigmaJuly 2024 · 3 weeks
0
daily metrics, one cohesive space
0
viewports: desktop and mobile, rethought not resized
0
weeks from blueprint to hi-fi
WHO IT'S FOR

Two people checking in at 11pm

Both already track their days. Neither gets an answer out of the data they collect.

MI
Maya I.
Tracks four metrics across four apps · primary

“I open three apps before bed and still don’t know if today was good.”

GOALOne honest read on the day, in under a minute.
FRICTIONFour apps, four dashboards, no shared picture.
STICKS WHENA dark, glanceable summary that loads before she loses interest.
CA
Chris A.
Two years of data, no conclusions · secondary

“I have years of charts and no idea what to change.”

GOALTurn the numbers into one next action.
FRICTIONCharts without takeaways; reading them is work.
STICKS WHENEvery chart carries a plain-language line telling him what happened.
PROBLEM

Health tracking is fragmented and rarely actionable.

Data scattered across single-purpose apps, served as dense charts that never become daily habits.

SOLUTION

A dashboard that turns numbers into readable stories.

High-level metrics paired with human-friendly summaries, trends you understand at a glance.

Open the Figma file →

Glance first, dive later

Color-coded metric cards up top; charts with plain-language takeaways below, “You slept the longest on Tuesday night.”

DayWell dashboard with metric cards, sleep, screen time and water intake charts
DayWell dark mode dashboard with sleep, screen time and water intake charts

Three decisions did the heavy lifting

01

Interpretation made easy

Dense charts intimidate. Metric cards with simple pills (“+12% more than yesterday”) show progress before any math.

02

Charts that speak

A peak on a graph explains nothing. Every chart carries a written takeaway, so the data feels instantly useful.

03

Rethought, not resized

Mobile isn't a shrunken desktop. The IA restacks into a one-handed, scannable checklist with full-size touch targets.

DESKTOP → MOBILE

Same data, different posture.

Analytical and expansive on a laptop; a vertical, thumb-friendly stack on the go. Dark mode keeps 2 a.m. check-ins comfortable.

DayWell mobile lightDayWell mobile dark
BEHIND THE DESIGN

The blueprint stage

Layout blueprints, a typography scale and dark-mode-ready palettes were locked before hi-fi, so both viewports stayed consistent.

Wireframes and visual system blueprint
WHAT I LEARNED
Density is the enemy.

The best dashboard shows less, the habits that matter get room to breathe.

Responsive means rethinking.

Prioritization and hierarchy, not shrinking, kept mobile as valuable as desktop.

Next up.

Toggleable metrics (heart rate, calories) with a layout that adapts to personal goals.

© 2026 Frances