Case study — SerenityAIIn-house project · unpaid

AI-powered meditation, made tangible

Serenity is a holistic mindfulness ecosystem I designed and built — an AI-powered mobile meditation app and a conversion-optimized web platform delivering personalized practice from first discovery through long-term habit formation.

In-house studio project. Created independently by the Experience+ studio on an unpaid basis — not a commissioned client engagement.

Discovery & conversion

The landing page, top to bottom

A storytelling narrative that moves from "Pause. Breathe. Begin." through features, transformation stories, and pricing — presented here scrolling the full page exactly as I shipped it.

Serenity landing page scrolling from top to bottom

Brand films

Color returns the moment practice begins

Seven five-second films carry the brand's central visual idea: life in greyscale, igniting into supersaturated color the instant someone pauses to breathe — in the boardroom, the kitchen, the subway, the park.

Social campaign

Practice, in their own words

Four social spots that pick up where the brand films end: the same characters, now in full color, telling the camera what changed. AI-generated concept films, re-animated from each film's final frame with my image-to-video pipeline. Tap a card for sound.

The chef

The executive

The couple

The commuter

Platform architecture

Three interconnected interfaces

Landing page

Discovery & conversion

Storytelling narrative, pricing presentation, social proof.

Web onboarding

Acquisition & personalization

Photography-led multi-step questionnaire with starter-kit fulfillment.

Mobile app

Daily practice & engagement

Minimalist UI, gradient backgrounds, offline access, Apple Health integration.

Part 1 — Web onboarding

Five steps of progressive commitment

A progressive questionnaire that collects user data while building commitment through micro-investments: questions, then recommendations, then a physical reward — so by the payment decision, users have already invested time and emotional energy.

Goals

Establish baseline and motivation — experience level, and what brings you here: reduce stress, better sleep, improve focus, manage anxiety, self-discovery.

Preferences

Customize session parameters — duration, time of day, and guide voice preference.

Plan

AI-generated recommendations: insights with success metrics, a 4-week journey roadmap, and a recommended starter course.

Gift

The physical layer — a free starter kit reveal ($89 value): meditation cushion, silk eye mask, gratitude journal.

Start

Subscription selection and activation — free vs. premium, first session preview, and the "Begin Journey" CTA.

Hover any screen to travel the full page. A warm accent carries every call to action; full-width photography sets each step's context.

Part 2 — Mobile app

A distraction-free space for practice

The app deliberately contrasts the web experience: abstract pastel gradients instead of photography, one question per screen instead of many, iconography instead of imagery. The web flow builds excitement and commitment; the app protects a private, meditative space.

Aspect	Web onboarding	Mobile app
Visual style	Photography-heavy, realistic	Abstract gradients, minimalist
Color psychology	Warm oranges for urgency and action	Pastel blends for tranquility
Interaction	Multi-question per screen	One question per screen
Imagery	Lifestyle photos of diverse people	Iconography only, no photos

The product in motion

An engine that adapts to every answer

Every onboarding answer feeds the personalization engine — and the engine keeps adapting as practice data accumulates.

Experience level. Beginners get foundational breathwork; experts receive advanced visualization techniques
Primary goal. "Better Sleep" routes to evening wind-downs; "Improve Focus" to morning concentration practices
Time of day. Energizing scripts in the morning, calming scripts in the evening — matched to circadian rhythms
Weekly activity. Frequency unlocks progressive content; gaps trigger re-engagement sessions
Stress & sleep data. High stress surfaces immediate relief modules; poor sleep queues bedtime routines

Try it yourself

Walk through the working prototype

The prototype above is my own code — I rebuilt the concept as a real, tappable app: answer the onboarding, get an AI-personalized plan, run a real session with AI-rendered ambient sound and a guide voice, and watch your insights update. All data fictional.

Technical build

Engineered lean: no framework, no build step

I wrote every surface myself as plain HTML, CSS, and JavaScript, AI-first with Claude — Tailwind and Lucide via CDN, zero npm dependencies at runtime, deployed straight to GitHub Pages on push. Editing a file is deploying it.

~11,000

lines of AI-written HTML/CSS/JS

runtime npm dependencies — CDN Tailwind + Lucide only

step onboarding state machine in a single 1,700-line file

surfaces sharing one design system: landing, onboarding, dashboard

Motion without a library

The rainbow gradient blobs, breathing circle, waveform pulse, and chart fills are all pure CSS keyframes — no Framer Motion, no animation runtime. The mobile demo even ships its own recording rig: a keyboard shortcut frames the viewport at 720×960 and a scripted autoplay walks all twelve onboarding steps with timed selections — it's how the demo film on this page was captured.

Real engineering where it counts

Sign-in is Supabase-backed SSO — including a custom chunked-cookie storage adapter I wrote after discovering sessions over 4KB were silently dropped. Every push runs CodeQL, Semgrep, and Snyk; the latest commit is a CWE-614 cookie-hardening fix.

The differentiator

Software you can hold

Unlike pure-play meditation apps, Serenity ships a physical starter kit — meditation cushion, silk eye mask, gratitude journal — with delivery tracked live on the dashboard from warehouse to doorstep. Anchoring AI personalization in real-world rituals makes abstract benefits like "stress reduction" feel accessible and measurable, and pairs SaaS recurring revenue with e-commerce logistics.

Design philosophy

Five core tenets

01
Progressive disclosure. Information revealed gradually to prevent cognitive overload.
02
Emotional resonance. Each screen connects to a feeling — calm, hope, transformation.
03
Tangible value. Physical products make intangible benefits concrete.
04
Choice architecture. Default selections guide users toward proven paths.
05
Friction reduction. Skip options, back buttons, and flexible plans reduce abandonment risk.