Calm Reimagined
Calm Reimagined
Calm Reimagined
A redesign of the Calm app
A redesign of the Calm app
A redesign of the Calm app
Introduction
Introduction
A streamlined Redesign of the Calm app to simplify navigation, enhance personalization, and create a more visually cohesive and calming experience.
A streamlined Redesign of the Calm app to simplify navigation, enhance personalization, and create a more visually cohesive and calming experience.
Role - Product Designer
Role - Product Designer
I led the end-to-end transformation of Calm’s experience by blending strategic UX research with creative systems thinking. Identifying key user pain points around navigation and content discovery, I crafted a new information architecture and visual framework that invites personalization, fluidity, and emotional connection - making mindfulness more intuitive and engaging.
I led the end-to-end transformation of Calm’s experience by blending strategic UX research with creative systems thinking. Identifying key user pain points around navigation and content discovery, I crafted a new information architecture and visual framework that invites personalization, fluidity, and emotional connection - making mindfulness more intuitive and engaging.
Skills
Skills
UX research, Information Architecture, User Interface design, Accessibility awareness, Heuristic evaluation, Competitive analysis, User Journey mapping, UI animation, Storytelling, Wireframing, Prototyping.
UX research, Information Architecture, User Interface design, Accessibility awareness, Heuristic evaluation, Competitive analysis, User Journey mapping, UI animation, Storytelling, Wireframing, Prototyping.
Timeline
Timeline
4 Weeks | Nov 2024 - Dec 2024
4 Weeks | Nov 2024 - Dec 2024
Mentor
Mentor
Shawn Sprockett
Shawn Sprockett
Problem
Problem
The current app feels cluttered, overwhelming users with excessive content and intrusive paywalls. Instead of promoting relaxation, it creates friction. This redesign makes Calm truly intuitive, focused, and personalized.
The current app feels cluttered, overwhelming users with excessive content and intrusive paywalls. Instead of promoting relaxation, it creates friction. This redesign makes Calm truly intuitive, focused, and personalized.
Solution
Solution
Simplified Information Architecture, personalised daily goals, AI-driven search and personalisation, seamless navigation, and a visually cohesive experience.
Simplified Information Architecture, personalised daily goals, AI-driven search and personalisation, seamless navigation, and a visually cohesive experience.
Current Calm app
Current Calm app
Calm is a leading mindfulness app - but its interface ironically overwhelms users with cluttered content, paywall friction, and a lack of emotional sensitivity. I reimagined Calm to restore its essence: an intuitive, personalized, and emotionally resonant experience that aligns with the very emotions it seeks to support.
Calm is a leading mindfulness app - but its interface ironically overwhelms users with cluttered content, paywall friction, and a lack of emotional sensitivity. I reimagined Calm to restore its essence: an intuitive, personalized, and emotionally resonant experience that aligns with the very emotions it seeks to support.
The Disconnect
The Disconnect
Too much noise in a space meant for calm
Too much noise in a space meant for calm
Through user research and app analysis, I uncovered key friction points:
Through user research and app analysis, I uncovered key friction points:
Content overload
Too many screens, tabs, and inconsistent groupings.
Too many screens, tabs, and inconsistent groupings.
Personalization gaps
Everyone receives the same generic homepage, with a lack of engagement.
Everyone receives the same generic homepage, with a lack of engagement.
Cognitive friction
Users must scroll, search, and decide what they need from the large amount of options even when they’re seeking peace.
Users must scroll, search, and decide what they need from the large amount of options even when they’re seeking peace.
Calm Reimagined - where Calm begins with clarity
Calm Reimagined - where Calm begins with clarity
This redesign isn't just a visual makeover, but a systemic re-architecture. I rebuilt Calm around emotional responsiveness and intuitive discovery through:
This redesign isn't just a visual makeover, but a systemic re-architecture. I rebuilt Calm around emotional responsiveness and intuitive discovery through:
Simplified IA for effortless navigation
AI-powered Personalized recommendations
Simplified IA for effortless navigation
AI-powered Personalized recommendations
Consistent visual design system
Engaging interactions and experiences
Consistent visual design system
Engaging interactions and experiences
Six distinct categories
Six distinct categories
The large amount of content is reorganised under 6 clear categories, each with a unique identity (icon and colour) to ensure increased visibility for the features and easy navigation.
The large amount of content is reorganised under 6 clear categories, each with a unique identity (icon and colour) to ensure increased visibility for the features and easy navigation.
A Calm App That Made Me Anxious?
A Calm App That Made Me Anxious?
Meet Anna - a 30-year-old working professional trying to navigate a fast-paced life. She turns to Calm hoping for stillness, but finds herself lost in a maze of content, unclear categories, and a lack of intuitive guidance.
“I opened Calm to relax… but I didn’t know where to begin.”
Meet Anna - a 30-year-old working professional trying to navigate a fast-paced life. She turns to Calm hoping for stillness, but finds herself lost in a maze of content, unclear categories, and a lack of intuitive guidance.
“I opened Calm to relax… but I didn’t know where to begin.”
The Redesign
The Redesign
A Day with Calm Reimagined
A Day with Calm Reimagined
Let’s walk through Anna’s day with Calm Reimagined to see how it supports her emotional journey at each step.
Let’s walk through Anna’s day with Calm Reimagined to see how it supports her emotional journey at each step.
Mood Check-In
Mood Check-In
Start with self-awareness Anna begins her day with a mood check-in. Based on her emotional input, Calm instantly offers tailored content - without needing to dig.
Start with self-awareness Anna begins her day with a mood check-in. Based on her emotional input, Calm instantly offers tailored content - without needing to dig.
Daily Goals
Motivation that feels personal
Based on Anna’s past activity; habits and progress - the app offers three personalized daily goals. This reinforces consistency while keeping her engagement rewarding and low-pressure.
Based on Anna’s past activity; habits and progress - the app offers three personalized daily goals. This reinforces consistency while keeping her engagement rewarding and low-pressure.
Home Screen
Home Screen
One calm space for every tool
The redesigned Home gives equal visibility to all six categories. No more deep scrolling or searching - everything is accessible at a glance, inviting curiosity and exploration.
The redesigned Home gives equal visibility to all six categories. No more deep scrolling or searching - everything is accessible at a glance, inviting curiosity and exploration.
Exploration through Smooth Navigation
Seamless and engaging swipe animations turn navigation between categories into fluid, meditative motion.
Seamless and engaging swipe animations turn navigation between categories into fluid, meditative motion.
For You page
Easy accessibility
The “For You” category consists of content personalised to Anna. This sits at the top of the screen, the first thing Anna sees, making it easy for her to access it anytime with just one click.
It’s a personalized sanctuary where she doesn’t have to think - just unwind. Curated suggestions across categories help her get started without friction.
The “For You” category consists of content personalised to Anna. This sits at the top of the screen, the first thing Anna sees, making it easy for her to access it anytime with just one click.
It’s a personalized sanctuary where she doesn’t have to think - just unwind. Curated suggestions across categories help her get started without friction.
Meditate
Meditate
Focused, Guiding visuals
A minimal interface and calming visuals help Anna stay focused and guide her through the breathing session, without distractions.
All categories (Meditate, Sleep, etc.) consist of clearly displayed sub-categories for the users to explore and easily find.
A minimal interface and calming visuals help Anna stay focused and guide her through the breathing session, without distractions.
All categories (Meditate, Sleep, etc.) consist of clearly displayed sub-categories for the users to explore and easily find.
Sleep Stories
Sleep Stories
Dreamy Aesthetic - gentle transition into rest
As she winds down, Anna plays a Sleep Story. With a dreamy aesthetic, softened palette, she ends her day feeling relaxed and deeply cared for.
As she winds down, Anna plays a Sleep Story. With a dreamy aesthetic, softened palette, she ends her day feeling relaxed and deeply cared for.
Behind the screens 1/5
Behind the screens 1/5
Defining the Visual Identity
Defining the Visual Identity
This moodboard guided the visual tone of Calm Reimagined - balancing softness, depth, and serenity. Dark mode and gradients reduce cognitive load, while soft glows, dreamlike imagery, and light play foster emotional decompression. Each element was chosen to turn every screen into a gentle, immersive space that feels personal and peaceful.
This moodboard guided the visual tone of Calm Reimagined - balancing softness, depth, and serenity. Dark mode and gradients reduce cognitive load, while soft glows, dreamlike imagery, and light play foster emotional decompression. Each element was chosen to turn every screen into a gentle, immersive space that feels personal and peaceful.
2/5
Colour and Accessibility
Colour and Accessibility
An analogous color palette was chosen. This relationship produces a harmonious, cohesive visual experience that is gentle on the eyes and aligns well with the calmness and serenity that the app aims to provide.
The colour palette maintains accessibility with tested contrast ratios.
An analogous color palette was chosen. This relationship produces a harmonious, cohesive visual experience that is gentle on the eyes and aligns well with the calmness and serenity that the app aims to provide.
The colour palette maintains accessibility with tested contrast ratios.
3/5
Wireframes
Wireframes
Various iterations to bring clarity as well as a strong visual identity to the interface. Achieving the right balance between interactive elements and breathing space to avoid a cluttered interface.
Various iterations to bring clarity as well as a strong visual identity to the interface. Achieving the right balance between interactive elements and breathing space to avoid a cluttered interface.
4/5
Redesigned Information Architecture
Redesigned Information Architecture
Before: The structure buried content under layers of tabs and ungrouped options. It lacked a clear hierarchy and overwhelmed users.
Before: The structure buried content under layers of tabs and ungrouped options. It lacked a clear hierarchy and overwhelmed users.
After: Restructured the content into 6 clear categories, every piece of it preserved, but reorganised for easy navigation and discovery.
After: Restructured the content into 6 clear categories, every piece of it preserved, but reorganised for easy navigation and discovery.
5/5
Before vs After
Before vs After
A systems-led redesign for clarity, calm, and consistency. Calm Reimagined moves from fragmented, visually inconsistent screens to a unified experience built on clear hierarchy, emotional flow, and intuitive interaction patterns.
Every screen was rethought to reduce cognitive load, foster presence, and turn Calm into a truly mindful, supportive product.
A systems-led redesign for clarity, calm, and consistency. Calm Reimagined moves from fragmented, visually inconsistent screens to a unified experience built on clear hierarchy, emotional flow, and intuitive interaction patterns.
Every screen was rethought to reduce cognitive load, foster presence, and turn Calm into a truly mindful, supportive product.
Reflections
Reflections
Redesigning Calm wasn’t just about decluttering an app, it was about redefining how we design for emotional wellbeing. This project pushed me to balance user needs, business goals, and creative expression, all while respecting the vulnerability of the product’s purpose.
Redesigning Calm wasn’t just about decluttering an app, it was about redefining how we design for emotional wellbeing. This project pushed me to balance user needs, business goals, and creative expression, all while respecting the vulnerability of the product’s purpose.
Emotion is a Design Layer
Emotion is a Design Layer
Designing for calm required me to treat emotional state as a core input - just like usability or accessibility. From interaction timing to visual tone, I learnt how subtle decisions impact how users feel, not just how they navigate through the app.
Designing for calm required me to treat emotional state as a core input - just like usability or accessibility. From interaction timing to visual tone, I learnt how subtle decisions impact how users feel, not just how they navigate through the app.
Simplicity requires Systems Thinking
Simplicity requires Systems Thinking
Simplifying the experience wasn’t about removing features, but restructuring them. Crafting a clean information architecture taught me the importance of hierarchy, categorization, and progressive disclosure - especially for content-rich platforms.
Simplifying the experience wasn’t about removing features, but restructuring them. Crafting a clean information architecture taught me the importance of hierarchy, categorization, and progressive disclosure - especially for content-rich platforms.
Personalization Isn’t a Feature - It’s a Philosophy
Personalization Isn’t a Feature - It’s a Philosophy
Users don’t want more options - they want the right ones. Building the “For You” experience made me rethink how products can anticipate intent without asking for effort.
Users don’t want more options - they want the right ones. Building the “For You” experience made me rethink how products can anticipate intent without asking for effort.
CLARITY . CURIOSITY . CARE
CLARITY . CURIOSITY . CARE
CLARITY . CURIOSITY . CARE
at the heart of everything I design
at the heart of everything I design
at the heart of everything I design