Designing a Scalable Filter
LogixHealth Case Study
The Problem:
Since most of our applications are extremely data-heavy, users needed an easy way to search and filter in order to find the records they need to complete their work. Due to poor communication over the years, the current filter process was not consistent across applications.
The Project:
When creating our first true design system in 2018, I was tasked with designing a filter that was intuitive and scalable and that we could utilize across our suite of applications. The solution has been refined over the years based on user feedback and with design system updates.
What were the old solutions?
There were two old solutions for a filter we were looking to replace.
A. The first solution utilized a collapsible area above the table where the filter fields were arranged in three columns. This was not ideal for a few reasons, the most important being that it was not responsive-friendly.
B. The second solution was a small menu with expandable sections triggered by clicking a filter icon. This was more responsive-friendly however, it was not scalable to include a larger amount of data.
Our Solution:
After many iterations, we came to our solution guided by UX best practices and user feedback, ultimately fulfilling business needs.
The new filter utilizes a sidenav panel on the right hand side that pushes the data table over so that the user can still view the data table while filtering. The filter categories are arranged in a single column, which makes it mobile friendly. Each filter category is contained within an expansion panel which accommodates categories with many options. Overall, our users are extremely happy with the new filter and have noted their tasks have become uncomplicated and highly manageable.