Product Design

Data Visualization color palette

Company

UserTesting

Categories

Data Visualization
Product Design
Design System
Color Palette

Tools

Figma
ColorBox.io
Chroma.js
Viz Palette
Adobe Color
UserTesting

Role

Led the color development strategy, principles, inspiration research, customer testing and implementation on a team of three designers

Problem Statement

How might we use color to support meaningful data representations and engaging experiences? 

Palette Principles

Color for All

Palette should be accessible and engaging for any customer.

Distinct, Not Distracting

Data colors should support the data in a way that does not distract from interface colors, which may require attention.

Flexible

Colors should be strong enough to work across various data contexts.

Broad Appeal

Palette should be large enough to support broad and common color associations.

Approach

Understand

Draw on previous experience and research comparative experiences and tools for data visualization color.

Explore

Create color palettes to discover unique preferences and challenges. 

Stress Test

Use palette generator and accessibility tools to ensure colors work for all customers and across data visualization contexts.

Converge

Act on learnings from exploration and stress testing to create a palette that measures up against principles.

User Testing with Customers for Palette Feedback

Three palettes were created and tested with the User Testing Platform to assess clarity and ease of interpretation. 

User Tested Palettes

Final Data Visualization Color Palette

Consideration of customer research, internal feedback, and color principles led to the selection and approval of the brand inspired data visualization color palette. This palette is now in our Design Library and soon to be implemented in our Design System Toolkit.

Sequential, Dark Palette

A sequential palette is used for ordered data. This palette provides the foundation for categorical and diverging data color palettes. For sequential data, only one color scale is used.

Sequential Data Colors, Dark

Use Cases

Rating Scale
Heat Map

Categorical, Dark Palette

Categorical, or unordered data, is data that does not have a specific numerical order structuring it. Categorical data might be found in the results of a multiple choice question. Below, is a base palette derived from the foundational Sequential palette. 

Categorical Dark

Use Cases

Donut Chart
Dark Accent Colors in Labels

Diverging, Dark Palettes

Diverging palettes are used to show distinct ranges of data on the same spectrum, such as hot and cold. There is a range for hot and a range for cold that can be unique and a neutral point in the middle, such as zero. The below diverging palettes include seven steps with a neutral point.

Diverging Dark

Use Cases

Written Response Chart
Likert Chart

Full Data Visualization Color Palette — Dark & Light

The full color palette also accounts for dark mode, white, greys, and black and includes guidance for how to use the colors. It includes examples for complex use cases, which I designed and feature on other pages in my portfolio.