Calm App: UX/UI Case Study and Redesign

Jan 2024 – May 2024

Figma, Miro, Adobe CC

Natalie Leriche  UX/UI & Motion Designer
Ava Ligouri  UX Designer
Malak Morsi  UX Designer

Overview

We reimagined the Calm App with new features and a modern meditative design with the goal to make wellness more approachable and personal. Mental health and wellbeing take a spotlight during our stressful current events, where doomscrolling and devastating news takes a toll. From conception to development, we utilized Design Thinking and UX methodologies, and prioritized human centered design.

UI Design
UX Research
Product Design
Prototyping
Design System
UX Methodologies
Design Thinking

Challenge

With current events of hate, corruption, and devastation, our screen-time takes a toll on mental health and further isolates us from the world.

Solution

Foster an encouraging environment that eases users into exploring wellness, optimized with personalization and joining communities.

Discover, Define, and Ideate

Discover

We focused on understanding users and the problem space through exploratory research. Utilizing UX methods, we gathered qualitative and quantitative insights to uncover user behaviors and needs. This grounded the project in real-world context and informed evidence-based design decisions.

Methods Used:

Desktop Research
Value Proposition
Market Segmentation
Competitive Analysis
Heuristic Evaluation
Empathy Interviews

Define

We focused on understanding users and the problem space through exploratory research. Utilizing UX methods, we gathered qualitative and quantitative insights to uncover user behaviors and needs. This grounded the project in real-world context and informed evidence-based design decisions.

Methods Used:

Empathy Map
Affinity Map & Themes
Personas
Journey Mapping

Ideate

We translated research insights into actionable concepts by exploring and brainstorming a wide range of solutions. Through collaboratively talking out our solutions, we challenged assumptions and prioritized ideas based on user needs, feasibility, and impact. This stage helped narrow broad possibilities into focused design directions that informed prototyping and testing.

Methods Used:

Problem Statement (POV)
How Might We (HMW)
Minimum Variable Product (MVP)

Design and Development

Intuitive Structure and Ease of Use

To ensure a seamless and user-friendly experience, we prioritized the user. After creating wireframes, and rapid prototyping them, we conducted user testing and implemented feedback from the testing results to improve the usability of our product.

Methods Used:

Content Mapping
User Flow
Rapid Prototyping
Wireframing
Testing & Iteration
User Testing

Deliver

Feature 1: Live Meditation

Guided meditations with instructors for real-time interactions. Pick from a variety of sessions led by experienced meditation instructors.

Feature 2: Self-recorded, Shareable Affirmations

Record positive affirmations with your own voice to play back for yourself or to send to a friend.

Feature 3: Customizable Soundscapes

Soundscapes allow the user to tune out background noises and focus on getting a restful sleep. Make immersive sound environments tailored to your preferences.

Design System

A centralized library of icons, illustrations, button styles, colors, and type-scale. Providing consistency, efficiency, and scalability across all destinations of the Calm App.

Key Takeaways

Infusing Personalization and Community

This Calm App reimagining fosters a sense of togetherness with an open community to fall back to. Whereas beforehand, Calm felt detached. Wellness is now more personalized, able to adjust to the user's specific wants and preferences.

Next Steps

Add a featured “Happening Now” section for live meditation sessions active at the very moment. Expand on the community aspect of sharing positive affirmations. How does one find and make friends in the app?