Data Visualization Research

Translating complex information into intuitive and visually engaging charts and graphs.

Hewlett-Packard Enterprise
Design System Guidelines
Design in Action

About the project

In order to make sure that the new color palettes were not only visually appealing, but also functional and accessible, it was imperative to make sure they were research backed. After interviews with designers and meetings with developers alongside several color-blind tests and a lot of research, we opted for 3 different color palettes of 7 colors with distinct use cases for each.

  1. Qualitative as the main core palette
  2. Sequential to represent inherently ordered values
  3. Diverging to represent inherently ordered values with a shared middle point.

Initial Analysis

The first step was to analyze where we were with our current color palette and how those colors can be leveraged to assist in the creation of the new palettes. To do this, I started with plugging in our current color palette into a color wheel and organizing color combinations by complementary, analogous, and split complementary/triadic.

Determining Color Palettes

Pulling from the current colors, I used the above palettes to determine which colors to choose for the Qualitative palette. We wanted to refrain from using green and red to avoid any crossover with the current status colors.

For the Sequential palette, we decided to build the palette around Brand green at the center and gradually add 3 darker shades and 3 lighter shades.

Similarly for Diverging, we pulled from both the split complementary color pairings and one of the current brand gradients had the two colors merge at a neutral color between the two.

Accessibility Testing

Once the initial color palettes were loosely decided, I plugged them into some graph and chard examples and ran them through color blind tests and determined that greyscale was the only way to maintain consistent contrast across all types of colorblindness. View all of the testing here.

Finalizing Color Palettes

After several tests, we finalized the color palettes to the following palettes and applied them to various charts and graphs.

Project results

Once the colors successfully went through final testing with the Product team and accessibility testing, some of the benefits from the new palettes included:

  • Enhanced Interpretation: Qualitative color palettes facilitate clear distinction between categories, aiding viewers in quickly comprehending data groupings in charts and graphs.
  • Intuitive Progression: Sequential color palettes guide users through data trends with a natural color progression, making it easier to understand gradual changes and patterns.
  • Highlighted Insights: Diverging color palettes emphasize critical data points and variances, enabling users to focus on key comparisons and outliers within visualizations.
  • Consistent Communication: Incorporating these diverse color palettes into a design system ensures harmonious and standardized representation of data across various visual elements, fostering a cohesive user experience.