Optimizing Filters UX

Lead Product Designer
Project Timeline: July - Sep 2020

I redesigned our advocates page to guide users to get the most value out of central data page.

Background:

The advocates page shows all advocate records in a client's account. One of the key functions of this page is to slice and dice the data to find and export meaningful groups. This is done by adding filter criteria to the dataset and saving these filters into segments for future use.

Problem Space:

Although this page was redesigned recently, new clients were still unable to maximize all of the page's useful features. For instance, most clients had no idea that you could save your filters as a segment for future use, often times asking their Customer Success Manager to manipulate the data for them.

Very little direction for users on how to use and apply filters
Exploring areas of improvement for advocates page, namely visual hierarchy.
From internal presentation to stakeholders.

Design was tasked to diagnose why users had trouble understanding this page and come up with solutions to increase usability and usage.

Success Criteria

1) Improve the visual hierarchy of the page to encourage users to add filters.

Metrics:
• # of new clients using filters vs old
• # of new clients using saved filters segments vs old
• frequency of filter usage per client
• first time user able to identify available features on page and access them easily (usability test + onboarding)

2) Improve the usability and experience of adding and saving filters

Metrics:
• # of new clients using filters vs old
• # of new clients using saved filters segments vs old
• frequency of filter usage per client
• first time user able to add filters freely (usability test)
• # of filter related tickets assigned to CSM

Process:

Research 🔬:
In order to explore and gain a full understanding of the problem space, we conducted a series of user interviews and usability testing with key clients and customer success managers about the current state of the Advocates page.

We found that:
• first time users had trouble explaining what the page is supposed to do other than displaying advocate information not unlike a contact list
• most users were unaware of the ability to save filters as segments to be used in other parts of the platform, most notably sending an email to a specific audience.

We hypothesized that the reason for this page's painpoints were due to its lack of visual hierarchy and clear direction for what a user can and should do.


Iterate & Collect Feedback 💡:
In order to explore and gain a full understanding of the problem space, we conducted a series of user interviews with key clients and customer success managers about the current state of the Advocates page.

Once our requirements were set, we began to design multiple iterations of what a new advocate page filter experience could look like. After each iteration, we presented our work to PMs and various stakeholders to collect and incorporate feedback.


Working with Devs ⚙️:
After we validated our prototype with clients and received sign-off from product, we began to work closely with Engineer to ensure a successful development process. We handed over detailed pixel mocks that contained which design system components to use and how, as well as functional and front-end edge cases to consider. Design was also responsible for QAing progress from each sprint.

Proposed Solution:

We wanted to make it evident that the main function of the page was to add filters in order to find a meaningful data set. In order to accomplish this, we tightened up the visual hierarchy to direct users to the most important page components: adding filters, applying saved filters (segments), and seeing the results of your query. This was accomplished through sizing, layout (top left -> right bottom Z pattern), and contrast.

For the filter UX itself, we rearranged its components to create a smoother experience. The previous filter dropdown showed a daunting white blank space with a tiny Add filter at the bottom left.

Image of old filters

We opted to restructure the modal to provide more guidance about how to add filters: top section applies filter -> middle section displays added filter -> bottom section to fire request to database & choose to save filters as a segment.

To further reduce friction we broke out the filters dropdown to show the three most common filter categories by default (Campaign Activity, Location, and Tags).

Image of new filters

Impact:

After three months of design and development, we were able to successfully ship our redesign to all users in the platform. Though most of the changes were visual and UX related related rather than functional, the initial feedback from CSMs and first time users came back positive. While we are still collecting data to further validate the impact of our changes, we are confident that user will feel more capable using this page to carry out their reporting needs.