UI Component Redesign

2019 • UX/UI DESIGN

Redesigned filters and table components for the Erie Insurance web UI kit to improve usability.

Tools: Sketch

The Redesign Goal

The goal of this redesign was to improve the usability of the filtering component for table data, along with improving the readability of the table data itself.

Define the Problem

I was able to identify several design flaws with the existing filtering and table components through research with agents who often use these features. This warranted an improvement in the design of these particular components.

One of the main flaws I found with the filter component was the inability to select several filtering options within one filter category. Once filtering selections were made, the existing design also lacked an easy way to view all selected filter options and the ability to clear them all at once. Also, the filters were not designed to be mobile-friendly and were very obtrusive when viewed on a mobile device.

Lastly, I identified an issue with the visibility of our table headers and the readability of our table data. I found that the table headers blended in too much with the rest of the screen and that the table row padding was so great that it inhibited the speed at which the data could be read.

The table issues were fairly straight-forward fixes, however the filter component issues required additional research in order develop a proper solution.

Research

To develop an effective design solution for the filter issues, I conducted research on how industry competitors and companies in other industries handle their filtering. I was able to find examples of effective and ineffective filtering designs, which helped me understand the best practice for moving forward in my design phase.

Design

After completing my research, I set out to design a solution that culminated all of the design best practices I had gathered while also ensuring the design fit the use case.

For the redesign of the filter I set out to address these issues:

Display all selected filter options in one place for improved visibility and ease of removal
A way to clear all filters at once
The ability to select multiple filter options within a category at once
Design filters to be mobile-friendly
Improve table readability

X-LARGE/LARGE VIEWPORT

For the largest viewports, I developed the final design displayed below. From the filter dropdown, users are now able to select multiple options within a particular filter when needed. Included, is the ability to clear all selected options within a dropdown at once to improve usability.

Once filter options have been selected, they will appear listed below the filters for clear visibility. From here a user can then easily clear an individual selection or clear all selections at once. Lastly, I incorporated a "more filters" dropdown option to include any remaining filters if there is not sufficient space left on the screen to fit them all.

To address the table readability, I added a grey background to the column header row to add emphasis. As for the readability of the data, I simply changed the row padding from 20px to 10px in order to condense the data and make it more scannable.

MEDIUM VIEWPORT

For the medium viewport, I grouped all of the filters within one dropdown to allow users to view and select all of their filter options in one place. Once the selections are made and the dropdown is closed, a number will display next to the filters button, indicating the number of filtering options selected. In addition, a "clear all" button is provided to improve usability.

SMALL VIEWPORT

For the smartphone, I designed the filters to be contained within a screen overlay. When opening the filters, this allows users to view and select all of their filter options in one place.

steiningeriv@gmail.com • 570 556 0348