PurpleSpace
Project Type
App Product Design
Design Stage
Startup
Deliverables
Motion design system, UI Kit, Applied Motion Design, motional Support Strategy, Product Design
Introduction
PurpleSpace is a sleep companion app that gently supports users through music, bedtime stories, and reflection.
It’s not just about falling asleep—it’s about helping users feel emotionally safe, calm, and cared for at the end and the beginning of each day.
Color ++ Motion ++ Emotion ++：
Emotions are fluid, not binary. In PurpleSpace, color and motion work together to feel with you, not at you. Hues and soft gradients map to supportive states; gentle motion signatures breathe, steady, or briefly sparkle. With accessible palettes and reduced-motion fallbacks, the system comforts, attunes, and helps you feel a little better.
Motion grammar:
Calm: slow drift, low amplitude
At ease: gentle sway, long easing
Neutral: subtle hover, minimal variance
Reassuring: smooth converge/settle
Affirmation: soft outward ripples
Energizing: buoyant lift, light acceleration
Color logic:
Affirmation → warm yellow-gold
Energizing → fresh lime/green
Reassuring → aqua/blue-green
Neutral → soft teal
At ease → blue-violet
Calm → deep indigo
Motion Design System
Purplespace’s Motion Design System makes emotion-aware UI implementation-ready and code-consistent. I led it end-to-end, defining a machine-readable token spec (Name / Type / Scope / Value, W3C-aligned) that engineers can drop into code. We standardize single properties—duration, easing, speed, amplitude, delay—and compound patterns that combine them (e.g., motion.entry.calm = "300ms ease-in-out", Calm macro breath 8–10s, Reassuring 300–500ms smooth, Affirming 200–400ms crisp, Energizing 100–200ms snappy). Guardrails—prefers-reduced-motion mappings, transform/opacity-only performance, intensity limits—ensure stability at scale. With shared IDs and copy-ready examples (fade, slide, scale-in, crossfade, dim/light), designers and engineers compose interactions without guesswork, accelerating PRs and reducing rework—clear standards, strong leadership, one team moving in lockstep.
Highlight - Sleep Mirror Award Collection Feature
Sleep Mirror is a layered, emotion-supportive visualization of sleep—designed to calm, not judge. Instead of blunt scores, it reflects patterns with soft, gradual color shifts and moon-phase motifs so progress feels intuitive and gentle. Two encouragement loops work together: a Badge System that celebrates meaningful milestones (consistency, wind-down wins, recovery days), and Affirmation Reminders that offer short, compassionate prompts at the right moments. The tone is reassuring, anxiety-aware, and paced to help users exhale: less pressure, more presence. By blending caring language, quiet motion, and readable visuals, Sleep Mirror helps people feel supported exactly where they are—and a little more relaxed each time.
Sleep Mirror — Three-Layer Visualization with Emotional Safety
Layer 1 · Uplift (Badges + Affirmations)
A pressure-free surface focused on encouragement only. No numbers, no judgments—just badges for meaningful behaviors and short, caring prompts. The goal is to help users feel seen and supported before they see any data.
Layer 2 · Weekly Pulse (One-glance Overview)
A calm, impressionistic read of the week. A single weekly badge and soft visuals convey the overall rhythm—good enough to sense progress, not intense enough to trigger anxiety. Users leave with a clear impression, not a score.
Layer 3 · Deep Dive (Opt-in Metrics)
Detailed charts and precise metrics are available by choice, for those moments when users want specifics. This layer supports reflection and planning without pushing data by default.
Progressive disclosure + graded granularity keeps emotional safety first while preserving rigor. Users get maximum positive reinforcement up front, a gentle weekly picture for motivation, and on-demand data for control—meeting different needs without pressure.
Highlight - Community - Belonging by Design
A warm, lively community helps people feel at home—and it measurably boosts retention. In PurpleSpace, we design for both.
Zero-friction start: Open free trials and provide prompt-code starter kits so newcomers can try, learn, and create fast. Personal spaces: Each member gets a customizable profile to decorate, post, and share; others can like and respond—easy ways to feel seen. Creator-first sharing: A streamlined publish flow (clean cover, auto credits, share links) makes it simple for creators to ship work and for users to save, remix, or follow.
Together, these loops turn curiosity into participation and participation into belonging—serving both users and creators while strengthening the product’s long-term stickiness.
Pre-launch forecast (Oct 2025), based on fake-door intent (CTR), waitlist onboarding trials, early-session behavior models, and historical cohorts; no production exposure yet.
Projected impact: activation ~+10–20%, 4-week retention ~+6–12pp, DAU/WAU +0.08–0.14, avg. weekly sessions ~+10–18%, UGC/posts per active ~+20–30%. These are indicative estimates pending validation in a limited pilot.
Projected Impact(Pre-Launch)
Impact
As an early-stage startup, Purplespace is already showing promising stickiness and emotional value. Let’s outline its early impact—where the app’s calming visuals, layered sleep insights, and community support are helping people in ways they actually care about.
3X
lift in wind-down completion after introducing Badges + Affirmations
24K
calming interactions to date across waitlist and pilot cohorts.
12%
lower pre-sleep tension (self-reported Likert score) during nightly check-ins.
