Platforms

Desktop

Roles

UX Design
Prototyping

Tools

Sketch
InVision

Objective

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.

Problem

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.

Solution

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

Easy Access

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.

Saved Filters

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.

"And/Or" Conditions

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.

Iterations

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:

  1. The left column takes up valuable horizontal real estate
  2. Filter conditions are hidden and take two clicks to access
  3. 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

Before

After (Implemented)

Prototype

Test the conditional filters in this prototype: