2018 – 2020

Data Visualization System for Fleet Management

Building a chart language from scratch, and becoming the team's go-to expert.

RoleEntry to Junior UX Designer
ProductTechPulse, HP Inc.
UsersEnterprise IT teams
FocusData visualization, color, and best practices
At a glance
The problem
TechPulse's charts were colored in shades of HP blue. On a dashboard with many categories, adjacent values read as the same color.
What I did
Split color into three purpose-built palettes by job, and made the categorical one generative, calculating maximum separation for whatever number of categories a chart needed.
The outcome
Adopted across the design team and used in conversations with product managers. I became the organization's data visualization resource.
Three charts, each using one of the three palettes: a donut in the categorical palette, a grouped bar chart in the positive and negative palette, and a line chart in the key performance indicator palette
The three palettes in use. Categorical for comparing unlike things, positive and negative for status, and the key performance indicator palette for singling one series out.

Overview

TechPulse is what HP customers used to manage large fleets of devices, sometimes thousands of machines at once. The product ran on data: device health over time, fleet-wide counts and breakdowns, alerts and anomalies. All of it had to be readable at a glance by someone scanning for problems.

The dashboard was full of charts pulled in from Highcharts, a third-party charting library. The team had already replaced the library's default colors with shades of HP blue so the charts would sit properly inside HP's design system. That solved the brand problem and created a different one, which is what I was handed to fix.

The problem

A palette built from shades of a single brand color looks unmistakably like the product it belongs to. It also gives you very little to work with when you need to tell things apart.

On a chart with a handful of categories, a range of blues holds up. On a fleet dashboard with many, it doesn't: the blues start landing close enough together that adjacent values read as the same color. Someone scanning for a problem has to stop and check the legend, and the chart stops being glanceable, which was the entire reason it was a chart instead of a table.

The previous palette: ten swatches running from light blue through to dark purple, with very little contrast between adjacent steps
The previous palette. Ten fixed colors stepping from blue to purple, which meant adjacent categories were always near neighbours.

The underlying tension was that the palette had been chosen to satisfy the brand and was being asked to carry meaning. Those are different jobs. Color on a dashboard isn't decoration. It's the thing distinguishing one device category or status from another, and a monochrome range can't do that past a certain number of values.

A donut chart and a stacked column chart showing five fruit categories in the old blue palette, where adjacent segments are hard to tell apart
The same colors at chart scale. In thin segments and small stacked bars, neighbouring categories stop being distinguishable and the legend becomes the only way to read the chart.

Designing the palettes

The first decision was that one palette couldn't do it. Color was being asked to do three different jobs on the same dashboard, and collapsing them into a single set of swatches is what had caused the trouble in the first place.

So I built three, each with a defined job. The structure and the logic were mine, shaped by input from others on the team along the way:

Categorical

For comparing unlike things side by side, the apples-and-oranges case. Device types, operating systems, locations. The colors carry no meaning beyond "this one is not that one," so all they have to do is stay apart.

Positive and negative

For anything communicating health or status, where color does carry meaning: critical, high priority, low priority, healthy. These needed to read correctly and instantly, because a misread here is a misread of the fleet.

Key performance indicator

For singling out one category unmistakably, when the point of the chart is to draw attention to a particular thing rather than compare across all of them.

Separating them meant a designer picking a chart color had to answer a question first: is this distinguishing, evaluating, or highlighting? That question does most of the work.

Making the categorical palette generative

A fixed list of categorical colors has a built-in flaw. Whatever spacing you choose is only correct for one number of categories. Pick eight well-separated colors, then use the first three, and you've got three colors sitting closer together than they needed to. That was a version of the original problem, just less severe.

So the categorical palette isn't a list. It's a calculation.

I set two fixed endpoints on the color wheel, chosen so they didn't overlap meaningfully with the positive/negative or KPI palettes. That constraint mattered as much as the colors themselves: a categorical color that lands near the status red would imply a judgment the chart isn't making.

From there, the number of categories determines the palette. The two endpoints take the first and last positions, and the colors between them are calculated at equidistant points along the wheel. Five categories produce a different set of hex values than eight, and each set is spaced as widely as that number of categories allows.

Three rows of color swatches showing the categorical palette calculated for 3, 5, and 8 categories, each spaced across the same two endpoints
The categorical palette calculated at three, five, and eight categories. The endpoints stay fixed and everything between them is recalculated, so separation is maximised for whatever a chart actually needs.

Developers implemented the calculation in code, so this ran live rather than existing as a rule people had to apply by hand. That distinction matters. A documented spec degrades every time someone is in a hurry. A function doesn't.

