Lumi — Case Study by Yafira Martinez

01 — Insight

Migraines don't arrive without warning.
We just don't know how to listen.

Migraines affect over 1 billion people worldwide. Women are 3.25× more likely to experience them than men — yet most detection tools are reactive, designed around pain that has already begun. Lumi starts from a different premise: your body signals a migraine hours before it arrives. The prodrome phase — marked by subtle shifts in heart rate variability, skin temperature, and cortisol — is a window where early action can prevent or reduce the severity of an attack.

This project began personally. I've had migraines since I was a teenager and always noticed small signs hours before — a stiffness in the neck, an unusual sensitivity to light, a drop in focus that felt different from tiredness. I wanted to build something that could read those signs so I didn't have to consciously track them. Lumi is the result: a wearable biosensor and companion app designed to detect the prodrome window and give you time to act.

3.25×

more likely in women

1B+

people affected globally

4–72h

prodrome window before onset

leading cause of disability worldwide

02 — Process

Designed in the browser,
not before it.

Most product design starts in Figma and gets handed off to engineering as a static spec. Lumi started in code. Every screen was built, viewed, adjusted, and rebuilt in the same environment — spacing, color, motion, and copy were tuned by changing CSS and watching the result update immediately, not by translating a mockup after the fact.

The signal orb

Its breathing animation, color states across calm, medium, and warning, and glow intensity were tuned live — dozens of small iterations a static frame can't capture. The orb needed to feel alive without being distracting, which only became clear by watching it pulse in the actual interface.

v1 — static circle v2 — pulse animation v3 — color-coded states

The alert flow

The progress bar, micro-interactions on each action item, and the success state were designed through interaction, not as separate static screens. Each tap needed to feel responsive — a scale animation, a confirmation label, a progress bar that fills — before the full "all done" state made sense.

v1 — simple checkbox v2 — scale + confirm text v3 — progress bar + success screen

The patterns calendar

An entirely interaction-driven feature that wouldn't exist as a static design — it only makes sense once you can tap two days and see their data compared side by side. This came directly out of asking "what would make this calendar actually useful, not just decorative."

v1 — static calendar grid v2 — tap to select days v3 — live comparison panel

The symptom log

Inspired by a categorized symptom-tracking pattern from one of my earliest app concepts, this feature went through a redesign mid-build. The first version had two separate, overlapping inputs — a tag selector and a symptom picker — that asked the user to categorize the same entry twice. Watching it in the interface made the redundancy obvious, so the tag is now derived automatically from the symptoms selected, cutting the interaction in half without losing any of the structure.

v1 — separate tag + symptom inputs v2 — categorized symptom grid v3 — single input, auto-derived tag

03 — App

A companion app that reads
what you can't.

The Lumi app connects to your Aura clip via Bluetooth and translates raw biosensor data into a single, calm signal. No overwhelming dashboards — just a clear picture of where you are and what to do if the signal rises. A categorized symptom log tracks hormonal, lifestyle, aura, and attack symptoms, and surfaces correlations — like how your migraines cluster around specific days of your cycle — so patterns that used to feel random start to make sense.

live prototype

Try it yourself

Tap through the full flow — onboarding, dashboard, early warning alert, patterns calendar, and log. Built in React + TypeScript.

React TypeScript Vite Vercel

Open in new tab ↗

04 — Design

Every decision made
for the person wearing it.

The clip goes where it hurts

Most biosensors assume a fixed placement — temple, wrist, earlobe. Migraine pain isn't fixed. Aura clips wherever your pain begins. The sensor reads from that specific location, personalizing detection to your anatomy rather than a population average.

Calm technology

Lumi is designed not to demand attention. The signal orb communicates status without numbers unless you look closely. Alerts are gentle, not alarming. The app is something you glance at, not something you monitor — it works in the background so you don't have to.

For women, by a woman

Women are 3.25× more likely to experience migraines, yet most medical wearable design uses male bodies as the default. Lumi is explicitly built for and around women's health — the cycle tracking, the hormonal trigger mapping, the language and color system all reflect this intent.

Accessible by design

Not everyone can wear a hair clip. Aura is the hero form factor — but Halo exists for people with short hair, shaved heads, or sensory sensitivities around clips. Nimbus exists for people who need a fully invisible, skin-contact option. The three devices share the same sensor core. The choice of form factor is never a compromise on capability — it's a recognition that bodies are different and wearable health technology should work for all of them.

05 — Hardware

Three form factors.
One sensor core.

Lumi is a design concept — the wearable hardware has not been manufactured yet. The form factors, sensor placement, and material choices are grounded in research into HRV monitoring and EEG sensor placement. I'd be delighted to find engineers, hardware makers, and medical device designers to bring this to life.

Aura Hero

Hair clip — concept render

Clips wherever your pain begins. Spring-loaded steel hinge, lavender shell, optical HRV sensor and temperature array in a 48mm body.

Halo

Headband — concept render

Soft silicone loop in blush. Sensor node sits at the temple. For those who prefer a hands-free, all-day wearable over a clip.

Nimbus

Adhesive patch — concept render

A flower-shaped mint patch that adheres directly to skin. Peel tab for easy placement, designed for overnight or post-exercise monitoring.

Aura, worn — the optical sensor reads from wherever your pain begins

Aura — exploded view showing lavender shell, sensor array, processor chip, CR2032 holder, and spring mechanism

✦ All device renders are speculative design concepts. The Lumi wearable hardware has not been manufactured. Form factors and sensor specifications are grounded in published research but do not represent a real product. If you're a hardware engineer or medical device designer interested in building this — let's talk.

06 — The Build

Designed and coded
as one unified thing.

The companion app is fully designed and built as a prototype — all screens, transitions, and interactions — using HTML, CSS, and vanilla JavaScript. The wearable is a design concept backed by research into biosensor hardware. Simulated biosensor data demonstrates the complete interaction model from onboarding to early warning to pattern tracking.

HTML CSS JavaScript Fraunces Departure Mono Lucide Icons Vercel Speculative Design HRV Research

Sources

Vetvik, K.G. & MacGregor, E.A. (2017). Sex differences in the epidemiology, clinical features, and pathophysiology of migraine. The Lancet Neurology, 16(1), 76–87. — basis for the 3.25× figure
GBD 2016 Disease and Injury Incidence and Prevalence Collaborators. (2017). Global, regional, and national incidence, prevalence, and years lived with disability for 328 diseases and injuries. The Lancet, 390(10100), 1211–1259. — basis for the 1 billion figure and #4 disability ranking
Giffin, N.J. et al. (2003). Premonitory symptoms in migraine: An electronic diary study. Neurology, 60(6), 935–940. — basis for the prodrome window (4–72 hours before onset)
Shaffer, F. & Ginsberg, J.P. (2017). An overview of heart rate variability metrics and norms. Frontiers in Public Health, 5, 258. — basis for HRV as a biosensor signal
Peroutka, S.J. (2014). Migraine: A chronic sympathetic nervous system disorder. Headache, 44(1), 53–64. — basis for cortisol and temperature as prodrome markers

Migraines don't arrive without warning.We just don't know how to listen.

Designed in the browser,not before it.