Imagine trying to buy a simple light fixture on an app, only to be met with a sidebar list of filters so endlessly long that it literally stretches past the bottom of the webpage. To make matters worse, once you finally scroll, hunt, and click a filter, the UI gives you absolutely zero confirmation that anything happened. No visual feedback, no active status, just a long, frustrating guessing game.

This was the exact reality our users were facing on The Home Depot Canada's Product Listing Pages (PLPs). Our Voice of the Customer (VOC) data was screaming that our filtering system was broken, janky, and outdated. We were actively making it harder for customers to find what they wanted to buy, which meant we were leaking conversions at a critical stage of the shopping funnel.

As the lead designer on this initiative, I knew we couldn't just patch up the existing UI. We needed a complete architectural overhaul. My mission was to design a clean, responsive filtering and sorting framework that scaled seamlessly from a spacious desktop layout down to a compact mobile bottom sheet, utilizing a unified set of reusable components.

The goal wasn’t just to make it look pretty; it was a direct play to slash cognitive load, build a scalable design system asset, and seamlessly funnel users toward checkout to drive a major lift in conversion.

My Role

UX/UI Designer leading interaction and visual design strategy for filtering and sorting experiences from concept through delivery. Influenced the product direction by proposing a top-aligned filtering model with progressive disclosure and a scalable side-drawer framework. Collaborated closely with UX, product, IT, and stakeholders. Presented solutions to cross-functional leadership throughout the project lifecycle.

Problem

• Legacy left-rail filters were difficult to scan, underutilized, and not optimized for modern browsing behaviors.

• Users reported frustration with the accessibility and discoverability of filtering options.

• The experience did not align with evolving industry standards or support future merchandising flexibility.

Scope

• Filter and Sort By navigation overhaul

• Category and top visual navigation redesign

• Desktop, tablet, and mobile experiences

Desktop Solution

• Transitioned from a left-rail filter model to a top-aligned filtering system using dropdown categories for primary filters.

• Introduced a “See All Filters” side-drawer panel to expose the full taxonomy without overwhelming the main interface.

• Established chip component to selected filter states and defined them in the side-drawer panel with the option to “Clear All Filters”, ensuring users can edit selections at all touch points.

• Designed progressive disclosure patterns to reduce cognitive load while maintaining depth.

• Ensured AA accessibility compliance across breakpoints, including keyboard navigation and focus states.

• Addressed IT and performance constraints by balancing product capacity with pagination rather than infinite scroll to maintain page performance.

Mobile + Tablet Solution

• Consolidated stacked categories into an accordion.

• Updated visual navigation UI and addressed accessibility issues.

• Optimized mobile with dedicated filter and sort entry points for improved ergonomics and clarity.

• Redefined the filtering menu for ease of use.

Design System Contributions

Introduced reusable components that expanded beyond PLP/SRP and are now leveraged across the platform:

• Filter dropdown components

• Applied filter chips

• Side-drawer framework

• Mobile filter and sort controls

Validation & Impact

• User testing confirmed improved clarity, learnability, and efficiency of the new filtering system.

• Increased engagement with filtering tools and improved task completion rates.

• Contributed to higher add-to-cart interactions following launch.

• Established a scalable foundation for future navigation and discovery improvements, including subsequent header redesign work.