Adobe Creative Cloud

July 12, 2016 /UX/UI Design /

How the Calm App Uses Empathy and Simplicity to Connect With Users

We talk to Calm founder Alex Tew about the challenges that come with designing a mindfulness-based app that confronts users with various mental health and wellness needs.

When you first open the meditation app Calm, you’re guided to take a deep breath. The font is light and delicate, the background a blue gradient that fades into purple. Almost intuitively you close your eyes. As the screen transitions into the app’s main page, soothing music begins to play.

“I think it’s really important in this day and age to instantly convey what you’re about,” said Alex Tew, founder of Calm.com and the Calm app. “What better way to convey [our] intention than by making it a calming experience?”

Homepage Simplicity

Tew knows a thing or two about getting straight to the point. In 2005, a then 21-year-old Tew launched The Million Dollar Homepage to fund his education. He successfully sold one million pixels for a dollar each by encouraging buyers to “be a part of internet history.” The page remains online and continues to attract over 100,000 views a month.

Aesthetically, his design process has come a long way, but this desire to be instantly clear in purpose remains the key to his success in attracting users.

“I call it homepage simplicity,” he said. “You hit the homepage or the first screen and it’s immediately clear what’s going on. That helps draw people in. I think too many consumer products are a little opaque. They don’t make it clear. People’s attention spans are really short, so you have a very short amount of time to show them what you’re about in the first instance. What can we do on the very first screen of an experience that helps people understand what’s going on?”

Making Users Feel Comfortable

Simplicity is especially important for Calm because meditation and mindfulness can be an intimidating practice, especially for beginners. People are also using the app for a variety of purposes, whether it’s to rid anxiety, help them to fall asleep at night or to find focus at work.

“We are trying to create something that helps people who are totally new to this and that’s a challenge because a lot of people come in with expectations, or they sort of are confused about what meditation is or they think it’s not worthwhile. We are trying to address these problems in the design,” Tew said.

Across these different end uses, Calm has found that asking users to breathe first better prepares them for the experience, no matter their goal. “We think giving people that brief moment to pause and then to go in and choose what they want to do is important rather than just throwing them into something more complex,” he added.

Once the user has passed the welcome screen, the UX is familiar and easy to understand. Since meditation itself is in part about the removal of distraction and obstacles, Calm has opted for navigation mechanisms that users are already familiar with, such as simple buttons and scrollable lists.

“We presented all of our content like that. It’s not particularly innovative, but it works really well,” Tew said.

Gratitude for the Details

Unlike many apps, Calm is about taking a step outside of our busy lives. Once a user has selected his or her desired meditation, there is minimal engagement with the app. Much of meditation is done with ones eyes closed, and yet careful attention has been paid to how the selected colors, imagery and sounds evoke a sense of peace in a user.

“It all adds up, all those elements are really important,” Tew said. “The heart of our app is the audio content in terms of the voice who narrates, teaches and guides you through the meditation, but the whole experience is important from the moment someone opens the app to going through the session and how that session can change the way they feel. You have to think about it from end to end.”

The blue was chosen because of its calming nature, while soundscapes including raindrops, waves and roaring fireplaces were selected because they are comforting and relaxing for users.

Since this app doesn’t rely on typical engagement, Calm has a profile component tracking how many minutes a user has meditated over time, their longest streak and total sessions.

“It definitely helps motivate people to continue and that’s important in our case because meditation is something you benefit from more strongly when you do it everyday,” Tew said.

Designing With Empathy

If it weren’t for Tew’s own meditation practice, Calm would not exist. And yet it is this very element that allows the app to be relatable to users on such a compassionate level.

“Meditation has had a big impact on my life in many ways, but from a design point of view it’s hard to have empathy for your end users unless you too are a customer,” Tew said. “I use the Calm app everyday and I get value from it. I partly built it because I wanted a tool like this.”

Interestingly, using his own product and maintaining a daily meditation practice has made Tew a more mindful designer and more accepting of imperfections.

“A product is never going to be perfect,” he said. “As a designer you’ve got to be willing to accept that there will always be things that you don’t think are great, but a lot of the time they are not that important. Through meditation you learn to focus and you realize what is important and what is not important, and that is definitely true from a design perspective as well.”

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design (Preview) CC, the first all-in-one tool for creating and sharing website and mobile app designs. Test drive the XD preview and tell us what you think.

DOWNLOAD

Join the discussion