Data table filtering redesign

Introduction

Filters are an important workflow for merchants since using them improves shipping efficiency by being able to group similar order and process in batches.

Problem

Filters took up a lot of screen space for something that is only used some of the time, even more so when considering less than 5 filters are commonly used in daily operations across all user accounts.

Research

Using Pendo, we identified that the majority of customers only ever utilize 5 commonly used filters.

After performing user interviews, we also discovered that repetitive filtering was facilitated by utilizing “saved filters” which allowed a user to quickly load previously used filters by selecting a view from a dropdown menu.

Design concepts

Design goals:

• Save space by hiding the complete filters panel in a slide out menu

• Allow most commonly used filters to still be accessed, along with a method to save filtered views for easy reuse

• Create more focus on the orders themselves (the job to be completed). This is especially important for first time users.

Engineering handoff

Primary filter drop downs:

Selected filters would show up in a bar represented in pills that could be individually removed, or cleared completely. Each filtered “pill” had to have unique behaviors to keep the entire component from looking broken under certain circumstances.

User Testing

We ran a small design validation exercise with 5 existing customers to see if we could measure the impact of the change. Overall, the feedback was positive.

One thing identified was the fact that it was an extra click to have to apply a filter from the filter dropdown. This behavior differed from the old system that would load the filter view on click without having to apply the change. We decided to remove the apply and cancel actions and load the new view after a small delay after clicking the individual facet.

Post launch user feedback

We used Pendo after launch to measure customer satisfaction with the updated user experience. Using this we were able to identify that while we did OK, we found that some users had commonly used filters that were different from the top 5 we would show at the top of the page.

To accommodate this, we built a user setting that allows customization of the 5 filters featured at the top of the data table. The settings modal to configure the set of filters is shown on the right.