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.
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.
Use Cases
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.
Use Cases
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.
Use Cases
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.
