UX/UI Motion Vibes About Visitors

Nocta / AI CPAP Companion

Sleep better,
knowingly.

Nocta reads a CPAP machine's overnight data and writes one honest, plain-language story — what happened, what likely caused it, and the single next thing to try.

Scroll

Role

Solo: UX Research
UX/UI & Brand Design
Front-end Build

Timeline

Capstone · Parsons, Spring 2025
Redesign & build · 2026

Stack

React + Vite
Chart.js
OpenAI · SleepHQ

Discipline

Product Design
AI UX & Safety
Data Visualization

01 · The condition

What is sleep apnea?

Sleep apnea is a disorder in which breathing repeatedly stops and starts during sleep. Pauses can last from a few seconds to minutes and may happen hundreds of times a night — fragmenting sleep and starving the body of oxygen. There are two main types.

Obstructive sleep apnea — a blocked upper airway
OSA

Obstructive sleep apnea

The most common form — the upper airway physically collapses or is blocked, restricting oxygen even as the body keeps trying to breathe.

Central sleep apnea — a missed signal from the brain
CSA

Central sleep apnea

Less common and harder to spot — the part of the brain that controls breathing misses a beat, so the body simply doesn't try to breathe.

02 · The device

What is a CPAP machine?

CPAP — Continuous Positive Airway Pressure — delivers a steady stream of pressurized air through a mask worn over the nose or mouth, splinting the airway open through the night. Pressure and timing are tuned to the patient, and the machine quietly logs every breath it delivers.

The machines

ResMed AirSense 11
ResMed AirSense 11

The masks — fit is everything

ResMed AirFit P30i nasal pillow mask
AirFit P30i · nasal pillow
ResMed AirFit F30i full-face mask
AirFit F30i · full face
ResMed AirFit F20 full-face mask
AirFit F20 · full face

03 · The stakes

And what is “compliance”?

Compliance is how consistently you use the machine as prescribed. Insurers define it with a hard threshold — and it's where most people fall off, often without realizing the clock is running.

4hper night
+
70%of nights
within
30days

01 Desk Research

The pattern is set in the first month.

Sleep apnea affects an estimated 3 to 9% of adults, close to a billion people worldwide. CPAP, the gold-standard treatment, has an adherence problem: a 20-year review found adherence hasn't meaningfully improved, despite better machines and coaching programs.

~1B

people affected worldwide

~425m

adults have moderate - severe sleep apnea

<50%

still met the insurer standard (4+ hours on 70% of nights) two years in

~80%

of patients on track in their first month were still on track two years later

Community Research

The same story, hundreds of times.

Beyond the studies, I read through r/CPAP and r/SleepApnea — the human side of those numbers. Post after post described the same struggle: drowning in raw numbers, fighting clunky tools like OSCAR, and just wanting someone to explain what it all means.

Reddit post about CPAP therapy struggles Reddit post about OSCAR data Reddit post about CPAP therapy
Reddit post about CPAP data confusion Reddit post about CPAP therapy struggles Reddit post about CPAP therapy
Reddit post about CPAP apps Reddit post: Help needed, BIPAP data Reddit post about OSCAR data

Underneath the frustration, the same quiet hope kept surfacing —

A Reddit user: “I'm ready to start feeling better.”

User survey · 14 CPAP users

8/14

named mask air leaks as one of their biggest challenges

8/14

had already changed their mask style or size

13/14

rated mask comfort as the #1 thing they'd change

9/14

wanted more guidance and better tracking on therapy

User Interviews

Six CPAP users, one recurring wish.

I sat down with six people who actually wear the mask every night — an engineer, a veteran, a self-treating researcher, a designer, a retired lawyer, and a long-haul trucker. Very different lives, strikingly similar frustrations.

KL

Kathy L.

Software Engineer · Portland

Wished out loud for a “CPAP virtual assistant” that gives tips for her specific issues.

ResMed F40 · OSA · myAir + SleepHQ

CF

Cody F.

Veteran & Student

myAir's averaged-out data hides what actually happened overnight.

Memory-foam mask · Moderate OSA · myAir

SJ

Susan J.

Self-treating researcher

Self-tunes with OSCAR, Python & ChatGPT — wants longitudinal depth and autonomy.

Full-face mask · UARS · OSCAR

MR

Miles R.

Product Designer · San Francisco

It shouldn't feel so medical — therapy should feel personal.

Nasal pillow · OSA + CSA · MyBreeze + SleepHQ + OSCAR

RT

Robert T.

Lawyer, 66

A comfortable mask is what makes compliance actually stick.

ResMed full-face mask · Severe OSA · myAir

