Dream Detective

Problem

College students know sleep matters — but staying up late feels low-stakes, and alarms offer no reason to get up early. Snooze wins because nothing is at stake.

The brief: design an app that creates lasting behavior change. I reframed it as motivation design, not notification design.

Competitor analysis

I mapped behavioral patterns across Duolingo, Forest, Pokémon Sleep, Finch, and others. Duolingo's streak loss hurts more than consistency feels good (loss aversion). Forest makes you protect something you've built. Pokémon Sleep and Finch turn sleep into collectible output.

The gap: no one combined narrative pull with irreversible consequence. Data and cute mascots exist — but nothing makes waking up the only way to find out what happens next.

Solution

Replace the alarm with a daily episodic audio mystery. Each morning unlocks the next clue — unless you snooze, in which case that chapter is gone permanently.

The Cold Trail penalty isn't shame or a broken streak. You don't fall behind — you miss the beat. That distinction keeps the mechanic fair while making oversleeping costly.

Visual direction

Wellness apps default to clean minimalism. Dream Detective needed atmosphere — film noir contrast, Art Deco ornament, and adventure-game UI that feels like a world, not a dashboard. Typewriter typography reinforces the case-file metaphor.

Exploring two directions

Version 1 was a minimal alarm + clue reveal — conceptually clear, but indistinguishable from a standard alarm app. Version 2 introduced the Office as home base, Evidence Board navigation, Stakeout sleep audio, and Detective Rank progress. That version sold the world.

Wireframes

Low-fidelity frames for home, stats, navigation, and the morning alert — structure before style. The goal was hierarchy: where sleep data lives, how users move between Office, Evidence Board, and Stakeout, and what the wake-up moment actually looks like.

UI system

Art Deco card frames, gold-on-crimson actions, and a handwritten navigation notebook carry the detective world across screens. Sleep stats become case metrics — Rest Logged, Evidence Secured, Cases Solved — so data feels native to the fiction.

Final screens

Environment art was generated with Gemini and Grok; UI and interaction design were built in Figma. Background illustration was scoped to AI — hand-illustrating full scenes wasn't feasible in three weeks.

The morning alarm state is deliberately tense: high contrast, pulsing waveform, copy that signals a broadcast fading fast. The Evidence Board collects clues on a corkboard with red string — where the larger mystery takes shape.

User flow

Day and night modes split at 6pm — the Office changes, and different actions unlock. Night path: Stakeout sleep audio → wake-up check → briefing + mini-game or Cold Trail. Day path: stats, alarm settings, and case notebook. Everything anchors back to the Office.

When AI wasn't enough

FigmaMake accelerated individual UI elements, but couldn't handle the core interaction — spatial, first-person navigation through the Office. I built that prototype manually in Figma, covering both wake-up outcomes: Intel Secured vs. locked out.

PRD

I wrote a full PRD before high-fidelity screens — problem, features, user flow, and design specs. It kept scope honest: gamify curiosity, not guilt.