Framer prototype of the data table filter and sort concept
ShaleApps Data Table Filter
During my time at ShaleApps, I was given the opportunity to design a data table sort and filter experience for the web application. This filter would be used across many areas of the application, which meant it would need to be robust and flexible, and it needed to not occupy too much screen real estate so that visibility of the data would not be compromised. Lastly, the experience needed to be straightforward and easy for a customer base made up of people who are not avid technology users.
The software's existing filtering system
The existing filter system uses modals and it is difficult to add multiple filters at a time
Process
The process began with the problem. The existing filter was a labyrinth of nested modals that made it hard to effectively and quickly filter results, so the application needed a robust and flexible filter that would also be easy for our users. With the problem in mind, I engaged in a discovery process to figure out what makes a good filtering experience and what would be applicable to the problem at hand. Through the discovery process, I looked outside of the industry to find good UX filtering examples. I primarily looked at e-commerce websites because they had large amounts of content that needed to be filtered as well multiple filters being applied simultaneously. Though the content was different, the problems were similar.
After exploring different concepts I found on other websites, I sketched out different ideas and started an iterative design process to figure out what would really work. Initially, I wanted to stay away from the conventional concept of a vertical filter. I felt that a different UX could work better, and that a horizontal filter concept might be the solution. However, different iterations of this idea did not effectively solve the problem.
Sketches of horizontal filter ideas
Sketches of vertical filter ideas
Continuing the iterations
Upon feedback from the team, I revisited the vertical filtering concept and a vertical filter drawer actually seemed to be a viable option. It allowed for a large amount of options with which to filter, and the UX was straightforward and easy to use. However, it would either cover parts of the data table or the data table would have to be condensed. Neither of those were desirable options.
Vertical filter drawer, one of the iterations of the filtering experience I tried
Final Solution and Prototyping
Finally, I tried placing filter and sort buttons next to each column header. Upon hover, the user would see the options of filtering and sorting. For each filter applied, a filter label would show up under the search bar so the user could see the data change as each filter was applied or removed. This allowed for any type of content to be filtered and did not affect visibility of the data table. Everyone on the team felt that this would be an effective filter design.
After this design was decided upon, I went through numerous rounds of prototyping and iterating on the concept. I made initial prototypes in InVision to show others how this would work as well as to receive feedback. After small iterations based on feedback, I finally prototyped the project in Framer. I wanted to achieve a higher level of fidelity than InVision could offer while learning how to use Framer. Through that, I was able to get a more accurate idea of how the concept would actually work for a user.
Tools used: Sketch, InVision, Framer
May – June 2017
