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?
Add a feature to the existing Headspace app that allows users to further personalize their meditation experience.
UX/UI Designer, UX Researcher
Figma
March 2021 (two weeks)
Headspace
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
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.
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.
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.
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:
There were a lot of insights, but some of the ones that helped lead the direction of my project were:
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:
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.
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.
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.
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:
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.
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.
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.
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.
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.
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:
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.
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:
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.
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.