Project Overview
SleepGuard is an AI-driven wearable and companion app concept for monitoring sleep patterns in seniors prone to sleep apnea. As the sole designer and builder, I used AI coding tools to take the concept from early screen exploration through a working, accessibility-audited React prototype, iterating on feedback across dozens of rounds.
My Role
Product design, AI-assisted development
Collaborators
Timeline
1 month (2026)
Tools
Claude, CODEX, Figma, React, GitHub, Vercel
“how might we help seniors with sleep apnea, and the caregivers who worry about them, understand nighttime breathing at a glance, without asking them to be tech-savvy, and without the product ever pretending to be a doctor?”
THE PRODUCT
SleepGuard
SleepGuard pairs a passive wearable with a companion app that turns raw overnight breathing and oxygen data into something a senior can actually read and act on. The wearable does the work overnight, no app to open, no button to remember, while the AI's job sits entirely on the interpretation side: turning signal into meaning without ever crossing into diagnosis.
Platform
Translate raw sleep apnea data into severity signals and lifestyle suggestions without real diagnoses.
Languages
Present late night sleep patterns to seniors and their doctor in plain English and with medical jargon, respectively.
-Way Communication
Keep the senior, their caregiver, and their doctor aligned on the same night's data.
Before any screen got drawn, I sized the problem, then checked whether the seniors this is meant for actually face it differently than everyone else does. They do, badly, and nothing on the market yet reaches the intersection of the three things they need at once.
Research
Why This, Why Seniors, Why Now
83.7M
U.S. adults (20+) living with obstructive sleep apnea
80%
of cases remain undiagnosed
$149.6B
in annual U.S. societal cost: lost productivity, accidents, healthcare
11%
still on CPAP therapy after 2 years, under standard care
Seniors are the Hardest-to-Serve Audience for This
Based on both a 2024 review in the Journal of Clinical Medicine and a 2025 Scientific Reports study, the barriers compound with age instead of staying constant.
How it works
From Four Raw Signals to One Score
The wearable tracks four things independently, each one toggleable in Settings to respect user privacy. Rather than surfacing four separate readouts, every input collapses into a single stability score and severity headline first, then that one interpretation fans back out into everything the user, their caregiver, and their doctor each see.
Tracked input
App output
Primary influence
Secondary influence
How it works
One Flow to Connect Those You Care For
There's no navigation bar anywhere in SleepGuard. That's deliberate: Home is the only hub, and every other screen is a direct drill-in that returns exactly the way it opened. Nothing links sideways to anything else, so there's only ever one route through the app to relearn.
Luna Chat Bot
Typography
Headings
Aa
Sora
Body
Aa
Manrope
Sora 40px
hero stats
Sora 30px
greeting, ring number
Sora 24px
screen headers
Sora 20px
sheet titles
Sora 18px
section headings
Manrope 16px
everything else
Luna
Chat FAB
Sleeping — Start Tracking
Waking — Stop Tracking
Buttons
CTA
Toggle
Chevron
28px
— chevron, close-x
44px
— gear, back button
56px
— Luna FAB, mic, rating faces
Colors
Product blue
#4f7ea3
Rings, chart lines/bars, active toggle fills, CTA background
#2f5169
Headers, any surface carrying normal-size text
#dbe9f5
Card strokes, ring and toggle tracks
Severity (AHI only)
Normal = Primary
Moderate
#d99a3f
Severe
#c0402a
Other
amber-950
#461901
amber-900
#7b3306
amber-800
#973c00
amber-700
#bb4d00
amber-50
#fffbeb
amber-400
#ffb900
Shape & spacing
8px radius
Tracking CTA, rating faces
Everything else, plain Tailwind
4
8
12
16
24
44
PROTOtyping
Daily Summary
The primary screen: a week/month toggle, per-day AHI rings with tap-to-select, a plain-language headline for the selected night, and a mood-reactive mascot badge that reflects the week's severity trend at a glance.
PROTOtyping
Sleep Details
A drill-down view with three tabs, Breathing, Oxygen Level, and Sleep Quality, each with its own chart: a breathing-pause event log, an SpO₂ trace against a 90% reference line, and a sleep-stage hypnogram, plus a persistent “Questions for Your Doctor” card.
PROTOtyping
Settings
Device connection modeled on iOS's native Bluetooth pairing pattern, a toggle list of exactly what's tracked and why, an emergency contact flow with an automatic 911 fallback, and caregiver update controls.
Takeaways
This project sharpened how I think about building with AI coding tools as a design-first practitioner rather than a traditional engineer, going from screen concept to a working, typechecked, accessibility-verified prototype by working directly with Claude, Cursor, v0, and Figma Make rather than handing that translation off to someone else. It also reinforced a discipline I want to carry into every future project: verify, don't assume. The accessibility failures that mattered most here, a near-invisible chart label, a hover-only tooltip, were exactly the kind that look fine on a casual pass and only surface under real measurement. Working on a healthcare-adjacent product for an audience resistant to technology also sharpened my instinct for tone: warm without ever being falsely reassuring.
