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.
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
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.
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.
Concept for saved views: easily recall custom columns, filters, and searches
Concept for advanced filtering panel: filter by any number of parameters and see applied filters as tags
Concept for column customization: turn on/off and rearrange data table columns using a pop-up modal
Exploring the hover state for changing column size
Additional drag and drop concepts for items in a list/data table
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.
Examples of design specs/states for the saved views dropdown