Designing for Emotional
Emergencies
A rapid-response breathing experience built for people in panic, overwhelm, or acute stress.
Structure
Problem:
People in panic states cannot process normal UI.
When someone is anxious or overwhelmed, attention span, motor control, and visual processing drop sharply. Most meditation apps assume calmness , this one had to work during dysregulation.
Common meditation app UI
Users reported that existing breathing apps feel cluttered, slow, and “too much” in moments of crisis. They needed something that requires zero interpretation and works under 1–2 seconds of cognitive load.
UX Approach
Reduce → Sequence → Ground → Guide
A four-step method designed to minimize overwhelm and increase clarity:
Reduce : Cut cognitive load. Remove anything that increases decision-making pressure.
Sequence : Present actions one at a time, not all at once. Linear steps reduce overwhelm.
Ground: Use motion, breath pacing, and soft visuals to stabilize physiology.
Guide: Give clear next actions with no dead-ends or uncertainty.
The entire flow was rebuilt to support shaky hands, tunnel vision, and impaired
decision-making. Every screen serves only one action. Color, spacing, and motion
were softened to maintain emotional safety.
Design Constraints
The interface must succeed even when the user’s nervous system is failing.
Color palette must reduce panic, not stimulate it
Motion must be slow, predictable, and grounding
No hidden actions or multi-step interpretation
Emergency escalation must always be one tap away
Key Decision 1: Emotional Check-In
Replace text menus with emotion bubbles to reduce cognitive load.
The original flow relied on lists and category labels. Under stress, this is too slow.
Replacing them with large, soft bubbles made the interaction instinctive—users simply tap what feels closest.
Emotion identification → Selection → State confirmation
Key Decision 2: Breathing Interaction
The breathing ring acts as a single visual anchor when perception collapses.
In high-stress states, users can only focus on one visual element.
The breathing ring became the entire stage — a slow expansion and contraction rhythm acting as the primary grounding cue.
1:59
Breathe In
Visualize→ Breathe In → Breathe Out
Motion and softness tuned to reduce stress, not stimulate attention.
Key Decision 3: Emergency Access
Crisis escalation is always visible, never hidden in menus.
Emergency support needed to be instantly reachable but not alarming.
A compact modal with medical, suicide prevention, and safety options ensures fast access without overwhelming the primary calming flow.
Emergency flows surfaced without disrupting emotional safety
Visual Language
Colors and shadows engineered for emotional safety.
Soft glows to create grounding presence
Muted pastels to decrease sensory overload
This creates a calming, non-judgmental interaction environment.
End of Session UX
A gentle re-entry with clear choices.
Users exit sessions in different emotional states. The closing modal offers three paths:
Continue
Try something else
End session
This removes ambiguity and supports autonomy, a key need during panic recovery.
End of session UX- closing modal and user session rating
What I Learned
Designing for physiology requires removing friction, not adding features.
This project taught me how to design for emotional dysregulation:
clarity, predictability, softness, and single-focus visuals outperform complexity.
The challenge wasn’t creating a “beautiful” app, it was creating one that a distressed mind could actually use
Final Reflections
In moments of panic, UI is either a lifeline or a barrier- I designed the former.
This case study strengthened my ability to design under real constraints: time, emotion, psychology, and cognitive limits. It affirmed my belief that UX has a role in emotional safety and can meaningfully support people when it matters.