MB

Marcus B.

Long-haul Trucker · Ohio

I need to know I'm passing compliance — my CDL depends on it.

Nasal pillow · OSA · myAir

What I heard, again and again

Mask fit is the real battle

Nearly everyone cycled through many masks (Kathy tried nine) before one stuck — and discomfort is exactly where people quit.

Apps are all-or-nothing

myAir felt too shallow; OSCAR too complex. Everyone wanted the missing middle — real detail, without the overwhelm.

They want a guide, not a dashboard

From “virtual assistant” to ChatGPT consults, users already reach for AI to interpret the data and say what to try next.

It feels clinical — it should feel human

Compliance pressure makes therapy feel like being a medical device. People wanted warmth, autonomy, and encouragement.

02 The Problem

Most people quit CPAP therapy before it can help them.

CPAP apps swing between two failures: they bury patients under raw charts, or they hide the data entirely behind a single green checkmark. Neither builds the confidence and curiosity that keep someone wearing an uncomfortable mask night after night — so most stop within the first month.

The Opportunity

“How might we make CPAP data feel actionable and human — so people feel guided, not graded?”

The Solution

Distill each night into one story — what happened, what likely caused it, and the next thing to try — wrapped in calm charts and wearable context.

Competitive Analysis

Powerful but cold — or polished but elsewhere.

I scanned the apps people already use: the CPAP-specific tools built for the data, and the consumer wellness apps built for the habit. The gap between the two — clinical depth with a human voice — is where Nocta lives.

Direct · CPAP & sleep-data tools

ResMed myAir — the official CPAP app 6 screens

ResMed myAir

The official app — one nightly score, little of the “why”.

SleepHQ — CPAP data analytics 6 screens

SleepHQ

Deep CPAP analytics — powerful, but built for power users.

OSCAR — open-source CPAP desktop software 4 screens

OSCAR

Free desktop software — every data point, zero guidance.

Indirect · Consumer wellness & wearables

Oura — readiness and sleep tracking 6 screens

Oura

Beautiful readiness scores — but blind to CPAP.

Whoop — strain and recovery tracking 6 screens

Whoop

Strain & recovery, gorgeously visualized and habit-forming.

Pillow — iOS sleep tracking 6 screens

Pillow

Friendly iOS sleep tracking — warm, but light on depth.

Before the pixels

Divergent sketches.

Before opening Figma I sketched widely on paper — many rough takes on the nightly story, the dashboard, and how a single number should feel. Most were wrong, which was exactly the point: cheap to draw, cheap to throw away.

Early paper sketch of the Nocta dashboard
Early paper sketch of the nightly story layout
Early paper sketch of metric cards
Early paper sketch of trends and charts
Early paper sketch of a single number view
Early paper sketch exploring navigation
Early paper sketch of the home screen

Iterations

Five passes to the right feel.

Back in March 2025, Nocta was my grad-school capstone — researched, designed, and built entirely by hand, no AI in the loop. Each pass clarified the hierarchy and warmed the palette, moving from grey wireframes toward a darker, calmer system. In 2026 I took V3 into code and kept designing in the browser. V4 rebuilt the core screens around one card that explains the night; the final iteration adds the night sky, Nox and the why horizon.

Version 1 — landing
Version 1 — dashboard
Version 1 — expanded dashboard
Version 1 — trends
Version 1 — masks
Version 1 — detail

03 Brand & Design System

A night sky, not a hospital.

Most CPAP tools look like the machine they came from: grey, clinical, scored in red and green. Nocta's brand starts from the moment people actually open it: half-awake, in the dark, a little worried about a number. The name, the logo, the sky, the coach and the voice all work toward one thing: lowering that worry.

The name

Nocta

nox, noctis · Latin for night

  1. The 2025 Nocta logo: a pillow holding a green and blue wave

    01 · 2025 capstone

    Pillow

  2. The swirl logo: a CPAP mask outline drawn as peach and ivory bands

    02 · Mid 2025

    Swirl

  3. Explored: a CPAP mask drawn as a constellation Explored: a crescent moon constellation Explored: the letter N as a constellation Explored: an early draft of the breath constellation

    03 · 2026 exploration

    Constellations

  4. The final Nocta logo: six stars joined along one breath, the crest star in peach

    04 · Final

    One breath

At every size

Logo at 48 pixels Logo at 28 pixels
Nocta

Found in the sky

Meet Nox

Nocta's AI coach that can help answer your questions

Idle
Thinking
Asleep
Pleased

The sky reflects the night

