IBM Design System & PAL Work

Building upon existing data table patterns

Products and digital experiences at IBM use the Carbon Design System. Carbon is an open-source design system consisting of working code and components, design tools and specifications, and pattern guidelines.

Occasionally a component provided by Carbon is a good start, but doesn't perfectly fit the needs of an AI Applications product. The AI Apps PAL (pattern and asset library) was established to house and document extensions to Carbon components and patterns. This case study focuses on additions to the Carbon data table design.

My Role:
Product designer (specialty in Visual and UI Design)

As a visual designer within the AI Applications business unit, my role frequently included designing new components, specs, and micro-interactions for use across products within the organization.

Design team members:
Cynthia Zhang, product designer (specialty in UX Design)
Armon Burton, user researcher

screens with data tables

Why are data tables important?

Data tables are an efficient way to organize and display complex data. While dashboards are good for visualizations and finding patterns, data tables excel in scalability and are easy to scan.

This is especially important for drilling into large amounts of asset data to pinpoint a specific operational issue.

What needs aren't currently being met?

Products within AI Applications handle huge amounts of data. The out-of-the-box Carbon data table provides and basic search and alphabetical sorting on table columns, but this is not super useful when a user is trying to sort through hundreds of thousands of data points from different assets. The basic component does not offer any further design guidance on advanced features such as saved views, advanced filtering, or column management.

My goal: design proposals for advanced features

I could begin brainstorming, iterating, and testing design solutions once a feature request had been approved by product management and planned for a future release. Luckily, having a robust design system like Carbon meant I didn't have to start from scratch. Working on extensions to Carbon components usually involved these steps:

  • Asessing the current component and technical constraints
  • Designing new user flows and screens using Sketch
  • Building clickable protypes in Invision to show to stakeholders
  • User testing (time and resources permitting)
  • Developer implementation and support
  • Contributing to Carbon and/or the AI Apps PAL
Below are some example screens I designed for extended data table features.
data table with a view dropdown

Concept for saved views⁠: easily recall custom columns, filters, and searches

data table with a filtering panel

Concept for advanced filtering panel: filter by any number of parameters and see applied filters as tags

data table with a modal

Concept for column customization: turn on/off and rearrange data table columns using a pop-up modal

Testing designs with moderated user sessions

User testing and research gives incredibly useful insight when designing new or non-standard features. We were initially concerned that users would be confused by the data table column customization design (pictured above) and decided to do some testing. We tested with

5 particants in 45 minute sessions

and observed as they used a clickable design prototype to complete 3 tasks. Some research questions included:

  • Do users understand where to go to perform column customization tasks?
  • Do users understand the modal and possible actions?
  • Do users expect to perform column customization outside of the modal?
After testing, we concluded that the proposed feature did not create any unnecessary UX burden, but did notice a pattern where users expected to directly manipulate the table columns via clicking and dragging, rather than through a modal. This spawned a number of additional design explorations around drag and drop concepts.

showing drag column action

Exploring the hover state for changing column size

showing drag inside action

Additional drag and drop concepts for items in a list/data table

showing drag to rearrange action

Contributing designs back to the AI Apps PAL

IBM is a large company with many different teams and products, so it can be easy to accidently duplicate work. With that in mind, everyone in the AI Applications organization is encouraged to contribute designs to the The AI Apps PAL (pattern and asset library.) Much of my work around data table features could be adopted by multiple product teams to suit a number of situations.

Submissions involved proposing a contribution, outlining design specs and usage guidance, and working with designers and developers across the organization to finalize patterns and components. Once a design had been formally accepted by the PAL team, it could be picked up by any team to solve the needs of their product.

example of dropdown specifications

Examples of design specs/states for the saved views dropdown