Design System - Tables
Secureworks | Interaction and Visual Design
October 2020 - Two Weeks
Role: Lead Designer
Presentation: Google Slides
The Problem
Tables are a core piece of the Taegis XDR product. Analysts sift through hundreds of alerts and events and require data structured in a tabular format in order to efficiently do their jobs. Unfortunately, in Taegis XDR’s initial development, many pages were developed independently, teams did not discuss with each other and we had a product that had several different tables, each with slightly different visual and interaction patterns.
As part of the Taegis XDR design system project, tables were an important component to include.
Discovery
During the discovery phase, I audited the product to make note of all the different tables in Taegis XDR. I noted all of the places that a table was used and called out any inconsistencies. There were at least 5 different tables in XDR, all with different visual and interaction patterns. For example, some tables had filters built into the columns. Other tables had the filters hidden in a right hand panel. One table relied on cards at the top of the page for filters. These inconsistencies confused our users and we needed a universal table so users would not have to keep guessing how the tables work.
Defining Components
After a thorough audit, I also documented the various components, variations and states that would be needed. I started with defining a table cell, and the different types of content and states a cell could have (e.g., text-only, links, status, etc). Once the cells were defined, I started to piece together rows and columns, and noted interactivity such as sorting and hovering. With the basic components defined, I also defined universal table controls such as filters and pagination.
Updated Tables
With a catalog of components and defined states, I created two types of data tables for the design system. One table featured a faceted search panel on the left side, and the other table was a more simplified version with the faceted search removed. These two tables became the basis for all tables in Taegis XDR and eliminated much of the inconsistent patterns in the product.
Working alongside a UI engineer, we discussed the ways our ag-grid (our table library) would be able to support the desired patterns and made sure to communicate with the larger UI engineer team, that they were to use these table patterns moving forward.