Like the Weather app, the sky behind Tonight changes with the night you had. The condition comes from the night's insight: clear, bright, hazy, overcast, or faint when there's too little data. It changes the mood, never into a traffic light.

A bright sky with a cool green tint on Nocta's best night
Bright · your best night so far
A hazy blue sky on a night that ran above usual
Hazy · off your usual
An overcast sky with warmer clouds on a night worth raising with a doctor
Overcast · worth a doctor's look

Palette

  • NightThe sky#090D1A
  • SurfaceCards & sheets#141A2E
  • MetricEvery chart#7B95D8
  • NoxCoach only#F0A47A
  • AttentionDoctor-worthy#E07A6A

Typeface

DM Sans Display & numerals, with tabular figures for every reading
Inter Body & UI, 17pt minimum for tired eyes

The Result · Today

A more personal way to treat sleep apnea.

Tonight tab — the nightly story
Tonight
Full night — breath-by-breath detail
Full night
Trends tab — patterns over time
Trends
Therapy tab — compliance projection
Therapy
You tab — connected devices
You

04 Features

Eight surfaces, one calm story.

01

Onboarding that earns the first morning

New CPAP users arrive anxious and short on patience. Setup only asks what changes how Nocta reads a night (goals, sleeping position, other conditions, mask, insurance window), then sets expectations before night one.

  • 01 One question per screen, with a step counter
  • 02 Every step skippable, and each says why it's asking
  • 03 A preview of tomorrow's insight, using example data
  • 04 Nox introduces itself, including what it won't do

02

The why horizon

Instead of a wall of charts, the first thing you see is a verdict and the shape of your night: a few words on what happened, one line with a reference point, and a curve of events per hour against your usual.

Tap the info icon and Nox shows its work: the exact numbers it reasoned from, whether the night fits a pattern it's watching, and how confident it is.

03

The full night, one chart at a time

The detail layer: events by type on the night's real clock, sleep stages from your watch, and the machine's four signals (flow, pressure, leak and snore).

Tap any chart for its own page, like Apple Health: the key number, the graph at full size, and a plain-language “About.”

04

A 20-second morning check-in

How you felt and what happened that day is half of what Nox learns from, so the check-in sits right under tonight's suggestion. The first question is answerable in place: tap “Tired” and the rest opens with it already picked.

Four questions, with back and skip on every step. Once it's logged, it folds down to a single slim line.

05

Ask Nox

Nox opens already knowing what you were looking at. From the horizon it starts with last night's numbers and offers three follow-ups; from Trends or a chart, it starts there instead.

Its limits are part of the design. Ask it to change your pressure and it says that's your doctor's call, then offers to prepare a summary for them.

06

Trends over time

Zoom out to 7, 30 or 90 nights. Four tiles (AHI, leak, usage and pressure) double as tabs for one large chart, each with its change right beside the number.

Week-level insights, a best-versus-worst night comparison and journal patterns connect what you logged to how you slept.

07

Therapy & compliance

A compliance outlook says plainly whether you can still clear your insurer's bar, and by which night. It's framed as a path forward, never a grade.

Machine settings, your mask and every part's replacement date fold into one line until something is due. One tap exports a clean, AI-free summary for your doctor.

08

Connected devices

Apple Watch, Oura, Fitbit, Garmin, Samsung and Whoop add heart rate, HRV and sleep stages to the same night as your therapy data.

Connecting runs a full mock OAuth flow: choose what Nocta can read, watch it pull in your nights, and switch any signal off later without disconnecting.

05 AI Safety Rails

An insight that knows its limits.

The moment an app interprets clinical data, it risks becoming a regulated medical device. Nocta's AI lives inside hard rails: every insight is typed JSON with cited data, a confidence label, and a disclaimer — and certain patterns route straight to “talk to your doctor.”

Honest, not cheerful

No “great job!”, no streak trophies. A bad night is named calmly and plainly.

Hedged on cause

“This pattern often suggests…” — never “this means” or “you have.”

Never diagnoses

It won't name a condition or recommend a pressure change. Ever.

Escalates to a doctor

Central-apnea or SpO₂ patterns trip a physician-referral flag.

06 Testing → Shipped

Five testers, 142 notes.

I ran moderated sessions with five CPAP users on the high-fidelity app. I followed a guided script: no leading questions and no explaining features, just “what do you expect this to do?” Each person walked the whole app: onboarding, the home screen, the morning check-in, a single chart and Trends. Every reaction went on a sticky note under the screen it was about, color-coded by tester.

The testers

  • CCody29 notes
  • SSusan27 notes
  • KKathy13 notes
  • MMiles34 notes
  • GGeoff39 notes