A designer doesn't choose colors at all. They say how many categories they have, and the system returns the most distinguishable set available.

I tested the palettes on the chart types the TechPulse dashboard actually used, rather than on swatches on a page. Colors that look distinct as squares can collapse into each other as thin pie slices or small bars, so the test had to happen in the shapes the data would really take. I also reviewed the palettes with colorblindness simulation filters, checking that the separations held up under the most common types of color vision deficiency rather than assuming they would.

The same donut chart shown twice under a color vision deficiency simulation, once in the old blue palette and once in the new categorical palette, where the new one remains readable
The same chart shown as someone with deuteranomaly sees it, the most common form of color vision deficiency. On the left the old palette, on the right the new one.

Color separation is only one line of defense. Texture, patterning a series rather than only coloring it, would have added a second layer that doesn't depend on color vision at all. We didn't get the opportunity to implement it, and it's the first thing I'd add if I picked this system back up.

I presented the finished palettes and the reasoning behind them to our organization at a lunch and learn.

Choosing the right chart

The guide also carried limits. The guidance I wrote is no more than six categories on a chart, and eight at the absolute most. Past that point no palette can rescue a chart. There isn't enough distinguishable space on the wheel to separate nine things, and a reader can't hold nine categories in their head while scanning a dashboard anyway. A chart that needs more categories than that is usually the wrong chart.

A presentation slide about line charts stating that they should not display more than six categories at a time
The ceiling written into the guidance. Each chart type got its own limit, based on how many series it can carry before the reader stops being able to follow them.

A palette only solves half the problem. The other half was designers picking the wrong chart type for the data, which no amount of color fixes.

So I wrote a chart selection guide covering a wide range of chart types: start from the question the chart needs to answer and the shape of the data, and the guide leads you to an appropriate visualization. It turned a judgment call into something repeatable.

A decision tree beginning with the question
The chart selection guide. Start from what the chart needs to answer and the shape of the data, and the tree leads to an appropriate visualization.

The team adopted the guide and used it when consulting with product managers on TechPulse, so chart choices in those conversations were grounded in best practices rather than in whoever had the strongest opinion. I also built a presentation on chart best practices and delivered it to the organization.

A presentation slide titled
From the deck presented to the organization, showing how the data visualization colors were selected out of Veneer's wider palette.

Becoming the team's expert

After the lunch and learn I became the design team's resource on data visualization. That meant regular UI reviews with engineers, product managers, and other product designers, working through how the patterns applied to whatever they were building. Somewhere along the way people started calling me "chart girl," which I took as evidence it had worked.

The better evidence was that other teams started using the palettes without anyone telling them to. Nothing about this was mandated. It spread because it was easier to reach for than inventing colors from scratch, which is the only way an internal standard ever really takes hold.

This happened years before I had any kind of leadership title. Building something reusable, documenting it well enough for other people to use, and becoming the person a team turns to for a specific kind of expertise is the same instinct that later shaped my work on Veneer. The scale changed. The approach didn't.

It's also where I was a consumer of Veneer rather than a builder of it. I was the designer reaching for someone else's components and looking things up in someone else's documentation, and running into the places where neither covered what my product needed. That perspective is the reason I later knew what to put in the documentation I'd go on to design.

Impact
  • Built TechPulse's first data visualization system: three purpose-built palettes, chart patterns, and a selection guide
  • Split color into three semantic roles so a single palette wasn't doing three incompatible jobs
  • Made the categorical palette generative, calculating maximum-separation values for whatever number of categories a chart needed
  • Set a documented ceiling of six categories per chart, eight at most, past which no palette can do the work
  • Constrained the categorical endpoints so they couldn't be confused with status colors
  • Verified the palettes against colorblindness simulation rather than assuming they worked
  • Chart selection guide adopted by the design team, making chart choices repeatable rather than dependent on one person
  • Shipped as working code rather than a documented spec, so the categorical palette generated correct values automatically
  • Adopted by other teams without a mandate, which is the clearest signal an internal standard is worth using
  • Served as the organization's data visualization resource, presenting standards company-wide
  • TechPulse was later absorbed into HP's WXP software, carrying these foundations forward

Reflection

This was the first thing I built that was meant to be used by other people rather than shipped once. The palettes were the visible part, but the rules underneath them were what made it a system. A good set of colors living in one designer's head doesn't scale, and it disappears the moment that designer moves teams. Making the categorical palette calculate itself meant nobody had to remember how the spacing worked.

That is the same lesson underneath everything I have worked on since. The artifact matters less than whether anyone else can pick it up and use it correctly.