UI & UX
Prototyping
User Testing
Info. Arch. (IA)
Data Analysis
UX Research
Headspace was an app that helped me get through the chaos of 2020. Having something so accessible and wise in my pocket always seemed to be quite a powerful tool for a human dealing with human things, especially lately. When I tried Calm, I found its name ironic when using their annoying navigation to find something interesting. That's why I thought it would be an excellent project for some card sorting research.
Calm is a meditation, sleep, and relaxation app. It has over 2 million subscribers making it one of the most successful products available in the meditation space today.
Out of all the meditation apps out there, Calm is undoubtedly one of the highest quality. Checking it out myself, I found their website clean and clear but found a different story entirely when I started using their mobile app, which is the most common product format for most current Calm subscribers.
When I was first landing on the homepage, I felt overwhelmed by the available options.
The rows of categories ranged from 'Sleep' to 'Mental Fitness' and prioritized a 'Quick & Easy' section near the top, assuming that's what I wanted. I also found the vertical and horizontal scrolling combination a bit jarring and unwelcoming.
Overall, the homepage seemed to serve only as an overview of Calm's offers rather than being user-centric.
When you enter the 'Meditate' section in Calm, you are greeted with side-scrolling navigation at the top that is 30 pixels tall. The screen will only allow you to see a fifth of the categories at a time. Eighteen types seemed to be a bit excessive to me. This made me immediately miss Headspace's clean, progressive disclosure and distinct categories.
The categories are also a bit odd. Ones like 'Beginners' or 'Focus' are clear, but what is the valuable difference between the 'Stress' and 'Anxiety' category? And why is there an 'Inner Peace' or 'Emotions' category? Isn't that how all meditation is supposed to help?
I call this section 'Calm's everything drawer' because it's where they put the content that they didn't know where else to put.
This section will find 'The Spark,' which are meditation talks, meditation classes, breathing exercises, and workouts. These are all beautiful selections, but a user would need to stumble upon them to find them in the 'More' section.
Keeping the search bar in this section also seemed like an odd choice. For a product that has a large number of selections, search bar access should be a priority.
Calm has two main competitors: Headspace and Insight Timer.
Calm has been growing pretty steadily lately. They're currently the most subscribed in this space.
However, Calm has some of the most unhappy users. This became clearer when I visited their reviews on the iOS and Android stores as of January 2021.
Headspace
Insight Timer
Calm
Headspace
Insight Timer
Calm
Though iOS users were kinder, there was a clear correlation that, despite their recent growth, Calm has some of the most unhappy users. Looking at some more data, it was clear how Calm fit within the meditation product space.
Lately, Calm has been growing in users the most. However,Headspace seems to have the best user retention. Another fascinating insight (no pun intended) was Insight Timer's true love from its fans. Though they have far fewer users than Headspace or Calm, they had the highest ratings in all cases.
Headspace had the most straightforward site structure. All sections had simple names: Meditate, Sleep, Move, and Focus. Compare this to Calm's 'More' section. These distinct, clear, and minimal categories show that Headspace knows its users' needs well. This may help explain their high user retention.
Calm's recent appeal became apparent when I opened it for the first time in a while. The background is fully customizable, with almost thirty options of nature videos with sounds. This was unique among its competitors and made me feel relaxed.
Its vast library and customizable functionalities may explain insight Timer's cult following. For example, users can customize their homepage with only the sections they use, and they can search for meditations by length.
After developing a host of my assumptions about improving this product, I wanted to see what issues current users were having.
To do this, I went to app reviews on both iOS and Android to find trends.
Users complained that they had a hard time finding content they want.
Users complained that the app did not remember where they were last in a series of meditations meant to be listened to in order.
Users complained that they couldn't find the features they want.
Much like myself, users were very annoyed by the small, side-scrolling menu.
Users requested customization much like Insight Timer's features.
Contrary to my original assumption, the large number of meditations is beloved.
It's interesting to note that Calm's gigantic library of meditations and sleep stories is not an issue for users. They are asking for even more options! This enormous breadth of possibilities is also why users love Insight Timer.
This is all more reason to make sure that Calm's information architecture is clear and straightforward to navigate. This also showed me that I would need to prioritize the search bar on the homepage to help users navigate an extensive library.
I conducted a psychological usability heuristic analysis and an information architecture (IA) analysis. In the psychological, I focused on how easily users could interact with the product. I was concerned with how clear, and intuitive information grouping and naming were in the IA analysis.
From the information I gathered during this process, I found four issues that needed attention to help optimize the app.
User interface
Homepage hierarchy
Content grouping
Category naming
The category menu in each section is not inviting because the interaction area is tiny, and swiping left is difficult.
The small window of selections does not offer a good overview of each category.
Users complained about not being able to find where they were in meditation sections. Can you see the 'Day 2' option in this image easily? Either of them? Neither did I. These 'continue' sections are simply too subtle.
There is a lot of content on the homepage that has the potential to distract the user.
Some content is user-centric such as the 'Recommended for You' and 'Recently Played.' Still, sections like 'Meditations' and 'Quick & Easy' seem to provide an overview of the app. Some noted that it felt like the app was advertising to them while they were on it. Their order also seems random.
Like the search bar, profile, and settings, Calm's app hid essential features in the non-descript 'More' section.
The search bar missing on the homepage breaks most user mental models for apps with large libraries.
There are many categories to sift through (18) which is quite challenging to do in a small side-swiping window.
The category names also did not seem distinct enough ('Stress' vs. 'Anxiety') while others were cryptic ('Emotions' or 'Inner Peace'). Simply eliminating these will simplify the experience.
Some category names like 'The Spark' or 'Calm Body' may be unclear to some users.
When selecting my research methods, it's always best to review what precisely I am solving again:
User interface
Homepage hierarchy
Content grouping
Category naming & Quantity
Each of these issues has a specific type of issue and calls for particular research methods. We can break them down one by one.
For the user interface issue, I will need to build a prototype with an improved UI. I will then need to test it with users against Calm's current app to rate the amount of improvement.
In this new prototype, I want to create a 'Jump Back In' button that is easily noticeable. To test verify, I would like to send out a first-click test to at least five participants to ask them to continue their series on both my prototype's homepage along with Calm's current app.
I wanted to give the contents of the 'More' section the respect they deserve is giving them a more descriptive category. There are options like Masterclasses, Breathing Exercises, and Journaling, but under what groupings will users most easily find them? This is why card sorting exists.
The 'More' category needs a new name and purpose, but to what? And what should those cryptic categories be called? Should they just be removed? These questions told me that I would be conducting an open card, specifically as that will help me understand how users naturally want categories named.
To understand participant needs better, I added a short exiting survey asking them their top three meditation app needs to discover any still-needed categories.
I used Optimal Workshop to conduct an open card sort where I turned all the significant but specific offerings of Calm, such as focus meditations or soundscapes for sleep, and asked participants to sort thirty of these offerings (called 'cards') into their categories.
Being an open card sort since I need a new section to replace 'More,' I also gave my participants the ability to name their sections.
What cards am I going to have participants sort? (30 total)
All 18 meditation categories as they are.
All sleep sound categories
All music categories
Masterclasses as a whole
Breathing exercises as a whole
Workouts as a whole
The Spark as a whole
Why am I doing this?
To understand how users naturally group types of meditations.
To see if any offerings tend to be grouped at a high rate, suggesting that some categories should merge.
To see what names of categories participants create for what cards.
To see how users grouped the selections whether by ailment (stress, anxiety...), by desired effect (happiness, relaxation...), or by subject (meditation, sleep stories...).
Below is a 3D Cluster Map. It graphs the offerings (cards) on a 3D plane according to how participants tended to group them. The closer they are, the more often participants grouped them in the same category.
These neighboring points form 'clusters' or categories of offerings that participants tended to create. Like the points, the closer they are, the more related participants tended to see each type.
Each category participants tended to create is below and their percentage of the agreement to the right of each category name.
The categories above made more sense than Calm's current IA (Meditate, Sleep, Music, More). This is mainly because all sections now have a distinct purpose to their labels. The 'Community' section would also be a new addition.
Participants saw 'Masterclasses' and 'The Spark' as existing together under either a 'Lessons' or 'Community' section.
'Community' seemed to be the most fitting term since reviewers of the product called for more social features like user-created playlists. A social offering like that would be welcome in a 'Community' section.
Since these clusters ended up being so close to each other, I decided that the 'Meditations' and 'Exercises' categories should exist under a single category: Practice.
The 'Practice' section will contain 'Meditations' and 'Exercises' subsections. Meditations, breathing exercises, workouts, and journaling can all be considered mindful 'practices.'
Participants placed the breathing exercises, workouts, and journals into a category called 'Exercises.' This category (in blue) was also quite close to the 'Meditations' category (in green). This means that participants saw them as quite closely related.
Users categorized their offerings by subject (Meditations, exercises, stories, etc.) rather than by desired effect (Relaxation, Sleep, Focus, etc.).
Currently, Calm has a 'Sleep' section where users can find all of their Sleep Stories and meditations, music, and soundscapes for sleep. In my version, all 'Sleep' content will be relegated to their appropriate section.
The 'Sleep' section is the only section on Calm that's named by the desired outcome. The rest of the taskbar sections are named by offering types. This inconsistent IA can be confusing for users. Categorizing content by type throughout would simplify Calm's UI.
Since many users come to Calm specifically for the Sleepstories and the fact that they want a seemingly endless supply of them in the future, giving 'Sleepstories' its section would significantly improve their findability.
I created cards based on each meditation category, a task that proved to be a bit difficult because a lot of the categories were difficult to discern from one another. This shows how Calm currently has far too many categories in 'Meditate' that can be consolidated to make a more straightforward user flow.
However, there is one category I may want to add.
I added a short survey to see what categories users would find the most useful, along with the card sort. It turns out that the category they would find the most useful was one, out of their ocean of categories, Calm didn't have. It was depression.
Depression content, such as a meditation called 'Easing Depression,' can be found in the 'emotions' category in the current Calm app. However, there are many emotions and depression is just one of them. Responding to user needs for 'Depression' content with its own category will help them find the content they want.
The best way to see how I am changing the IA structure based on the open card sort would be to compare the mobile version of the current Calm app to the new one I am proposing.
You have to love the giant 'More' section on the bottom. Let's see how I can tidy this up a bit by implementing my new IA.
Now, every section has its place and purpose. There is also little redundancy except for the 'Full Libraries' section on the homepage. Here, users can find all sleep content, all focus content, or all kid's content in one place.
So far, I've used my card sorting study to plan a new sitemap. The following steps are to build, test, and compare.
I gathered some friends and family who were somewhat familiar with the concept of meditation and meditation products like Calm.
Their meditation experience ranged from everyday meditators of Headspace to having just started. This range of meditation product experience helped me assess how user-friendly this new IA was to everyone.
My overall goal for this test was to compare the ease of navigation and use of Calm to the new one I created. So, I divided the test into two sections. First, we looked at Calm directly before mine to compare.
We scheduled time with each participant to meet over ZOOM for 45 minutes.
I then sent them an email about how to be prepared for the test. This included having Calm and ZOOM downloaded, having a ZOOM account, and having it logged in on their phone with free accounts they created beforehand.
We met over ZOOM, where I asked them to share their phone screen with me. I recorded the session and took notes.
They opened Calm and the test began.
"[The homepage is] providing me a busy experience."
“The homepage has so much that I was distracted, so I didn’t even see the taskbar. I thought the homepage was all of Calm at first.“
“I don’t think there is an order [to the contents of the homepage].”
“I wish there was a search bar on the homepage. Where is the search bar?”
Participants loved the background video and sound options. They found it unique and played with it a bit with giant smiles.
Those smiles quickly faded when they scrolled down as they found the rest of the contents a bit random and cryptic.
Participants felt the content's order made no sense.
Participants liked sections that were thinking about them like 'My Faves' and 'Recently Played,' but sections like 'Mental Fitness' and 'Meditations' felt more for Calm's sales. Users also didn't know what they were.
Participants thought the wrapped present in the upper-right corner to encourage them to share Calm with friends showed that Calm cared about Calm rather than their users.
Participants wanted the ability to edit these categories, which is a feature that Insight Timer currently has.
"This taking way too long!"
“I don’t like how slippery the side-scroll is. It’s like it running away from me.”
“[The categories] feel all over the place. They seem random.”
“I found it overwhelming. Not easy at all to see one to the other side. I find the swiping right annoying.”
Were distracted by the homepage and lingered on all its contents for about a minute.
Tapped into 'Meditate' and were confused right away from the top sliding bar.
Could not find a category they would expect to find content for depression.
Did not know the purpose of the 'Emotions' category, which was where this meditation was to be found.
4/4 Looked for it in the 'All' category in 'Meditate' rather than attempt to find it in the overwhelming number of categories (their words, not mine).
It took them about 5 seconds to even notice the category menu in 'Meditate'.
They found the side-scroll to be "annoyingly slippery".
They were annoyed by the "small window of a view" they were given of the categories.
Their thumb covered some of the options when searching.
"I give up... can I please give up?"
“That was terrible. I would not recommend that to anyone.”
“[The 'More' section is] the section where they gave up on the sitemap”.
“I had to go through a lot to find [the Masterclasses] in [The 'More' section].”
Went directly to 'Meditate' and looked in the 'Guest Instructors' section. They said they expected a 'Masterclass' to be a meditation. Some lingered in 'Meditate' for about 30 seconds while others lingered for as long as 4 minutes.
They only found the Masterclass section out of a process of elimination, not to mention frustration and desperation.
2/4 were quite annoyed to find the search bar in 'More'. 4/4 preferred it on the homepage.
“I like this better because I recognize [features like the search bar, settings, and profile] right away.”
“I like how [the taskbar] is laid out. It seems clearer and more direct to me.”
"I really like how much simpler this is.”
“I Feel that this is more tailored to me.”
Immediately called out the search bar, settings, and profile buttons.
Verbally acknowledged appreciattion for the simplification of sections and choices.
Found the categories made more sense.
Found the category order to be more useful and relatable.
Liked the fact that each category was specific to their needs.
Liked the 'See All' at the end of each side-scroll and bottom
“Right away I knew what to do and I found it. Much easier than Calm.”
"Very intuitive and easy!"
“Stress & Anxiety makes more sense to me because they’re so similar.”
“I like the vertical scrolling more than the side-scrolling because it's easier to use and more natural to read.”
Were still distracted by the homepage and lingered on all the contents for about half a minute. Compare this to Calm, where they remained for twice that long.
3/4 found the new 'Practice' category clear and helped them complete this task right away.
4/4 found the new 'Exercises' category to be clear in use.
2/4 struggled to notice the navigation at the top. Once they realized how to interact with it, they liked the interaction.
Verbally acknowledge appreciation for the newfound lack of categories.
Found the new categories more relatable because it was clear that they were emotions-based.
Liked the new 'Depression' section. They thought it made more sense than Calm's 'Emotions' category.
2/4 had a hard time connecting 'Practice' with 'Meditate,' but later commented that they then understood and liked the choice once they discovered it.
The content is arranged in a way that makes more sense.
I did not expect it to be in the Community section. I thought it would be in practice.
I saw ‘Community’ and thought it was a place to go to for outward influence, like a teacher.
I really like the new social aspects!
I went directly to 'Meditate' and looked in the 'Guest Instructors' section. They said they expected a 'Masterclass' to be a meditation. Some lingered in this section for 30 seconds, while others stayed for as long as 4 minutes.
1/4 of my participants found it with no problems, while the other 3/4 only found the Masterclass section out of the process of elimination after sifting through the meditations.
Participants felt the homepage was easier to digest and was more user-centric.
Participants felt more at ease with fewer and more distinct categories.
Participants interacted with my navigation quicker and with less annoyance.
Participants liked the 'Community' section.
Participants did not find the interaction with the new category navigation to be immediately intuitive. Though, they noted immediate delight when they discovered it.
Participants did not feel that the category navigation gave them a clear overview of the categories either.
Participants still had difficulty finding the Masterclasses because only 1/4 connected 'Masterclasses' to 'Community.' Though they noted immediate delight when they discovered it.
I felt I could build a navigation that could further improve the findability of specific content.
I created a much smaller side-scroll for the category selection. I stacked options four on four to make for a simple roll of the thumb to them all. This allows users to see all the categories at once.
I also changed 'Community' to 'Lessons,' a category second-favorite from my card sort. I randomized the taskbar's options to force the users to search by interpreting the categories rather than just remembering the placement of items.
Three of my past participants were willing to give me one more user test.
I scheduled 15 minutes with them on ZOOM, just like last time.
I had them do the same three tasks again on my old prototype.
I then had them switch to the version above to perform the same tasks.
I asked some follow-up questions.
More intuitive. Icons are very welcoming.
A lot quicker to see.
I notice this more as a category selector.
Huge improvement! ... It’s much easier to use because it’s all clear.
I hypothesized that this was due to this feature's lack of visual prominence on the homepage.
To test how prominent and easy to find the 'continue to following meditation in a series' button was on Calm's current homepage, I ran a test to see how quickly and accurately users tapped the correct selection when given such a prompt. This is called a First--Click test is.
These selections on Calm's homepage are highlighted in red above. Below is my prototype with the same feature highlights.
I hope that users can find this button quicker and more often on my prototype because I made it more prominent on the page and simplified the homepage in general.
When participants from my user tests saw my prototype after interacting with Calm, they commented about the 'Jump Back In' button.
I like the ['Jump Back In' button] because the last thing I want to do when I am stressed and looking for a meditation has to look for it.
The 'Jump Back In' button helps me feel like this is more for me.
Oh! Jump back in! I like that!
I like the 'Jump Back In' button because the last thing I want to do when I am going to meditate I struggled to find where I was.
Test the findability of the 'continue to next meditation in a series' button on Calm's current homepage.
Test the findability of the 'Jump Back In' button on my homepage.
I used Usability Hub to test my prototype's homepage against Calm's current version.
When manipulating my Calm account for the images to use for the test, I wanted to provide a realistic homepage where the user has looked at another offering since they last visited their meditation series.
I sourced participants on SurveySwap, LinkedIn, Reddit, Facebook, and UX Slack channels.
This question sets up two essential pieces of information any user coming back to Calm wanting to continue their meditation series would have.
They know they were listening to a meditation series of some.
They want to continue to the next meditation in the series.
I then showed them the two screens. Calm's first and then mine. The test was only for mobile.
The following are the two screens I showed participants on their mobile phones. The blue dots are where they clicked when given the following prompt.
Participants were able to find my 'Jump Back In' faster than Calm's subtle 'continue' button.
Participants were able to find my 'Jump Back In' button more often as well.
Given this data, it's clear that the multiple unhappy reviewers of Calm who said that they couldn't find where to continue their meditation series would find these UI changes to be more user-friendly.
It's interesting to see that Calm's homepage has more chances to succeed since there are two correct buttons to tap rather than just one like with mine.
User interface
Homepage hierarchy
Content grouping
Category naming & quantity
Consider removing non-user-centric and Calm-focused features such as 'Meditations' and 'Mental Focus' on the homepage.
Consider reordering homepage content to prioritize user-centric features at the top.
Consider moving the background scene controls and all promotional material to the settings.
Consider moving the search bar, settings, and profile access to the homepage.
Consider adding an onboarding that includes user type (my prototype used a 'Stress & Anxiety' user type). Consider adding a 'User-centric' section on the homepage that shows specific recommendations for that particular type of user that users can change as their lives change.
Consider adding a 'Full Libraries' section on the homepage where users can see all sleep, kids, and focus content in one place.
Consider giving users the ability to customize the rows of contents on the homepage themselves.
Consider redesigning the UI of the 'continue meditation in a series' button more visually prominent and easier to access.
Redesign the category UI within each section navigation to be more accessible. Accessibility can achieve this by making it taller while reducing the category amount.
Consider grouping the breathing exercises, workouts, and journaling features near or with the meditations.
Consider making 'Sleepstories' its section on the taskbar while relegating the rest of the sleep content to their respective 'Sleep' categories in their sections.
Consider making 'Soundscapes' a subsection.
Make category names in all sections more distinct from each other.
Consider adding a 'Depression' or 'Sadness' category to the meditation options.
Reduce the number of categories in each section. Elimination or consolidation (e.g. 'Stress' and 'Anxiety' can become 'Stress & Anxiety) is needed.
Consider renaming 'Music' to sound to be inclusive to the soundscapes.
Consider adding a 'Full Libraries' section on the homepage where users can see all sleep, kids, and focus content in one place.
Consider renaming the 'More' section 'Lessons' or 'Learning' while removing everything other than 'The Spark' or 'Masterclasses.'
