The Project
The Insights module contains reports with important data users need to gain insights on their recruiting process. With several types of reports, each with different types of data, users needed a way to filter by multiple criteria (like location or job type) within each report. This feature introduced the flexibility to filter easily by whatever data they wanted to look at.
My Role
As the lead designer for this project, I had to work on the entire process, from wireframes and user flows to the UI.
Existing Experience
Before I joined the team, the feature had been deployed, but couldn’t be released to customers — it had countless bugs, and the experience wasn’t ideal or scalable.
Scope and Functionality
Several other projects on our roadmap depended on this feature being scalable, but that was going to be difficult — the current experience was designed as a modal. Since this was one of our core solutions, we also wanted to add functionality. For a successful release, we needed to ensure we had:
• Proper UX
• The ability to save presets
• UI components that fit a new design system
Kick-Off
The UI unfortunately wasn’t up to par in terms of quality. We initially decided to just give it a facelift and work with engineering to make sure it behaved properly. Here’s what the UI looked like before:
UI Refresh
Was it the right choice? We thought so at the time. Cleaning up the UI and making sure each element fit our design system was important, but the more I thought about it and reviewed the features we had planned, the more clear it became that this was going to be difficult to scale. All the user interaction happened inside the modal, and the more functionality we added, the messier it would get.
Switching Gears
We started exploring how filtering could look, and while we considered several avenues, the fact that this feature needed to scale immensely was always stuck in the back of my mind. So I proposed 2 options:
1. Side Panel
2. Collapsible Container
I decided on the collapsible container because it would be a cleaner way to scale the UI. We had about 5 filters when we started, but what if we had 15, or 25? Additionally, we had plans to implement a rule-based system for filtering, so having a side panel with only around 30% of the horizontal screen real estate would have been limiting for future implementations, and the user interaction would have become convoluted.
Wireframes & Flows
Once I decided what design pattern to use, I began working on some explorations for the flows and interaction.
1. Filtering (Key Flow)
Now that we had the foundational architecture laid out, it was time to tackle one of the most important functionalities: saving filters.
2. Saving a Preset
3. Applying a Preset
4. Renaming/Updating/Deleting a Preset
Usability Testing
We were lucky to have an amazing UX researcher on our team who not only helped with research, but also usability testing. We wanted to see how successful our new design was, and drafted 5 scenarios to test. The results were mostly positive, but we did get some mixed answers when it came to whether the feature met our users’ expectations. We compromised and moved forward with our design.
Filtering Logic
After collaborating with stakeholders and engineering, we fine-tuned how the filtering logic would work.
User Interface
Once our successful round of usability testing was complete, the stakeholders and I froze the PRD, and I started work on the UI.
Wireflow and Interaction Design
Final Thoughts
Redesigns are one of my favorite types of projects to work on because you have to assess the pain points, understand why they’re pain points, and figure out how to fix them. For existing features, it’s easier to solve for pain points because we have data and user feedback, which really help in understanding the user journey. Just like my Campaigns project for AllyO, not only did I have to work on the experience and architecture side, but I also had to create components for our new design system. In the end, the filtering feature fulfilled the user’s expectations because it contained clear tags — and as an added bonus, it was also future proof thanks to the flexible and scalable design pattern.
