Design System

Unified Data Table Designs

Tables in iCE were never standardized and it has always been a point of frustration for users, engineers and me, the only designer.

I found 4 (sort of 6) different table design systems and proposed a new design system for the tables that would finally rid us of this eternal design debt. I added to the component library a reusable component in Figma for users to build any required table. This also gave a source of truth for all tables in the product.

One instance of the old tables
New table design
OldNew
Drag to compare

Tasks

  • Audit all table functions and styles
  • Improve readability
  • Unify table styles
  • Structured table headers to contain a series of reusable features
Relaxed Table Rows
Condensed Table Rows
Relaxed Table RowsCondensed Table Rows
Drag to compare

Visualizations in the table, addition by subtraction!

I stripped out a few peculiarities to how data was visually displayed:

  • Pills that reach their maximum when the value reaches 50%
  • Overlaying values on the pills
  • Simplifying colour range