MOBILE APP CASE STUDY
Mellow: A Mental Wellness Companion Built to Stay With You Until You Feel Okay
How WebSpero designed and shipped a full-featured anxiety relief app on React Native, covering iOS and Android from one codebase, with a UI built to reduce cognitive load the moment panic hits.
Project Context
Client
Sunshine Club (Mellow)
Niche
Mental Wellness · Mobile App
The Tech Stack
- React Native
- Node.js
- Supabase (PostgreSQL)
"I wanted to build something that feels like a trusted friend in your pocket, not another wellness tracker that adds pressure. Something that shows up during the worst moments and just stays with you until you feel okay."
The client wanted a product that removes all friction during anxiety episodes: a single-tap Anxiety Button at the centre of the experience, a design language built on calming visual cues, and no streaks, scores, or leaderboards.
Founder, Mellow
Sunshine Club
HOW WE BUILT IT
A Structured, Founder-in-the-Loop Sprint Process
When Mellow’s founder first reached out, we began with a working session to understand the emotional brief: an app for anxiety that cannot itself be anxiety-inducing. Every sprint demo included the founder, and every major UX decision, especially around cognitive load during panic, was validated against real anxious-user scenarios before moving forward.
DISCOVERY
A working session to review the anxiety app landscape and understand the emotional brief: relief without pressure, calm without gamification.
REQUIREMENT ANALYSIS
We broke the brief into feature families: immediate crisis support, daily habits, distraction, and self-
awareness. Mapped dependencies and prioritised by impact during anxiety episodes.
ARCHITECTURE & TECH SELECTION
Chose React Native for a single iOS/Android codebase. Node.js + Supabase for auth, data persistence, and real-
time. Optimised for low-latency Anxiety Button response under network pressure.
UI/UX DESIGN
Full Figma design system: cream-to-lavender and blue gradient palettes, rounded forms, typography optimised for readability under stress.
50+ unique screens designed before a line of code was written.
CORE FEATURE BUILD
Anxiety Button, four breathing modes, journaling with Brain Dump, Worry Popper, mood tracker, and weekly check-in wired to the shared
Supabase schema.
PERSONALISATION & CONTENT
Mood-based breathing selection, daily activity engine, affirmation content pipeline, and iOS/Android
home-screen widget integration for affirmations without requiring the app to be open.
QA & REGRESSION
Cross-platform testing on iOS and Android across all feature states, including edge cases: partial input during panic, network drops mid-session,
and accessibility requirements during active distress.
APP STORE LAUNCH
Submitted to App Store and Google Play. Freemium subscription configured with core wellness tools free and premium access to advanced
anxiety support and detailed insights.
Onboarding: Soft Welcome and Personalisation Setup
Three screens collect only the essentials: name, age, and first wellness intention. No account wall, no permission barrage. The warm cream-to-lavender gradient (#FAF9F7 to #F0F7FF) sets a calm tone before anything else loads. Name Submit, Age Submit, and First Action Submit states document the filled form at each step.
Home Screen: Feature Hub
The primary screen every user returns to. The Anxiety Button sits prominent at the top, always one tap from immediate support. Breathing exercises, journaling, calming games, and mood tracking are each a single tap away. No buried navigation, no hunting through menus.
Anxiety Button: Immediate Crisis Support
The product’s centrepiece. One tap initiates a guided sequence: breathing first, then grounding. The screen collapses all visual complexity the moment the user taps: no navigation, no notifications, no distractions. The session stays open until the user confirms they feel settled.
Breathing Exercises: Four Modes, Personalised by Mood
Box Breathing, 4-7-8, Calming, and Energising each get their own animated screen on the soft blue gradient (#E0EFFF to #F8FAFC). The breathing animation paces the inhale/hold/exhale cycle visually; the user follows the circle, not a text countdown. Mode selection is personalised to the user’s logged mood.
Daily Affirmations: Immersive Backgrounds and Home Screen Widget
Affirmations display against full-bleed nature photography (ocean waves, butterflies, forest stream, leaf rain) with a dark gradient overlay. Users choose their preferred background and affirmation category. Affirmations also ship as a home-screen widget on both iOS and Android, with no app launch needed.
Calming Games: Worry Popper and Five Grounding Experiences
Five distinct grounding experiences for anxiety moments. Worry Popper, the signature game, lets users type their worries, watch them rise as bubbles, and pop them. Six final-state screens show a clean empty sky after every worry is gone. Other games: Sudoku, Word Puzzles, Jigsaw Puzzles, Color Mandalas. Do Nothing completes the set with 60 seconds of ambient calm.
Journaling and Brain Dump: Emotional Unloading
Two modes for different emotional states: guided prompts for reflective moments (Good/Great entries on the warm cream gradient), and free-form Brain Dump for when structure adds friction. Speech-to-text is available throughout. The journal list view groups entries by mood emoji and date.
Mood Tracker and Insights: Self-Awareness Without Pressure
Daily mood logging with emoji-based selection and trigger identification. Eleven dedicated insight screens surface weekly anxiety trends, word cloud from journal entries, activity impact data, and check-in results, with no social comparison or leaderboards. The weekly summary tells users what is helping.
Profile, Reminders and Premium Access
The profile section handles notification reminders (gentle check-in nudges, never pressure), affirmation preferences, and account settings, all using the same calming visual language as the rest of the app. The Paywall Screen presents premium features without pressure, consistent with the overall tone.
WHAT TO EXPECT FROM US
Transparent Engineering and Thoughtful Delivery for Sensitive Consumer Products
If you are building a mental health or wellness product and weighing agencies, here is what working with our team actually looks like.
A plan before a proposal.
We start with a working session to understand what your product needs to do, who it serves, and where the hard parts are. For a wellness app, that means understanding the emotional brief, not just the feature list. You leave with a delivery plan, not a sales pitch.
Privacy by design, not as an afterthought.
Mental health data is among the most sensitive data a person can share. We design data architecture and access controls before writing feature code, not as a checklist at the end. Your users’ journals and mood logs are handled correctly from the start.
Low-pressure UX from the first screen.
No streaks, no leaderboards, no guilt mechanics. These are agreed in discovery and built into the architecture, not retrofitted at the end. Your product earns retention through genuine value, not compulsion.
One team, both platforms.
A single team handles iOS and Android together. You do not pay for two teams that produce two slightly different apps and do not talk to each other. When the design changes, both platforms change. When a bug is fixed, it is fixed everywhere.
A live demo every two weeks.
At the end of every sprint, you see the actual product: what is built, what is working, and what is still in progress. You always know where your product stands. No month-long silences followed by a surprise reveal.
Quality that does not depend on one person.
Every change is tested automatically before it reaches you. Every release is reviewed by QA, by your team, and by us together. Nothing ships because one engineer said it was fine.
You own what we build.
At handover you get the full product: source code, Supabase schema and migrations, App Store and Play Store submissions, and documentation. Your team can take it forward independently or keep us on; that is your choice.
A founder-friendly working rhythm.
You are in every demo, every trade-off conversation, every milestone. Your emotional brief, the thing that makes Mellow feel like a trusted friend and not just another app, is what we are building to. You are not a ticket number.