Introduction
Background
My team at Merkle has a component library to draw components from to use as templates when designing for client projects. This library also contains tips and best practices guides for each component.
I was tasked with designing interactive wireframes for filters on desktop, mobile, and tablet, as well as writing a best practices guide to accompany the components.
My Role
I completed this project myself as a UX Design Intern, with guidance from my team.
Timeline
I was not given a specific deadline for this, but I worked on it for about 3 weeks.
Research
In order to write my best practices guide and design my wireframes to be the most effective/ user-friendly, I started by doing research. I read articles from trusted sources such as the Nielsen Norman Group and Baymard Institute, among others. I also looked at examples currently being used on major websites to get an understanding of the most common patterns, to make sure that what I design would feel familiar to users. I compiled notes from my research into a Word document that I could use as a reference.
Design
Once I knew how filters should function in order to be the most useful to users, I was ready to start designing my wireframes in Adobe XD. Based on my research, I decided to design multiple layouts for each device so I could have options suited for different scenarios.
I made the filter panels as well as the individual components interactive by:
• Designing both a collapsed and expanded state for each filter component
• Designing both an unselected and selected state for each selection option within each component
Desktop
I first designed a filter panel made up of multiple filter components.
I designed components for each of the main input formats: single select, multi-select, and custom input.
I also designed a horizontal filter bar.
This is suitable for situations with fewer filter options.
Mobile
I designed a full-screen filter menu with expandable/collapsable filter options.
This is a common pattern and allows maximum screen space to make selections.
I also designed an overlay panel, as I found research supporting this layout as an alternative to the full-screen filter page.
This layout allows users to see the filters working in the background, and does not take them to a new page.
As a third option, I designed a horizontal filter bar. This is less commonly seen, but is useful in some scenarios.
Best Practices Guide
After designing my components, I used my notes from my research to write a best practices guide for filter design. The purpose of this is to refresh designers' memories on what to keep in mind when designing filters, and how to design them to be the most useful.
This guide includes:
• General tips and standards
• How to design numeric filters
• Pros and considerations for each filter format
Conclusion
Now that I have finished designing the components, my team can use them for projects they work on to speed up the design process.
This project helped improve my knowledge on designing filters and allowed me to think critically about the advantages and disadvantages of each layout, and the differences among devices.
