Filter Redesign

Improve the product search experience.

A supermarket faced challenges with users struggling to filter products effectively, impacting product visibility and user satisfaction. I was tasked with redesigning the filtering system through research, design, and testing, resulting in a smoother shopping experience, reduced bounce rates, and increased conversions.

01. Overview

Project

Improve the product filtering system to make it easier for users to find relevant items and reduce frustration.

Role

UX Designer and Researcher, collaborating with the CRO team, Development, Trade, Merchandising, and Online Product Owners. I led the research, design, and testing process to improve the filtering system, creating a smoother and more intuitive shopping experience.

Objective

Enhance the product filtering experience to reduce bounce rates, improve product visibility, and increase conversions by addressing user frustrations with the existing filter functionality.

02. Problem

Users struggled to locate products—especially dietary-specific items like vegan options—without relying on the search bar. The filtering system lacked relevant categories, offered limited navigation options, and failed to provide clarity on applied filters.

Data showed users frequently clicked into the filter menu but exited without applying any options, highlighting dissatisfaction or confusion. These issues resulted in high bounce rates, missed opportunities for engagement, and reduced conversions.

03. Design Process

Research & Analysis

I analysed customer behaviour using Content Square, revealing gaps in usability and instances of users abandoning the filter menu. Benchmark testing with UserZoom identified pain points, such as difficulty filtering by dietary requirements. Competitor analysis provided inspiration for best practices and highlighted missing filtering categories users wanted, such as dietary needs and brand-specific filters.

Wireframes & Ideation

Using Sketch, I created wireframes to address pain points. Proposed solutions included:

New filter categories, like dietary needs, to align with user expectations.
A “Clear All” button for streamlined filter management.
A search bar within the brand filter to simplify navigation through extensive lists.

High-Fi Design

High-fidelity prototypes adhered to the company’s brand guidelines. Key features included:

Visual indicators (e.g., blue dots) to signify active filters.
Prominent placement of applied filters for easy reference.
Enhanced emphasis on the Bonus Card to demonstrate its value to customers and encourage engagement, aligning with the company’s yearly goals of showing customer value.

Prototype Testing & Development

I collaborated with Development and Product Owners to validate the feasibility of the designs. A/B testing measured the impact of the changes on engagement, bounce rates, and conversions, ensuring alignment with both user needs and business objectives.

04. Solution & Results

Solution

The redesigned filter system introduced:

Clear indicators for applied filters, displayed prominently at the top of the page.
Flexible management options, including individual filter removal and a “Clear All” button.
New filtering categories tailored to user needs, like dietary options and brand filters.
Bonus Card integration to encourage signups and display its value to customers.

Results

Reduced Bounce Rates: Improved usability kept users engaged longer on product listing pages.
Higher Conversion Rates: Easier navigation and relevant filters enabled users to find desired products quickly, boosting completed purchases.
Increased Engagement: Post-launch analytics showed a significant rise in filter interactions.
Enhanced User Satisfaction: Feedback highlighted the new system’s simplicity, reduced friction, and alignment with user needs.