Monitor Backlinks is an SEO SaaS tool that tracks backlinks and keywords for sites. Our objective was to make it easier and faster for users to find the data and insights that they needed on the platform.
Within Monitor Backlinks, a site could have thousands of rows of information, so users needed a way to filter through the noise to get to the data that they wanted to see. The existing filter was clunky, and we saw an opportunity to update it with more robust functionality.
I redesigned the filters to:
- Be more accessible and applicable with one click
- Add the ability to save and reuse filters
- Add more complex "and/or" conditions (this was not implemented due to development constraints)
Afterward, I delivered the designs to our UI designer, who refined them, and worked with our developer to implement the final product.
Key Design Elements
Filters needed to be as easy to find and apply as possible. Previously, filters were tucked away and unwieldy to use, so I exposed them and reduced the number of clicks needed to configure and apply them.
Users often had a set of filters that they tended to reuse, so we needed to allow users to save (and modify) frequently used filters.
The existing filter system allowed users to apply multiple filters at once ("and" condition), and I included "Or" conditions in the new design to make filtering more robust. The new "Or" conditions were not ultimately implemented due to development constraints. However, the redesigned condition dropdowns were still an improvement on the previous filter configuration system.
Version A: Left Column Filters
In this version, filters are located in a new left column (a pattern that is common on eCommerce product listing pages).
They are easily accessible, but have a few drawbacks:
- The left column takes up valuable horizontal real estate
- Filter conditions are hidden and take two clicks to access
- It is not possible to see or modify the conditions of previously saved filters
Version B: Horizontal Filters
In this second version, the filters do not take up any horizontal space and the filter conditions are displayed by default. This makes it easier for users to see and edit the conditions that are applied for each filter.
Before & After