Project Overview
MelloMind is a clean, calming landing page for a guided breathing and stress relief app. It’s built for busy minds and tired hearts, helping users find quick moments of calm during or after work.
I led the end-to-end design process, focusing on structure, usability, and emotional tone to guide users from first glance to download.
The Problem
Busy professionals often experience stress, anxiety, and overwhelm during their workday. While wellness apps exist, many are either too complex, cluttered, or visually overwhelming, making it harder to pause and breathe when it’s needed most.
MelloMind needed a landing page that would:
Feel instantly calming and clear
Communicate value without noise
Encourage short, mindful breaks throughout the day
The Goal
Create a minimal, scroll-friendly layout that feels calming
Clearly show what the product does and how it works
Keep navigation and actions simple, predictable, and mobile-friendly
Design Process
Once the problem and user goals were clear, I explored a few light research directions to understand user expectations. From there, I sketched out early ideas and structured the experience through wireframes, user flows, and a clean, engaging visual design that feels both calm and focused.
Wireframing & Flow
I designed the wireframe with a simple, linear flow:
The hero introduces the core message and action
The *"How it Works"* section breaks down the process into 3 steps
The *features* section previews the app UI (audio player, breathing timer, mood tracker)
Social proof is placed right before the final CTA to build trust
This low-fidelity stage helped me test clarity, section spacing, and visual rhythm before moving into visuals.
Visual Design
I used a soft blue palette, round shapes, and balanced white space to give the design a calm, breathable tone.
The breathing timer sits at the center of the visual hierarchy. Every button is large and friendly, and the content is kept short to reduce overwhelm. The design reflects the app’s goal: simplicity, calm, and emotional clarity.
Responsive Layout - made in framer
The layout adjusts seamlessly across desktop, tablet, and mobile. Font sizes scale smoothly, and content stacks with consistent spacing. CTAs remain clear and easily tappable.
Solution & Outcome
Designed a guided landing-page experience with a clear CTA and concise product messaging.
Implemented a simple 3-step value explanation to increase user understanding and reduce cognitive load.
Added interactive product previews to communicate feature value instantly.
Created a clean, calming visual structure that reinforces the brand’s wellness-focused experience.
View Prototype
