An underexposed area within design systems is data visualization. Looking for example at IBM’s Carbon Design System, which is considered a leading standard, the data visualization section doesn’t fit seamlessly in the overall design system. For companies with a strong dependency on data, which is almost any organization these days, there is much to be gained. Both for internal applications as well as customer-facing products.

In this article I will explain:

• What a data design system is,
• What the benefits are, and
• Where to start setting one up. Be it stand-alone or as an extension to your existing design system.

I will use examples of two of our client cases to illustrate what this means in practice.

What is a Data Design System?

The basic principle behind a data design system is similar to a “traditional” design system; by deconstructing, standardizing and structuring the different types of data visualizations you gain efficiency and scalability, while at the same time improving the quality and consistency across your products and services.

From spark-line to fully expanded line-chart for the the Data Design System for Cisco DNA

The difference between the two lies in the nature of data visualization. Next to the high complexity of data visualization, there is a limit to what extent you can, for example, deconstruct a line-chart. The different elements that make up a line-chart are heavily intertwined.

Similar to isolating an input field as a reusable component or defining a search pattern in a “traditional” design system, you can distill general principles to provide guidance in, for example, applying the correct line color and thickness across different types of charts (e.g. line-chart, sparkline or timeline). Also, legend interaction or hover and select states can be deconstructed as recurring patterns applicable to different types of charts.

Isolating the line and hover-state from a line-chart

However, combining all the different guidelines and patterns does not allow you to consistently build up a line-chart, or any chart for that matter. The line needs to be in context of the other elements of a chart for it to have meaning. In order to fit it into a system. As such, in a data design system we add a third layer. Next to the commonly used categories “components” and “patterns”, we add “charts”. Within this category we describe the generic behavior, attributes and rules that apply to the applicable chart-type.

As such, we use three categories when designing or deconstructing a data visualization within a data design system:

• Charts: To which chart type does the data visualization belong? Which chart-specific aspects do we need to describe?
• Patterns: Are there (interaction) patterns used that could be applied to more than one chart type? Think of (actionable) legends, applying thresholds, no-data states, wide-range values, data scalability, etc.
• Components (optional): Are there components applicable to the chart that we can leverage from the existing component library (if available). Or does the chart contain a component(s) that we should add to the components library?

As part of the overarching design language we then ask ourselves:

• Guidelines: Which guidelines are applicable for this chart? Think of responsiveness, layout, (data) color usage, typography, motion, etc.
• Principles: Does the way we embed the chart into our design system adhere to our principles?

The “hamburger”: A schematic overview of how a Data Design System fits in the larger business context

For Cisco DNA we included the timeline chart in the chart library. The different variations touch upon a few recurring patterns and guidelines that were applicable for this chart. For example, how to deal with the patterns no-data, thresholds and hover as well as applying the guidelines for data color usage, typography and layout.

Selection of three timeline variations from the Data Design System for Cisco DNA

The benefits of a Data Design System

There are numerous articles written on the benefits of “traditional” design systems. Below four key benefits specifically for data design systems.

• Data visualizations are complex and highly context dependent. Hence, there is the pitfall of making tailored designs for every data visualization to meet the specific business and user requirements. This results in extra work and less consistency between visualizations and products. Enforcing yourself to “fit” every data visualization to proven chart-type and guidelines will improve the quality of each individual data visualization as well as across a product or product range.
• Having an integral and recognizable look-and-feel to your data visualizations not only strengthens your brand and identity across your products and services, it also improves the readability and usability of your data visualizations for your users as the same patterns and guidelines are consistently applied.
• A data design system forms a competitive advantage that allows you to focus more on strategic execution instead of getting distracted by tweaking, (re-)discussing and adjusting each data element in your products and services.
• A data visualization is never an isolated element. It lives within the context of other elements to form a compelling story or allow for informative exploration. Having a data design system allows designers and developers to focus on how to best bring these different elements together instead of reinventing the wheel of each project. This fosters innovation resulting in more coherent, inspiring and comprehensible user experiences.

Next, we will go into ‘where to start?’

Selection of charts from the Data Design System for Wellcome Trust

Where to start?

If you are convinced of the added value that a data design system can bring to your company, the question arises where to start? Below five concrete tips to get the ball rolling.

1. Use the “hamburger” approach. Start with your companies Brand & Strategy as input for your Design Language (top-down). In parallel you select a few key data visualizations from your existing Products and Services to start with (bottom-up). This allows you to start small, while crossing the bridge from your Brand & Strategy to the application of the data visualizations in your Products & Services.
2. Take a highly iterative approach. Do not spend all your effort in developing a comprehensive set off guidelines in advance. Instead, tackle the different data visualizations one by one and build your chart & pattern library in parallel.
3. A data design system only has value when applied in practice. Hence, as soon as you have a first set of charts (an “MVP collection”), start applying them to one of your existing products to test them out.
4. Take an integral approach by putting designers and developers together. Data visualizations are highly dependent on their technical feasibility. At the same time, this allows you to not only focus on a (static) style guide, but also on building a reusable code repository.
5. A data design system is a living system. It will never be finished. Hence, consider having a dedicated design and development team to develop and maintain the data design system. They can create the building blocks for your product teams.

Structuring data visualizations within a design system may seem daunting at first, but when correctly setup from the start it can grow into one of the most valuable assets of your company. With this short introduction into data design systems combined four concrete benefits and five tips to get started, I hope to have given you a few valuable new insights. If you would you like to know more about data design systems in practice or our work in general, please do not hesitate to reach out.