Headspace Redesign
Roles
Researcher
Designer
Tools
Figma
Project Duration
3 weeks
Challenge
Launched in 2012, Headspace aimed to make meditation more approachable through its fun, simple, and friendly aesthetic. Ranging from meditations to themed podcasts to sleep guides, Headspace offers a wide range of content for a diverse user-base.
As the brand continued to grow and expand its content offerings, it became harder for users to find tools that work for their mindfulness needs. This project aims to dissect this issue and present a solution that will improve the efficiency of finding content.
Launched in 2012, Headspace aimed to make meditation more approachable through its fun, simple, and friendly aesthetic. Ranging from meditations to themed podcasts to sleep guides, Headspace offers a wide range of content for a diverse user-base.
As the brand continued to grow and expand its content offerings, it became harder for users to find tools that work for their mindfulness needs. This project aims to dissect this issue and present a solution that will improve the efficiency of finding content.
Results
I created and prototyped a new search landing page and results page that categorized search results and implemented content filters.
I created and prototyped a new search landing page and results page that categorized search results and implemented content filters.
Goals
Informative
Create an interface that properly informs users and empower their mindfulness practice.
Efficient
Develop UI that presents clear content organization to reduce browsing time.
Tailored
Create a solution that includes content that users love and will regularly use.
Research & Analysis
Affinity Mapping
To start the research process, I did online research about Headspace, its target demographics, and its most common uses. I summarized my findings into an affinity map and organized them to better identify potential pain points and areas of improvement.
To start the research process, I did online research about Headspace, its target demographics, and its most common uses. I summarized my findings into an affinity map and organized them to better identify potential pain points and areas of improvement.
Online Ethnography
I conducted an online ethnography on Reddit to validate my findings from the affinity map. From this research, I found common pain points related to content organization, navigation issues, and interface clutter.
I conducted an online ethnography on Reddit to validate my findings from the affinity map. From this research, I found common pain points related to content organization, navigation issues, and interface clutter.
Interface Analysis
After identifying the primary issue of navigation, I downloaded Headspace and walked through the app to find specific areas of the browsing experience that users were referring to.
After identifying the primary issue of navigation, I downloaded Headspace and walked through the app to find specific areas of the browsing experience that users were referring to.
Search Page (landing)
The landing page features various search keywords, programs, and miscellaneous content. While the current interface is informative, it can cause issues:
Content overload can lead to choice paralysis
Suggested content may not align with user needs
The landing page features various search keywords, programs, and miscellaneous content. While the current interface is informative, it can cause issues:
Content overload can lead to choice paralysis
Suggested content may not align with user needs
Search Page (results)
The results page displays content as a list, and display the content title, duration, and media length. While simple, some issues include:
Lack of sorting or filtering functions
Poor readability of content metadata
Poor organization/grouping of common content
The results page displays content as a list, and display the content title, duration, and media length. While simple, some issues include:
Lack of sorting or filtering functions
Poor readability of content metadata
Poor organization/grouping of common content
Research Analysis
Headspace is hard to navigate, preventing users from finding available content or exploring new offerings.
The current interface is too crowded with content and distracts users from engaging in mindfulness.
Users want to better informed of available content so they can choose the practice that best fits their needs.
Defining
Problem Statement
As a Headspace user, I want an enhanced organization system that provides comprehensive awareness of the app’s offerings, enabling me to make informed choices regarding my mindfulness practice.
As a Headspace user, I want an enhanced organization system that provides comprehensive awareness of the app’s offerings, enabling me to make informed choices regarding my mindfulness practice.
How might we…
enhance search functionality to effectively inform users about Headspace's available content, empowering them to browse with greater efficiency?
enhance search functionality to effectively inform users about Headspace's available content, empowering them to browse with greater efficiency?
Wireframing
I focused on the issue of content crowding and wanted to create an interface that would better inform users of available content. For the landing pages (right), I reduced the amount of suggestions displayed to minimize choice paralysis. On the results pages (left), I created two different layouts that better displayed metadata (i.e., title, duration, media type).
I focused on the issue of content crowding and wanted to create an interface that would better inform users of available content. For the landing pages (right), I reduced the amount of suggestions displayed to minimize choice paralysis. On the results pages (left), I created two different layouts that better displayed metadata (i.e., title, duration, media type).
Usability Testing
Search Landing
Of the three options presented, users found that the second wireframe provided the most clarity and simplicity of all three. It eliminated the choice paralysis that users might experience from the previous interface and highlights content that is most important to users.
Of the three options presented, users found that the second wireframe provided the most clarity and simplicity of all three. It eliminated the choice paralysis that users might experience from the previous interface and highlights content that is most important to users.
Search Results
Users preferred the third wireframe out of the three options presented. They enjoyed the division of content because it made it easier to understand what is available. Additionally, it took up the least amount of space on the screen and allows users to see all their choices faster.
Users preferred the third wireframe out of the three options presented. They enjoyed the division of content because it made it easier to understand what is available. Additionally, it took up the least amount of space on the screen and allows users to see all their choices faster.
Final Design
Landing page Redesign
Featured suggestions include descriptions that inform users about the contents of each category
"Basics" and "Focus' are included as popular content options for users
List of miscellaneous items is organized by media type.
Featured suggestions include descriptions that inform users about the contents of each category
"Basics" and "Focus' are included as popular content options for users
List of miscellaneous items is organized by media type.
Results page redesign
Added option for sorting/filtering
Results organized into media categories that can be expanded
Added option for sorting/filtering
Results organized into media categories that can be expanded
