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.

Jump to final prototype

Jump to final prototype

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.

  1. Research

I conducted online research about Headspace, its target demographics, and most common uses. After reading various articles and case studies on Headspace and its business model, I compiled my findings into an affinity map and grouped them based on common pain points and use cases. To validate my findings, I did an online ethnography on various Reddit forums to find the most prominent pain point from my research.

Affinity Mapping

Online Ethnography

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.

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

  1. Defining

Before starting the design process, I did a 5 Whys exercise to further refine the issue. This also helped me create a Problem Statement and a HMW statement to guide the direction of the design.

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?

  1. 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, I reduced the amount of suggestions displayed to minimize choice paralysis. On the results pages, I created two different layouts that better displayed metadata (i.e., title, duration, media type).

  1. Usability Testing

After drafting low-fidelity wireframes, I created mid-fidelity wireframes for user testing. I presented users with three layouts of the landing and results page and asked them to which layout had the best clarity and organization.

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.

  1. 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

Other Projects