A free, accessible mental health companion that helps users manage anxiety through science-backed breathing exercises, mood tracking, and mindfulness tools.
Breathe with me...
💭
How are you feeling?
📝
What's on your mind?
I'm grateful for...
A complete mental wellness solution designed for accessibility, privacy, and immediate relief.
Create a free, no-signup mental health app that provides immediate relief during anxiety and stress.
Young adults (18-35) experiencing anxiety, especially students and young professionals without access to therapy.
Figma, VS Code, HTML/CSS/JavaScript, Vanilla JS, LocalStorage, Web Audio API
Progressive Web App (PWA) — works on all devices, installable, fully offline capable.
4 weeks: Research (1 week), Design (1 week), Development (1.5 weeks), Testing (0.5 week)
6 breathing exercises, mood tracking, journaling, ambient sounds, meditation timer, grounding exercise, crisis resources.
Millions struggle with anxiety, but solutions are expensive, complex, or inaccessible.
Canadians experience mental illness annually
Gen Z report regular stress or anxiety
Cost of premium mental health apps
Of adults with anxiety receive treatment
"I can't afford Headspace. I can't afford therapy. When I have a panic attack, I just... suffer through it."— User Interview Participant, Age 21
Existing mental health apps have significant barriers that prevent the people who need help most from accessing it:
I conducted extensive research to understand the real needs of people struggling with anxiety.
Studied peer-reviewed research on breathing techniques and their effects on anxiety.
8 in-depth interviews with students experiencing anxiety and stress.
47 respondents shared their experiences with mental health apps.
Observed 5 users during high-stress moments to understand real behavior.
Users in panic states need relief within 60 seconds. Complex onboarding increases anxiety.
84% of users are concerned about their mental health data being stored in the cloud.
71% of users who tried premium apps stopped using them because of subscription costs.
Users want to feel understood, not lectured. Empathetic microcopy makes a difference.
Based on research, I created detailed personas to guide design decisions.
Maya is a third-year business student working part-time at Starbucks. She experiences anxiety attacks 2-3 times per week, usually triggered by school deadlines or financial stress. She tried Calm but cancelled after the free trial.
I analyzed leading mental health apps to identify opportunities for differentiation.
| Feature | Breathe (Mine) | Headspace | Calm | Finch |
|---|---|---|---|---|
| Price | Free Forever | $69.99/year | $69.99/year | Free (IAP) |
| Account Required | ✓ No | ✗ Yes | ✗ Yes | ✗ Yes |
| Download Required | ✓ No (PWA) | ✗ Yes | ✗ Yes | ✗ Yes |
| Breathing Exercises | ✓ 6 types | ✓ 3 types | ✓ 4 types | ✗ No |
| Mood Tracking | ✓ Yes | ✗ No | ✗ No | ✓ Yes |
| Grounding Exercise | ✓ 5-4-3-2-1 | ✗ No | ✗ No | ✗ No |
| Crisis Resources | ✓ Yes | ✗ No | ✓ Yes | ✗ No |
| Data Privacy | ✓ Local Only | ✗ Cloud | ✗ Cloud | ✗ Cloud |
| Works Offline | ✓ Yes | ✗ Limited | ✗ Limited | ✗ No |
I followed a human-centered design process to create a solution that truly helps.
Week 1
Week 1
Week 2
Week 2-3
Week 3
Week 4
One tap to start breathing. Maximum 2 interactions to get help.
No signup, no download, no paywall. Just open and use.
Soft gradients, gentle animations, dark mode by default.
All data stored locally. Nothing ever leaves your device.
Warm, supportive microcopy. You're not alone.
Every color, animation, and interaction was chosen to reduce anxiety.
Breathe. You're safe.
Using system fonts ensures instant loading and familiarity. During a panic attack, every millisecond matters — and unfamiliar typography increases cognitive load.
Every feature was designed to provide real, evidence-based relief.
Box Breathing (Navy SEALs), 4-7-8 (Dr. Weil), Resonance, Quick Calm, Energize, and Sleep Preparation — all scientifically validated.
One-tap mood logging with a beautiful 7-day visual history chart. Identify patterns and triggers over time.
Guided prompts help you process difficult emotions. Everything stays on your device — completely private.
Rain, Ocean, Forest, Fireplace, Wind, and Night sounds to create a calming environment anywhere.
Simple timer with presets (5, 10, 15, 20 minutes) and gentle bell notifications when complete.
Evidence-based grounding technique for panic attacks. Focus on your senses to return to the present moment.
Real challenges encountered during design and development, and how I overcame them.
JavaScript timers drift over time, causing breathing animations to desync from instructions.
Implemented self-correcting timer with timestamp comparison that adjusts for drift each cycle.
Modern browsers block autoplay audio, breaking ambient sounds on first interaction.
Only trigger audio on explicit user tap, with visual feedback if audio fails to play.
iOS Safari's dynamic toolbar causes 100vh to overflow, breaking full-screen layouts.
Used new dvh (dynamic viewport height) CSS unit with fallback for older browsers.
Complex UI increases anxiety during panic attacks — the opposite of what we want.
Maximum 2 taps to start breathing. Extra-large 48px touch targets. Zero confirmation dialogs.
User testing revealed significant positive outcomes.
Task Success Rate
Time to First Breath
Stress Reduction
SUS Score
"This is exactly what I needed. Simple, beautiful, works. I wish I had this during my last panic attack."
"The breathing animation is hypnotic. I forgot about my stress. I actually felt my heart rate slow down."
"I love that it doesn't ask for my email or credit card. Finally, something that's actually free and private."
Key takeaways from this project that shaped me as a designer.
Building everything in a single HTML file forced elegant, efficient solutions I wouldn't have discovered otherwise.
Understanding what a panic attack actually feels like shaped every design decision — from colors to animation speeds.
Cutting features was harder than adding them. Every feature I removed made the app better for users in crisis.
My assumptions about what users needed were often wrong. Real user feedback completely changed key interactions.
Micro-interactions, haptic feedback, and warm microcopy created the emotional impact that made users feel cared for.
Supporting reduced motion, screen readers, and multiple themes wasn't extra — it was core to the mission of helping everyone.
Ideas for Version 2.0 and beyond.
Voice-guided sessions for deeper relaxation and sleep preparation.
AI-powered analysis of mood patterns with personalized recommendations.
Wrist-based breathing exercises with heart rate monitoring.
French, Spanish, Mandarin, and more to help people worldwide.
Anonymous support groups and shared breathing sessions.
Dashboard for therapists to recommend and monitor patient progress.
Built with modern web technologies for maximum performance and accessibility.
Figma for wireframes, prototyping, and design system creation.
VS Code with HTML5, CSS3 (Custom Properties), Vanilla JavaScript.
LocalStorage API for privacy-first, offline-capable data persistence.
Web Audio API for programmatic bell sounds and ambient soundscapes.
Vibration API for haptic feedback, PWA for installability.
WCAG 2.1 AA compliant, reduced motion support, screen reader friendly.