Advanced filtering

2024-25

Evolve our existing filter pattern to better suit the needs of users with large data sets and many filtering options

The team

Myself – UX + Visual
Emily Dowell - UX
Michael Gower - UX + Accessibility

Duration

6 months (side project)

Outcome

Our pattern was added to our design system’s beta component library and is on deck for publishing 🛠️

The problems

Lack of flexibility + scalability

While working on another project, my colleague and I realized our use case had outgrown the current filter pattern. We needed more flexibility and scalability

No consistency across the platform

Other teams faced the same problem and had built their own solutions, creating inconsistent filtering experiences across the platform.

We created detailed annotations for every filtering experience, documenting behaviors, visuals, and interactions such as button labels, icon usage, and hover states.

Any inconsistencies were added to a shared list of “alignment items” to guide future decisions. Our meticulous process ensured no detail was overlooked as we moved toward the final design.

Tidying up the hierarchy

Our main challenge was ensuring scalability in every detail. When a user opens a filter panel with 20+ options, what do they see? How is it organized?

Visual hierarchy played a big role in setting up this pattern for success.

Before: Section headers didn’t provide much value and typography lacked contrast and visual hierarchy

After: I cleaned up the text hierarchy with clearer categories and subheadings.

Utilizing progressive disclosure

We needed a cohesive way to show lists with 5 options, lists with 500 options, and everything in between.

We decided to tier our approach according to the number of items in the list.

This allowed greater flexibility and ensured the format best suited the scale.

For shorter lists (<10 items), we show the list in full.

For medium lists (10-20 items), we use a “show more/show less” behavior that expands and collapses within the filter panel.

For long lists (>20), we use a “view all” behavior that opens a separate shopping-cart experience. This helps reduce the cognitive load of remembering what choices they’ve selected across 20+ items.

Expanding the options

We made some much needed fit and finish improvements that allowed complete customization of the filter options to best suit their use case, including:

  • Icons and user images

  • Multi- and single-select

  • Second line in rows

Now users can see their filter options displayed the same as they are elsewhere in the product, with their respective icons and paths.

Advanced Filtering

The reviews are in…

“It is very interesting to see designers going through [this process] thoroughly and showing what it actually takes to make a reusable component happen.”
— Design Principal (from our feedback session)
“This pattern is going to be an amazing asset to our team.”
— Design Lead (from our feedback session)

Final considerations

While we got plenty of internal designer feedback along the way, with more time we would love to continue this work and do external usability studies to ensure our pattern was hitting all the marks.