Overview

Headspace has one mission: to improve the health and happiness of the world. They know how important meditation is to their users, which is why they are interested in how they can further personalize that experience. How would allowing more customization support a user's experience and allow them to reach the goals that they want to achieve through the app?

Challenge

Add a feature to the existing Headspace app that allows users to further personalize their meditation experience.

ROLE

UX/UI Designer, UX Researcher

TOOLS

Figma

DURATION

March 2021 (two weeks)

CLIENT

Headspace

1. Empathize
🌎
research goals
What we're trying to accomplish
  • Learn about various meditation practices, motivations for doing it, and challenges that come with it
  • Learn more about Headspace's competitors and where the areas of improvement are
  • Identify how users find what meditation practices work best for them and address their needs
View my research plan
research questions
These were answered through research
  • What do users value the most from their meditation experience?
  • What do people use to meditate and why?
  • What results have users gotten out of practicing meditation?
  • What are the main challenges that people have when practicing meditation and mindfulness?
Secondary research
Learning more about Headspace, Meditation & Mindfulness

I wanted to get familiar with what Headspace does and what they're trying to accomplish. It was also helpful to learn more about the importance of meditation and mindfulness. Some information that I learned included:

📝

There are courses for anger, depression, work performance, kids, etc

📈

The coronavirus pandemic has led to a surge in downloads of mental wellness apps

💬

I read through user reviews on Reddit and the app store to see people's suggestions

Competitive analysis
Where else do people look for meditation content?

I started to learn who Headspace's main competitors are during secondary research, with the top one being Calm. After my user interviews, I also revisited this and added YouTube as an indirect competitor, as many people mentioned that they find meditation videos on here.

Strengths 👍

I noticed that a lot of these apps had some kind of mood/check-in feature that was offered, which helped give recommendations that were related to how the user was feeling that day.

Weaknesses 👎

From navigating these apps and reading reviews online I noticed that they had a lot of content, and it was sometimes confusing to know where to start, especially for a beginner who is just starting their meditation journey.

user interviews
Hearing from our users

I kept the questions open-ended since the goal was to learn more about how people practice meditation & mindfulness, and what their pain points are. Some of the questions that I asked that gave valuable insights included:

View my full list of questions here
empathy map
Understanding our research findings

There were a lot of insights, but some of the ones that helped lead the direction of my project were:

2. Define
👤
Persona
Meet Kim

The insights that were gathered were used to define the goals and needs of our target user, Kim. She is a young professional who recently lost her job due to the COVID-19 pandemic, and is feeling very lost and uncertain. She decides to try out meditation, and starts by downloading Headspace. She's been enjoying it so far, but finds that she spends a lot of time searching for the right content to fit how she's feeling that day.
Some of her goals that I focused on were:

project goals
Aligning our user, business goals, and technical considerations

For the business goals, it helped to look in to the founder of Headspace, Andy Puddicombe, and see why he wanted to start Headspace. For the user goals, I referred back to my persona Kim, as well as my research to see why people were practicing meditation.

feature roadmap
Deciding on what feature to add

Some of our goals above included addressing specific concerns, customization, and be a welcoming place for beginners. I decided that adding a mood check-in would be the most valuable. This would allow users to further personalize their meditation experience to how they're feeling on a specific day, as many expressed that the content that they look for each day is dependent on their mood, and easily be recommended content. Also, from looking at competitors, it was clear that this was something that Headspace was lacking. I decided to create a roadmap of all the features that could be associated with this mood check-in, and focused on designing the P1, P2, and P3 features.

app map
Organizing content

I started by creating an app map of the existing pages to see what the current navigation was like. This made it easier for me to see where I could implement the mood check-in feature. I decided that it would be best for it to be accessible from the today page, as I assumed that this was a page that people visited frequently. I was debating if it should be accessible from each of the other pages as well (i.e., meditation, focus, etc), but decided to have it in one central spot so that people would always know where to look for it. The new content related to the mood check-in can be seen in green.

user flow
The path to finding a meditation

Similar to the app map, I decided to first do a user flow of the existing Headspace app, following the task of finding a meditation session to do. I then incorporated the mood check-in into this existing flow (as seen in green), to see where it would fit in in the process. I decided that it may be considered in two places - when users first open the today page, or if they're looking on the meditation page and may decide to go back to the today page to do the mood check-in. Some considerations I had were:

3. Ideate
💭
wireframes
Making some design decisions

I first sketched out some ideas on how the mood check-in should look. The pages I decided to focus on were how the mood check-in would be implemented on the today page, and then the different steps of the check-in and how they would look. I decided that having the tracker under journey in the user's profile would be the best place, as this is where you can currently find information related to Headspace's monthly stress check-in.

For my form components, I got inspiration from their monthly stress check-in to maintain some consistency, and wanted the recommendations page to look similar to their current content pages.

style tile / ui kit
Familiarizing myself with Headspace's design

The UI design approach was a bit different for this project since the brand already exists. I spent some time researching about Headspace's design guidelines, which helped me a lot with the font and size. For the colours, Headspace uses a bright orange colour as it's main brand colour, and frequently uses the blue for CTAs. Recognizing how these UI elements were used throughout the app helped get me familiar so that I could seamlessly add my designs into the existing app.

