Optimizing Filter Design for a Better User Experience – Elodie Mesnard – Product designer

Optimizing Filter Design

Client :

Veepee

Category :

Product design, UX research, UI design, Design System, Facilitator

Start Date :

Febrary 2022

The
Challenge 💪🏼

Navigating Veepee’s extensive product catalog was a challenge for users. The filter system, previously displayed as simple “button links,” lacked clarity and usability, making it harder for members to refine their searches effectively. Our goal was to rethink this experience by introducing a more intuitive and visually engaging filter design.

My
Role 🧢

We worked on pair design for this project, I was responsible for: Leading research to understand user behavior and pain points. Prototyping and iterating on new filter designs. Collaborating with developers to implement a scalable solution aligned with the product taxonomy. Ensuring the new design enhanced usability without compromising business goals.

Insight &
User research 🔎

User Pain Points:
Feedback and heatmap analysis revealed that users struggled to locate and interact with filters. The “button link” design was too subtle, often overlooked or misunderstood.
Competitor Analysis:
Benchmarking against competitors like Zalando and ASOS highlighted the effectiveness of “pill-style” filters, which are visually engaging and intuitive to interact with.
User Goals:
– Quickly refine search results based on categories.
– Easily toggle between filters without disrupting the flow of navigation.
– Minimize the number of clicks required to find desired products.

Benchmark 👀

Time to bench and gather inspiration !

The solution?

We transitioned from button links to pill-style filters, a design known for its clarity and ease of use. Key changes included:

Visual Hierarchy: Pills with bold outlines and clear labels for immediate recognition.
Dynamic Updates: Filters that visually adapt as selections are made, giving users real-time feedback.
Sticky Header: Ensuring filters remain accessible during scrolling in the product listing view.
Scalable Design: A structure that could easily incorporate additional filters as the product taxonomy evolves.

Mockups

Impact

We transitioned from button links to pill-style filters, a design known for its clarity and ease of use. Key changes included:

Visual Hierarchy: Pills with bold outlines and clear labels for immediate recognition.
Dynamic Updates: Filters that visually adapt as selections are made, giving users real-time feedback.
Sticky Header: Ensuring filters remain accessible during scrolling in the product listing view.
Scalable Design: A structure that could easily incorporate additional filters as the product taxonomy evolves.

Conclusion

This project demonstrated the power of design in solving practical user problems while driving business impact. By shifting to pill-style filters, we not only improved navigation but also set the foundation for a more dynamic and scalable search experience.

ME CONTACTER