5testers
5flows walked
142unique notes

What came up, and from whom

I grouped the notes into themes and counted how many of the five testers raised each one. A filled dot means that tester brought it up unprompted.

Theme CCody SSusan KKathy MMiles GGeoff Of 5
The check-in is quick, but they wanted richer answers5
Leak rate is the number that matters4
The best insights say what to do next4
One question per screen works, but show the length4
A number means nothing without a reference3
Best vs. worst night is the comparison they'd use most3
Connect the wearables I already own3
Encourage me, don't grade me2
Pressure belongs to the doctor2
The morning check-in: How do you feel this morning, with multi-select answers

Insight 5 of 5

Everyone liked how fast the check-in was, and everyone wanted to say more.

“Super quick quiz, very easy to do. Can you select more than one option?”Cody

Shipped

Multi-select answers across four short questions: how you feel, what happened in the night, what you had last night, and what you did yesterday. The first question can be answered right on the home screen.

Insight 4 of 5

Testers kept asking for leak rate, ahead of snoring or pressure.

“Add in leak rate. It's the largest indicator of discomfort.”Geoff

Shipped

Leak leads the “Last night” row, has its own Trends tile, and gets a full page with the 24 L/min line and the minutes spent above it.

The leak rate page: 32 L/min, above 24 for about 140 minutes
The why horizon: AHI doubled, 10.5 an hour, up from your usual 4.6

Insight 4 of 5

The insights were the favorite part, but a bare number left people guessing.

“Is this per hour? What is this number based on?”Geoff

Shipped

Every headline number now carries its own reference point (“10.5 an hour, up from your usual 4.6”) and exactly one thing to try. Each chart has a plain-language “About.”

Insight 4 of 5

One question per screen felt right, but nobody knew how many were left.

“How many questions are in this onboarding flow?”Miles

Shipped

A step counter on every screen, an “It varies” answer for sleeping position, a wider list of other sleep conditions, and six wearables to connect.

Onboarding step 1 of 11, with a progress bar and a skip option
Nox declines to suggest a pressure setting and offers a doctor summary

Insight 4 of 5

Testers wanted encouragement, not a grade, and Geoff drew a hard line at pressure.

“Should encourage, and not criticize.”Kathy
“Pressure is medically prescribed, so you can't change it yourself.”Geoff

Shipped

No 0–100 scores anywhere, and a calm voice on bad nights. Ask Nox about pressure and it says that's your doctor's call, then offers to prepare a summary for them.

Side by side

One question, two answers.

Nocta's home screen: AHI doubled, 10.5 an hour, up from your usual 4.6, a curve of the night's events, and one thing to try tonight: start on your side
Nocta's full-night view: 10.5 AHI, 65 events and 6.2 hours, events by type across the night, and sleep stages from Apple Watch
Nocta
OSCAR's Daily view: AHI 0.94 at the top of a sidebar of event, statistics and device-setting tables, beside stacked graphs of event flags, flow rate, pressure, leak rate and flow limitation OSCAR

07 Impact & Measurement

What it sets out to change, and how I'd know.

Reduce confusion

by translating raw CPAP data into personalized, plain-language insights people can understand and act on.

Build confidence

by helping users see what's working, what's not, and the one adjustment worth trying tonight.

Support the long haul

through gentle, honest habit-building that keeps people on therapy past the month that usually breaks them.

How I'd measure it

Nocta isn't a live product yet, so I won't claim results. If I launched it, these are the numbers I'd watch. I'm not optimizing for time in the app; I'm optimizing for time on the machine.

North star · Day-30 compliance

How many new users meet the insurance standard (4+ hours on 70% of nights) in their first month. The research showed the first month predicts whether someone is still on therapy two years later.

Core idea · Follow-through

Whether people actually try the why horizon's suggestion, and whether their next night improves. That tells me if interpretation over data is working.

Success signal · Fewer suggestions

If therapy is working, Nox should have less to say. Fewer suggestions paired with steady compliance is a sign of success, not disengagement.

Guardrail · Harm

How often a “talk to your doctor” alert was actually warranted, and whether people quit after a hard message.

With a full team, I'd validate it in phases

  1. Run a 30-day study comparing Nocta users with people using only their manufacturer's app.
  2. Test the why horizon itself, like one suggestion versus three.
  3. Work with device makers like ResMed on direct data access, so users don't need a third-party sync.

Interactive Prototype

Beyond the design, I built a working React prototype — running on my own CPAP data, every chart rendered with Chart.js, and AI insights shipped as typed JSON ready for OpenAI's Structured Outputs and the SleepHQ API.