Headspace Search Flow Redesign
UX Research
UI Design
Reimagining Headspace
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 efficiency of finding content.
Roles
Designer
Researcher
Tools
Figma
Duration
3 weeks
Goals
1
Informative
Create an interface that properly informs users and empower their mindfulness practice.
2
Efficient
Develop clear content organization that will reduce browsing time.
3
Tailored
Create a solution that includes content that users love and regularly utilize.
Research
I utilized desk research and online ethnographies to better understand pain points from current users. After exploring various forums, I found that many users experienced issues relating to poor navigation on Headspace.
Headspace is hard to navigate, preventing users from finding available or new content.
The current interface is too crowded which takes time away from engaging in mindfulness.
Users want to be better informed of content so they can choose the best practice for their needs.
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.
How Might We...
enhance search functionality to effectively inform users about the available content, empowering them to browse with greater efficiency?
Current Design
After identifying the primary issue of navigation, I downloaded Headspace and walked through the app to find specific areas to improve browsing experience.
Search Page (landing)
Content overload can lead to choice paralysis
Suggested content may not align with user needs
Search Page (results)
Lack of sorting or filtering functions
Poor readability of content metadata
Poor organization/grouping of common content
Wireframing
The first iteration of wireframes aimed to minimize content crowding and better inform users of available content.
Landing Page
One major issue I found on the search landing page was the extensive list of suggested content. While it may present popular offerings on Headspace, it can easily overwhelm users. I created two wireframes that reduced the number of suggestions displayed which can minimize choice paralysis.
Search Results
The search results page had a similar issue of presenting a lot of content at once which can overwhelm users. Additionally, the current interface displayed content metadata poorly. I made sure that these wireframes had clearer displays of metadata.
Testing Wireframes – A/B/C
After developing mid-fidelity wireframes, I presented three wireframes for user testing. All three layouts kept elements of the original landing page, but presented the information in different organizational structures.
Landing Page
Users found that the second wireframe provided the most clarity and simplicity of all three. It eliminates the overwhelm that users might experience from having so many choices and highlights content that is important to users.
Search Results
Users preferred the second and third wireframes out of the three. They enjoyed the division of content, which made it easier to understand what content is available. The third option became the best choice because it reduces the amount of space taken up on the screen. This prevents users from getting lost in a long scroll and seeing all their choices faster.
Final Interface Design
After concluding user testing, I used the Headspace UI kit to create new interfaces for the landing the search results page. The redesign contains new categories to organize content and provides more descriptions of content to better inform users about what they may find within these categories.
Landing Page Redesign
Featured suggestions include descriptions that inform users about the contents of each
“Basics” and “Focus” are included as popular content options for users
List of miscellaneous items is organized by media type rather than all Headspace offerings
Search Results Redesign
Added option for sorting/filtering
Results organized into categories (by media type) which can be expanded
Reflection
This project revealed the importance of clear UI and information architecture to help users with informed decision-making. Improving search functionality and simplifying search displays can help reduce choice paralysis and help users find desired content with minimal distraction.
If I were to do this project again, I would like to conduct interviews to supplement my desk research and better understand pain points. I would also like to continue testing the prototype with Headspace users to ensure clarity and search efficiency.