Design System Component - Filters
Timeline: 4 x 2 week sprints Role: UX/UI Team: Design Systems Designer + Product Designer
The OG Project
The Original Goal of this project was to create a way for our customers to sort and filter on their tables within our Reports in CLM. As today, they can only sort by Last Modified.
The New Project
While working on the Reporting Project, our design systems team was in the final stages of releasing our new design system (ink), but they hadn’t designed the “filters” components quite yet. This was a huge opportunity to design filters in the new design system, while also working on this project and building it out in the old design system. With the hope that our Engineering Team might have a bit of bandwidth to update the page I was working on to the new design system, I worked on both at the same time.
Prism Design System
Add Filters
Click Search Icon
Search fields (some clients have more than 50 columns in their tables)
Search Option Presented
Search for Document Type
Type Ahead
Scroll Down to other fields
Add Date Filters
Date Filters Complete
Add Description Filters
Filter Types
Hover State (for when filters are too long to fit in the space)
Date Filters
Value Filters
Existing Filters
Ink Design System
The Final Decisions
At the end of the project, our Engineering Team didn’t have the capacity to move the whole screen over to the new Design System. However, they committed to moving everything over in the future.
While working with our Design Systems Team, we created a complete Design System Component for Filters in Ink.
