The Problem

Due to updates rolled out at different times by different teams, things like task flows, formatting, and interaction patterns were all over the place. Clashing UX decisions had rendered our tables difficult to use.

Breakdown of New Experience

I worked synchronously with engineering from the beginning to create reusable table components from scratch. By involving engineering so early, I was able to pivot away from infeasible or unnecessarily labor-intensive solutions quickly.

Reading Data More Easily with Formatting and Alignment

Scenario: Users have to read and absorb large streams of data, which can take time when data is improperly and inconsistently formatted.

Solution: For readability, I worked to enforce a strong sense of visual hierarchy and separation of elements. I collaborated closely with engineering to define detailed design specifications and documentation so that tables were easy to implement moving forward.

Flexible Filtering Options

Scenario: To parse through large volumes of data, users need a powerful set of filters. Filtering can be taxing with a lack of organization and onerous interaction patterns.

Solution: I cleaned up filtering interaction patterns while ensuring filters met WCAG accessibility guidelines. I explored the option to stack filters vertically in filter-heavy tables, introducing a level of flexibility to layout options and reducing clutter.

A Consistent View of All Table Actions

Scenario: An integral job in the table experience is acting on data. Due to the hefty number of potential actions, users can struggle to find what they’re looking for without clear, logical organization.

Solution: I moved table actions out of their dropdown and surfaced them as buttons in a “button bar” under the header, giving users full visibility into their possible choices. To create a stronger sense of hierarchy, I grouped and ordered actions according to purpose.

I applied the same concept to individual data point actions within each row.

A Shopping Cart Pattern for Bulk Actions

Scenario: Taking bulk actions is a common task for our users. Our bulk action task flow was convoluted and inefficient.

Solution: I knew I had to pivot away from our old flow which made recovering from mistakes difficult and was a high friction point for users. I shifted towards the familiar shopping cart pattern so we could lean into a more intuitive task flow with better error recovery.

The shopping cart created a glanceable visual of all the selected data in one place, which we had been missing in our old flow.

Responsive Designs that Support Content Reflow

Scenario: For accessibility, responsive design and content reflow are integral to providing an optimal viewing experience across a wide range of devices and viewport sizes.

Solution: Assuring that our tables were properly responsive and met accessibility needs involved two major considerations – content needed to support reflow and be able to be enlarged without becoming difficult to read.

We also had to think about how such visually horizontal tables would linearize enlarged to 400% zoom or when space was tight. With engineering, I defined rules for such use cases and how structures and data would vertically stack.

Results

By mixing these patterns and layouts, I was able to create a library of reusable table patterns for common scenarios that were easy to implement due to thorough documentation. This release was highly anticipated by internal and external users. It also revolutionized the way design collaborated with engineering, allowing us to set better processes in place for synchronous cross-functional collaboration where engineering was involved much earlier on.