Serenity — Calm by Design: Onboarding for a Wellness App

Serenity — "calm in minutes, clarity for life" — is a studio concept for a meditation and wellness app. Its onboarding was designed twice, on purpose: a neumorphic desktop experience built on progressive disclosure, and a 12-step mobile flow presented in a phone frame with a self-running demo mode.

Role: Product Design & Prototyping

The Challenge

A wellness app's onboarding has to practice what the product preaches: if signing up feels like filling out a form, the promise of calm is already broken. The design brief: make the first five minutes feel like the product's first session, while still collecting what the app needs to personalize itself for each wellness seeker.

Two Experiences, One Product

On desktop, a neumorphic visual system — soft shadows, tactile surfaces — keeps the interface quiet, and progressive disclosure introduces features only as they become relevant. On mobile, the flow lives inside a phone-frame mockup: twelve interactive steps that can also run hands-free in an autoplay demo mode, built for both stakeholder walkthroughs and recording.

• Neumorphic desktop onboarding with progressive feature disclosure
• 12-step interactive mobile flow in a phone-frame presentation
• Autoplay demo mode with a recording frame overlay
• Questionnaire-driven personalization shared across both experiences

What Shipped

Two live prototypes on their own subdomains, built in HTML and Tailwind CSS and deployed on Vercel. The pair works as a controlled comparison: the same product and the same personalization questions, expressed through two different devices, densities, and visual temperatures.