Hypnos

Helping college students break the sleep-study tradeoff through gamification and emotional design

Hypnos app screens showing sleep dashboard, AI chat, focus timer, and profile
Team
Solo Designer & Developer
Timeline
January 2026 to Present
Tools
Figma, Claude Opus 4.6, Figma Console MCP, SwiftUI
Role
Product Designer & iOS Developer

The AI wearable that meets you where you are

01Smart earplug tracks clinical-grade sleep data through your ear canal
02AI mascot Hypno turns sleep data into emotional feedback that motivates
03Parallel sleep and study streaks connect rest with focus
The Problem

How might we help college students see sleep as an ally to academic success — not a sacrifice?

70%
of college students get insufficient sleep
9.5x
more likely to struggle academically
College students in a classroom setting
My Role

Solo designer and developer for the Apple Student Swift Challenge

Responsibilities
User Research, Design System, UI/UX Design, Prototyping, iOS Development
People
Just me + Claude as an AI design partner
Timeline
6 weeks from research to prototype
Hand-drawn earplug design iterations and sketches

How this shaped the design

This research validated the ear-based form factor and pushed me toward an emotional design approach rather than a data-dense dashboard. Knowing that not all metrics are equally reliable, I prioritized sleep quality and HRV as the core signals and hid the rest. The mental health connection to HRV reinforced the mascot concept: Hypno would reflect how you feel, not just how you slept.

Process

An AI-assisted workflow from research to prototype

1
Research & Competitive Audit
5 sleep apps audited, classmate interviews
2
CLAUDE.md Configuration
200-line design brief encoding HIG rules
3
AI-Generated Design System
218 tokens via Figma Console MCP
4
Mascot & Gamification Design
8 expressions, 160+ accessory combinations
5
SwiftUI Implementation
Native iOS build for Swift Challenge
8-panel storyboard showing the Hypnos user journey
Design System

The design system that made solo design possible

AI output mirrors the quality of your constraints. My first attempt produced 40 unusable colors. After writing a 200-line CLAUDE.md brief encoding HIG rules, Claude built 218 tokens in a structured hierarchy on the first pass.

System at a glance

218
Design Tokens
73 primitive, 49 semantic, 86 component
37
Text Styles
iOS Dynamic Type scale
6
Brand Colors
Warm tones for rest, cool for focus
Hypnos splash screen showing Poppy Red brand color

Color choices driven by the emotional design goal

Students needed warmth, not clinical precision. Poppy Red and Eggshell reduce the anxiety association with health tracking. Blossom Blue and Mystic Green accent focus and achievement modes.

Poppy Red
Eggshell
Blossom Blue
Mystic Green
Mascot expression and accessory matrix showing various permutations of the Hypno mascotMascot expression and accessory matrix — each expression combines with every accessory for 160+ customizable Hypno variants.
Final Design

A companion that makes sleep feel like progress

01Emotional mascot replaces clinical dashboards
02Parallel streaks bridge sleep and study
03160+ accessory combos drive personalization
04AI chat provides contextual sleep advice
Hypno mascot with heart speech bubble expressing warmth and affectionDifferent emotional states and accessories — students unlock new hats and expressions as they build consistent sleep and study habits.
Key Screens
Early Iterations

Early Designs without a System

Three early design iterations: Home dashboard with sleep quality charts, Alarms screen, and Focus timer
Home Screen

Before & After

Reflection

What this project taught me about designing with AI

01

AI amplifies design thinking — it doesn't replace it

The flat-list failure in my first attempt proved this. Claude built the system, but the quality came from my CLAUDE.md constraints. The better the design brief, the better the AI output.
02

Research before tools

I almost started building before understanding the problem. The competitive audit and classmate conversations changed my entire approach — from a clinical tracker to an emotional companion. Tools are means, not ends.
03

Emotional design outperforms data design

The mascot approach beat leaderboards and data rewards in my prototyping tests. For habit-forming products, how users feel matters more than how much data they see.
04

Test expressions at every size

My mascot iteration taught me that emotional design must be resolution-independent. If the expression isn't readable at 24px, it's not working — no matter how good it looks at full screen.
What I'd Do Differently
01

Test earlier and uglier

I spent significant time getting the AI workflow to produce polished components before validating the core concept with users. Next time, I would test paper prototypes of the mascot interaction and streak mechanics before building any design system.
02

Define success metrics upfront

I can't measure impact because I never defined what "good" looks like. For the SwiftUI build, I'm defining three measurable goals: 7-day retention above 40%, average daily session length above 90 seconds, and self-reported sleep satisfaction improvement of 1+ points on a 5-point scale.
03

Co-design the gamification

The XP curve, streak forgiveness, and accessory unlock schedule were designed by intuition. These should be co-designed with the target audience through participatory design sessions.
Currently

Building in SwiftUI for the Apple Student Swift Challenge.

Translating the Figma design system into native SwiftUI components, integrating smart earplug Bluetooth pairing, and implementing Hypno's conversational AI backend.

More Projects
Trailmix travel planning app

Trailmix

What if travel planning felt like scrolling TikTok?

What We Do location voting interface

What We Do

What if coordinating with friends felt effortless?

[victor]