Project overview.

Objective:

Create a playlist feature for Calm that would let meditators curate a playlist of content.

My role:

UX researcher and designer.

Constraints:

• On spec.

• New feature must reflect the brand identity and fit seamlessly into the Calm design ecosystem.

• No more than 80 hours

Timeframe:

Late August 2021 - mid October 2021.

Competitive Analysis.

To begin, I looked at few of Calm’s secondary and indirect competitors and evaluated their strengths and weaknesses.

What I learned from competitive analysis.

User Research.

I also I interviewed 5 women (15-47 years old) on Zoom who have experience using a meditation app or with meditation in general.

What I Wanted to Learn:

• What  interests them about meditation and how the practice helps them.

• What apps or techniques they use for their practice and how often they practice.

• Understand their experience with meditation apps, as well as their favorite features and pain points using those apps.

• Determine if Calm’s potential audience might find guided routines helpful for finding balance in their day. 

What I learned from my conversations.

The meditators told me that they often searched for meditations to match a mood or feeling, which wasn’t easy to do on Calm, which is organized primarily by content type (Music, Meditation, Sleep Stories) rather than emotion or need. They also all said they were not regular meditators, but that they wished they would become more habitual. 

Defining the problem.

Based on competitive analysis and my 1:1 interviews, I brainstormed 3 possible features or needs that targeted my participants’ pain points:

1. Improved Search

2. A wizard that would match Calm content to the person’s mood/emotion/need/interest.

3. A customized routine/playlist feature that let people curate content according to time of day (Morning Routine, Evening Wind Down) or mood or need (Anxiety, Self-esteem, Creativity).

I must have been on the right track, because during my research phase Calm released a new feature called Recommended Collections.

Yes, but:

While Recommended Collections does make it easier to find content by need; users can only choose among the collections Calm has curated: they can’t create their own collections.

Meditators also cannot listen to or move from one content item to next without searching for and manually starting the next “track.”

Validating the problem.

To confirm whether creating curated playlists meet users needs, I checked Calm’s reviews on the app store and comments on Twitter. I learned that customers indeed wanted a more personalized experience.

Designing solutions.

Based on my research and the comments left by Calm users clamoring for a playlist or easier ways to access their favorites, I pursued the playlist/routine feature.

Task flow.

I created a main task flow using Whimsical to nail down the screens I needed to design and the actions my main persona, Kirsten, needed to take, before moving on to the Design phase.

Wireframes.

While Calm does have a desktop version, I chose to focus on the app version. With my task flow on the screen, I sketched and the turned to Figma to wireframe the experience.

Feedback on my wireframes.

I shared my wireframes during a group critique session before moving on to the high-fidelity designs, and they gave me great feedback:

• Ensure icons meet minimum touch target requirements.

  One of my design colleagues pointed out that the plus icon was not “finger-friendly.”
  

• The path to the playlist was not clear.

  The jump from the penultimate screen to the last screen was not clear to the designers I presented to.
  

• The UI doesn’t make sense in some places.

  Why do some “tracks” have + icons and time options and others don’t? How would you change the order of the “tracks"? The ellipses after the tracks don’t exactly make sense.

What I learned from testing the design.

Task 4, “Go to your completed routine,” confused some of my participants.

Priority revisions.

Insights from my Round #1 Usability Test led me to reiterate several of the screens. Below are the high-fidelity mockups of my final solutions.

You can also view my Version 2 prototype in Figma.

Pain Point 1:

Moderated participants didn’t always know what the + icon meant. Some weren’t sure if they were looking at a playlist or search results.

Design Solution: I removed the feature image to convey this is a blank routine. I also swapped the search bar for an Add Content button.

Pain Point #2

Participants didn’t know how to how to see their Routine after adding content.

Design Solution: A screen slides up after adding a track letting you add more content or go to your routine.

Pain point #2 (cont.)

Participants didn’t know how to how to see their Routine after adding content.

Design Solution: I made the search screen a layer above the routine. Tapping X brings you to the routine.

Pain point #3

Participants didn’t know to click “Done” after editing their routine.

Design Solution: Play button remains disabled until participants tap “Done.”

Feedback.

Participants wanted to see where Routines would live in the Calm ecosystem.

Design Solution: I designed an updated landing page and Routines landing page. You can now see how to get to Routines, your Routines, as well as Calm’s curated Routines.