ui designs
Integrating my feature into Headspace

Headspace has a very unique illustration style, so I wanted to try and create something similar to represent the different emotions in the mood check-in.

As mentioned in an article that I read, "we have six innate emotions: fear, anger, happiness, sadness, surprise and disgust. Within these basic categories, there are many nuances and intensities of emotions that we can describe in different ways." I thought that these emotions were a good overview of what people typically feel, and then it could be broken down further.
I sketched out different ways that these emotions could be presented. For inspiration, I looked at Headspace's illustrations, as well as emojis.

Inspo:
Result:
4. Prototype
💻
objectives
What I wanted to get out of user testing
scenario #1
Completing the mood check-in

Starting on the today page, users were asked to start their mood check-in and complete it. In order to create this, I had to show how the mood check-in would look on the today page, and then the four pages of the mood check-in. I also showed what the recommendations page would look like once the check-in was completed. I wanted to make sure that users knew how to navigate through the added feature, and see if there were any problems.

scenario #2
Accessing the mood check-in tracker

I asked them to navigate back to the today page, and where they would go to look for information related to their past mood check-ins. I wanted them to see how the tracker was presented in the calendar format, but I also wanted to make sure that they would know where to go to access it.

5. Test
📝
conducting the test
Putting my prototype to the test

The tests were conducted remotely over Zoom with four participants, who had very minimal to no experience with using Headspace. I watched them complete the given tasks, with the tests ranging between 15-20 minutes. All participants were able to successfully complete the tasks, but many had trouble figuring out where to access the mood check-in tracker at the beginning of scenario #2.

I asked users to rate how easy they found each scenario out of 5. Below are the average scores of how easy the four participants found each scenario:

Scenario #1
5/5
Scenario #2
3/5
affinity map
Understanding the findings

In regards to scenario #1, I didn't find that people had any major concerns. However I did get some valuable feedback about the option to add a note, as I told users that they were able to proceed with or without adding a note, to see what they would do. Overall it seemed like people liked the optionality of it, and that it was helpful if they were serious about tracking their mood/progress.

Every user was a bit confused on how to start off scenario #2, which was where to go to access their past mood check-in and tracker information. On the today page, there were three places that people attempted: the recent section, view recommendations CTA, and profile. For the profile page, some people were confused because it first opened on the buddies section, and they didn't realize right away that they were supposed to go to the journey section. However, this is part of Headspace's current navigation so it couldn't be changed.

Areas to explore 🤔
  • On step 4/4 of the check-in, provide more details about what that page is for
  • Explore notes section
  • Make it more clear how to access mood check-in tracker from the today page, and what the emotions are in the calendar
Successes 👍
  • Couldn't tell which designs were mine and which were already part of Headspace
  • Calendar is a good way to track progress over time
  • The mood check-in feature is helpful and simple, and the options for emotions were really inclusive
iterate
Priority revisions

A few of the problems that appeared had to do with Headspace's existing navigation. I wanted to see how I could make it more clear to users without modifying the existing parts of the app.

If you're interested, you can view the final prototype below:

How did this app solve the problem?
How can we help users further personalize their meditation experience?
  • Mood: Users can choose a meditation based on how they're feeling on a certain day
  • Personalized Recommendations: save time searching for content to make the most of their meditation time
  • Progress tracker: a calendar to see how their mood has changed over time to help notice the benefits and results that come from meditating
Reflection
NEXT STEPS
If I were to take this project further...

I would want to explore what else I could do with the adding a note feature in the check-in. I think that this section is valuable as it allows users to reflect on why they're feeling certain emotions, and is a way for them to practice mindfulness. However, I would want to see if there are other ways that I could present this section, as typing in a note can sometimes seem time-consuming. Some of these ideas could include more tags, that could possibly replace this note section, or maybe pre-populated sentences of common answers that people type in.

Additionally, I would want to allow for users to potentially enter more than one mood check-in each day, since mood often changes throughout the day. There are a few considerations to consider - such as how it would look on the today page? would it overwrite the existing check-in or would they be summarized together? should there be a maximum amount of times someone can do a check-in each day?

Finally, I would want to speak with Headspace about their current navigation, especially for the profile section. I'm curious to learn more about what made them decide to have "buddies" as the first section that opens when you go to your profile. A lot of the personal stuff that is related to your progress is found under "journey", so it seems like users would be visiting this section a lot more frequently.

the challenges & the wins
How I overcame the difficulties

At first, the project was a bit challenging because I am new to meditation and Headspace. However, it was something that I was interested in as I know many people talk about the benefits of meditation. I decided to download the app and sign up for their free trial so that I could immerse myself with the app. This was definitely necessary for me to see where I could add in my new feature.

The interaction design for this project was a bit tricky as well, since the challenge was figuring out how I could seamlessly integrate the mood check-in feature into the existing product. Figuring out where users would want to see it and reasons for having it there took a few iterations, but I am glad that I did a thorough analysis of the app beforehand (for example, creating the user flow and sitemap of the existing navigation).

For this project, implementing the UI designs was fairly simple. The most challenging part about it was creating the emotions that were used in the check-in, since Headspace has a very unique illustration style. Luckily, I had a lot that I could refer to before I began my sketches.

Back
Glow - Mobile application
Next
Immigrow - Responsive web design