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
Fullstack Development

Timeline

Capstone · Spring 2025
Redesign & build · Fall 2026

Stack

React + Vite · Chart.js
Supabase · PostHog
Vercel

Discipline

Product Design
AI UX & Safety
Data Visualization

01 · The condition

Sleep apnea

Breathing stops and starts through the night, sometimes hundreds of times. Usually the airway collapses (obstructive); less often the brain misses a beat (central).

02 · The treatment

CPAP

A bedside machine pushes steady air through a mask to hold the airway open, and logs every breath to an SD card. Whether the mask fits decides whether people keep wearing it.

03 · The stakes

Compliance

4ha night
on
70%of nights
in
30days

The bar insurers set to keep covering the machine.

01 Desk Research

Whether people stick with CPAP is mostly decided in their first month.

~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

CPAP users online keep asking what their numbers mean.

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

I talked to six CPAP users about what gets in their way.

KL

Kathy L.

Software Engineer · Portland

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

CF

Cody F.

Veteran & Student

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

SJ

Susan J.

Self-treating researcher

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

MR

Miles R.

Product Designer · San Francisco

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

RT

Robert T.

Lawyer, 66

A comfortable mask is what makes compliance actually stick.

MB

Marcus B.

Long-haul Trucker · Ohio

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

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.

The problem

CPAP apps either show raw charts or hide everything behind one score. Either way, people can’t tell what went wrong last night or what to change.

What Nocta does

Nocta reads each night from the machine’s SD card and tells you what happened, what likely caused it, and one thing to try tonight.

Competitive Analysis

CPAP apps show the data without explaining it, and sleep apps that explain well ignore CPAP.

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.

Iterations

The design went from paper sketches to the final app in five versions.

A 2025 grad-school capstone, designed by hand from paper to high fidelity, then rebuilt in code in 2026.

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

03 Brand & Design System

Nocta

nox, noctis · Latin for night

  1. A pencil sketch of Nox on paper
  2. A grey mid-fidelity construction of Nox on a grid
  3. The final Nocta logo: Nox, a peach moon with a bite, and three stars

Nox various personalities

Idle
Thinking
Asleep
Pleased

Palette

  • Night#090D1A
  • Surface#141A2E
  • Metric#7B95D8
  • Nox#F0A47A
  • Attention#E07A6A

Typeface

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

04 The Result

Here’s what Nocta looks like today.

Tonight tab — the nightly story
Tonight
Full night — breath-by-breath detail
Full night
Trends tab — patterns over time
Trends
Therapy tab — your mask, equipment and a summary for your doctor
Therapy
You tab — account, wearables, privacy and data export
You

01

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.

02

The full night, one chart at a time

The detail layer: events by type on the night's real clock, then every signal the machine records, from breathing rate and pressure to leak, flow limitation 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.”

03

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.

04

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.

05 How Insights Are Made

How Nocta decides what to suggest each morning.

insights.js · simplified

function morningCard(date) {
  const night = cardNight(date);

Last night’s data, read from your SD card.

  const ctx = {
    usual: baselineFor(date),

Your normal: the middle of your last 30 nights.

    setup: getAnswers(),

Your mask type and sleep position, from setup.

    checkin: checkinTags(date),

This morning’s check-in answers.

    quiet: quietKinds(date),

How it learns: rules you said were wrong rest for 2 weeks.

  };
  const found = DETECTORS
    .map((rule) => rule(night, ctx))

21 rules, each looking for one thing, like a leak.

    .filter((f) => f && !isQuiet(ctx, f.kind))

Skips those rules, unless it’s something for your doctor.

    .sort((a, b) => b.priority - a.priority);

The most important finding goes first.

  return write(found[0], ctx);
}

What it writes on Tonight

Your mask leaked more than usual last night.

98.4 L/min in the leakiest stretch, usually 10.8

06 Beta Findings

Testers worried about who could read their health data, so I locked it down.

About 175 people tried the beta and 24 imported their own SD card. Within five days of their feedback, every place Nocta keeps their data was encrypted.

Oura and Whoop keys are encrypted and never reach the browser.

Research copies have no name attached and are encrypted at rest.

Passwords need upper, lower, a number and a symbol.

A written breach plan, with keys that can be swapped safely.

07 What I Learned

What I learned from shipping Nocta to real users.

The safest AI is predictable

Rules can be read, tested and published. That mattered more than fluent prose.

Real data breaks the happy path

A real card brought 20-minute nights and nights in pieces. Each one needed a calm state.

Voice is a system too

Hedged causes, one action, no diagnosis: enforced in every screen and every Nox answer.

Privacy is part of the design

Session replays mask every number and chart, and shared nights are anonymised.

Try Nocta

Live in beta. Bring your own SD card, or look around with a sample month first.