UI Design Case Study

Calm

A meditation app redesign for easy navigation and meditative experience.
Overview
About

Developing new features for Calm, a meditation and wellness app, based on user research. And redesigning its UI for a more soothing and atmospheric experience.

Awards & Recognition

Communication Arts 2024 Interactive Annual Competition, Shortlist

My Role
UI Design
Design System
Prototyping
Team
Rachel Quan
Natalie Leriche
Malak Morsi
Ava Ligouri
Duration
4 months
Tools
Figma
After Effects
Problem
Confusing Navigation

Users are confronted with confusing navigation. Although there is a plethora of helpful content, it is overwhelming in its presentation.

Solution
Immersive Soothing Experience

Make meditation approachable through comprehensible UI design that lends comfort in the exploration of wellness content.

01
discover
02
define
03
Ideate
04
Design & Development
05
Deliver
For Steps 1 to 3, click here
04. Design & Development
Problem

The Calm app can make for a confusing experience because of the unclear organization of content. It is also very isolating because the content is all pre-recorded. People often don’t know where to start when it comes to the world of wellness and meditation.

Solution

Make the vast world of meditation approachable and beginner-friendly. Create a sense of community by including live features where users can perform interactions with. Extend the benefits of meditation to those with insomnia.

Our Solutions

After content blocking and wireframing, we designed how the app would look to the user.

Feature 1
Live Meditation

Guided meditations with instructors in real-time.

Participate in Live Meditations
Quick Browsing
Show upcoming live sessions that can be directly added to your schedule.
Interaction
Users can comment and perform live interactions with other viewers for a sense of community.
Work Around Any Schedule
Join
One of the ways a user can join a session is directly from their schedule.
Scheduling
Users can check their calendar to see which live sessions they have planned.
Reminders
Users will get reminders of upcoming sessions so they don’t miss it.
Feature 2
Positive Affirmation

Self-record your own positive affirmations because you know yourself best. Listen to own voice until you believe it yourself.

Voice-Record Your Affirmation
Transcribes Automatically
Transcribes as you speak.
Listen and Redo
Listen to what was recorded. If users are not satisfied, they can redo.
Review Again
Have the chance to review the recording a second time before saving it.
Share Positivity With Friends
Fosters Community
By sending and exchanging affirmations, users create bonds.
Pre-made Affirmations
Pre-made affirmations if users
 can’t think of any.
Feature 3
Customizable Soundscapes

Create your own soundscape to fit your sleeping needs.

Personalize Your Sound Experience
Mix and Match
Combine different sounds to create the environment you want.
Range of Genres
Select from a range of different themes that open up to even more specific sounds.
Subtlety of Sound
Adjust the volume levels to your liking.
Set the Length
Choose how long the soundscape will play, for both fast sleepers and slow ones.
Find Solace
Providing an immersive experience through sound, helping users relax.
05. Deliver
Design System
Design Statement
Encouraging Comfortable Exploration

To make the world of meditation approachable, we create a calm, and encouraging atmosphere that eases users into exploring and feeling comfortable in themselves. Providing a sanctuary to immerse their mind in.

Archetype
The Explorer
Visionary
Reflective
Dream
The Caregiver
Comforting
Ambient
Serene
Design Principles

Encouraging

Make users feel comfortable in themselves and improving their wellbeing.

Calming

Puts users to ease, instead of feeling overwhelmed.

Stimulating

Spark curiosity and exploration, especially in an app aimed for self-discovery.

Clear

Approachable and welcoming to users of all levels, from beginners to pros.

Typography
Color Palette
Buttons
Illustrations
Iconography
Reflection
Peaceful & Simple

A soothing UI design for a smooth experience because the last thing users need is more stress from the app that is meant to help them.

Next Steps
Expand Affirmations

Design the collection of pre-made affirmations and how the user may use it. Make recording positive affirmations more customizable, such as choosing a background screen while the affirmation plays.

UX Research

From empathy interviews to persona creation to user testing, our group compiled extensive UX research foundational to the product you see on this page.

Other Projects