UI & UX
Prototyping
User Testing
Info. Arch. (IA)
Data Analysis
UX Research
Headspace was an app that really 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 certainly 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 first landing on the homepage, I felt overwhelmed by the amount of options available to me.
The rows of categories ranged from 'Sleep' to 'Mental Fitness' and prioritized a 'Quick & Easy' section near the top, assuming for me 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 what Calm offers rather than being apparently user-centric.
When you enter the 'Meditate' section in Calm, you are greeted with a side-scrolling navigation at top that is 30 pixels tall. You can only see a fifth of the categories at a time. When I scrolled to the right to see how many more there were, my stomach dropped at the shear number—18! 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 useful difference between the 'Stress' and 'Anxiety' category? And why is there an 'Inner Peace' or 'Emotions' category? Isn't that what all meditation is supposed to help you with?
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.
In this section, you will find 'The Spark' which are meditation talks, meditation classes, breathing exercises, and workouts. These are all wonderful 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 interesting insight (no pun intended) was Insight Timer's true love from its fans. Though they have far less users than Headspace or Calm, the had among the highest ratings in all cases.
Headspace had the clearest 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 clear 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.
Insight Timer's cult following may be explained by its huge library and customizable functionalities. 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 own assumptions about how to improve this product, I wanted to see what current users were complimenting or complaining about.
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 that are 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 are not an issue for users. In fact, they are asking for even more options! This large breadth of options is also why users love Insight Timer.
This is all more reason to make sure that Calm's information architecture is clear and simple to navigate. This also showed me right away that I will need to prioritize the search bar on the homepage to help users navigate a large library.
I conducted a psychological usability heuristic analysis and an information architecture (IA) analysis. In the psychological, I was focused on how easily users could interact with the product. In the IA analysis, I was concerned with how clear and intuitive information grouping and naming were.
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 to use because the interaction area is so small and swiping left is a bit difficult.
The small window of selections does not offer a proper overview of each category.
Users complained about not being able to find where they were in meditation sections. Can you find 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', but then there are sections like 'Meditations' and 'Quick & Easy' which seem to be providing an overview of the app like an advertisement. Their order also seems random.
Important features, like the search bar, profile, and settings, where hidden in the non-descript 'More' section.
The search bar missing on the homepage breaks most user mental models for apps with large libraries.
There a large number of categories to sift through (18) which is quite difficult 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 specifically am I solving again?
User interface
Homepage hierarchy
Content grouping
Category naming & Quantity
Each of these issues have a specific type of issue and call for specific 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 being 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 clearly 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 will be conducting an open card sort specifically as that will help me understand how users naturally want categories named.
In order 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 major 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 own 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 own 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 together.
To see if there are any offerings that tend to be grouped together 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 affect (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 together. The closer they are, the more often participants grouped them together 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 category.
Each category participants tended to create are below along with their percentage of 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 mostly 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 were calling for more social features like user-created playlists. A social offering like that would be welcome in a 'Community' section.
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.
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'.
In the original Calm app, there is a 'Music' section where they put their music but also soundscapes. I didn't even know they had soundscapes until I started exploring the 'Music' section. Soundscapes aren't 'music' persay, so I found the category name to be misleading. Connecting 'music' with 'soundscapes' is a hard, but connecting 'sounds' with 'music' is more intuitive.
For these reasons, nesting 'Soundscapes' and 'Music' in a 'Sounds' section makes the most sense.
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 all of their Sleep Stories can be found but also 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 is named by 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. Sleep soundscapes will be found in 'Soundscapes' under 'Sounds'. Sleep meditations will be found in 'Meditations' under 'Practice'. But where should the sleep stories go?
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 own section would greatly 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 where difficult to discern from one another. This just shows how Calm currently has far too many categories in 'Meditate' that can be consolidated to make an simpler user flow.
However, there is one category I may want to add.
Along with the card sort, I added a short survey to see what categories users would find the most useful. 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. This was confusing because there are many emotions; 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 sitemaps of 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 next steps are to build, test, and compare.
I gathered some friends and family who were at least somewhat familiar with the concept of meditation and meditation products like Calm.
Their meditation experience ranged from an everyday meditators of Headspace to never having meditated regularly before. 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 also sent them an email of how to be prepared for the test such as having Calm and ZOOM downloaded and 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?”
Loved the background video and sound options. They found it unique and played with it a bit with large smiles.
Those smiles quickly faded when they scrolled down as they found the rest of the contents a bit random and cryptic.
Felt the content's order made no sense.
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.
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.
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 used Figma to create a prototype.
“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 lingered for twice that long.
3/4 found the new 'Practice' category to be 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 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!”
Went directly to 'Meditate' and looked in 'Guest Instructors' section. They said they expected a 'Masterclass' to be a meditation. Some lingered in this section for 30 seconds while others lingered 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 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 the 'Community' section.
Participants did not find the interaction with the new category navigation to be immediately intuitive. Though, 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 a difficult time finding the Masterclasses because only 1/4 connected 'Masterclasses' to 'Community'. Though, 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' which was a category second-favorite from my card sort. I randomized the taskbar's options around to force the users to have search by interpreting the categories rather than just remembering 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 right there.”
I hypothesized that this was due to this feature's lack of visual prominence on the homepage.
In order to test how prominent and easy to find the 'continue to next 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.
My hope is that users are able to 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 made some comments about the 'Jump Back In' button.
“I like the [jump back in] because the last thing I want to do when I am stressed and looking for a meditation is have 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' because the last thing I want to do when I am going to meditate is struggle to have 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 protytpe's homepage against Calm's current verion.
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 basic pieces of information any user who is 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 limited to mobile only.
The following are the two screens I showed participants on their mobile phones. the blue dots are where they clicked when given the prompt—
It's interesting to see that Calm's homepage actually has more chances to succeed since there are two correct buttons to tap rather than just one like with mine.
Beyond that, it's clear that—
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' 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.
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 a question about user type (my prototype used a 'Stress & Anxiety' user type). Also 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, kid's, 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 easier to access. This can be achieved by either making it taller (only if reducing category amount) or an entirely new UI.
Consider grouping the breathing exercises, workouts, and journaling features near or with the meditations.
Consider making 'Sleepstories' its own section on the taskbar while religating the rest of the sleep content to their respective 'Sleep' categories in their respective sections.
Consider making 'Soundscapes' its own subsection.
Make category names in all sections more distinct form each other.
Consider adding a 'Depression' or 'Sadness' category to your meditation options.
Reduce the number of categories in each section. This can be achieved either by elimination or consolidation (e.g. 'Stress' and 'Anxiety' can become 'Stress & Anxiety').
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, kid's, and focus content in one place.
Consider renaming the 'More' section 'Lessons' or 'Learning' whihle removing everything other than 'The Spark' or 'Masterclasses'.
