Introducing an interactive filter component in User Interview's CRM instance
Overview
In this project, I designed an interactive filter component to be used in our CRM instance to replace our existing filtering system. This component solved for our user's filtering pain points in the CRM instance, and is flexible enough, and intended to be implemented in our Project workspace table experience.
Project collaborators
Claire Mai
Product Manager
Drew Brigham
Engineering manager
Sav Phillips
Product Designer
Key metrics
7% increase in R's using filters as a % of all Hub users.
We received lots of positive feedback from happy customers post-release.
Timeframe
Fall 2024
Understanding the problem space
Prior ecosystem
The prior filtering ecosystem utilized a centered filtering modal. Certain inconsistencies across Date, Number, String, and Boolean filter types created usability issues for our customers. The interaction design of filtering via a modal made the filtering process feel disconnected from the table of results it was filtering.
Design approach
Comparitive analysis
First, I conducted a comparative analysis of other leading product's filtering functionality. My biggest references were Notion, AirTable and Monday.
Audit the existing experience
Next, I audited the existing experience, taking screenshots of all filter types and combinations. I simplified those screenshots into basic functionality per attribute type.
Generate design requirements
I used our repository of historical customer feedback to understand customer's biggest pain points with the existing filters. I compared how others companies had solved for these usability problems, and how User Interviews solved (or didn't currently solve) for these issues. I created design requirements for each filter attribute type and communicated these findings with our Product Manager (Claire), and Engineering Manager (Drew).
Create hypothesis wireframes
After framing design requirements and referencing leading product's filter
Research approach
I ran 2 usability studies as a part of this project. Since filtering was just one aspects of a larger visioning effort, I ran these two usability tests within the context of an updated CRM design.
I used Sprig and User Interviews to run unmoderated studies, asking users to complete a few tasks and record their interactions with the prototypes.
I used an Ease of Use Metric question after each task, "How easy or difficult was it to complete that task?" and gave a Likert scale of (1) - Very Difficult to (5) - Very easy. In both studies where I tested the filter task, the ease of use average for these scores was >4.6 out of 5. Since I text some potential risk scenarios with filters as they relate to segments, I felt confident that the filter popover interaction treatment was a good solution to move forward into implementation stages.
Outcomes
The filtering project, completed in December 2024 was considered a successful product release!
Key metrics
We saw a 7% increase in R's using filters as a % of all Hub users
68%
Rs Using Filters as % of All Hub Users
PRE- RELEASE
75%
Rs Using Filters as % of All Hub Users,
POST - RELEASE (Dec 11 - Jan 10 2025)
We received lots of positive feedback from happy customers post-release.
"I created a couple new filters I use and this new setup is way more efficient and easier to build and use! I sent the great news to all the researchers and they will provide any feedback if they find anything that can help.This partnership is exactly what our company strives for!" - Admin contact at ADP (High value customer)
"Thank you! So far, the additional capability is just what we need - excluding labels, having a rule to include some values from a field but exclude others, etc. Updating some segments now!" - Admin contact at Bonterra
The filtering component is modular in our design system to be used across the product in other table instances
Screenshot of a staging environment that includes the now live filtering component in our CRM instance.