May 11, 2021
Copilot Color Theory
The Copilot Color Theory
On the Copilot team we embrace mistakes and improvement. Our commitment to constant learning is reflected in our ever-changing color palette, which has evolved from a handful of default Tableau colors to a custom palette that takes into account our users' needs.
A lot of technical thought goes into making sure we have the right colors to communicate the story of our AI — it isn’t just the marketing team adding a new hex code to the brand deck. Let us take you through the evolution of Copilot’s color palette and some key decisions that were made to improve our designs along the way.
Before we had a dedicated Data Visualization team, we still had visualization needs (like any team that has its hands on data and wants to make decisions based on that data).
During this time in Copilot history, we were mostly building dashboards in Tableau for our internal needs, such as monitoring or testing features, but we also had some simple visualizations in our UI to show delivery and performance across the campaign.
Most of our visualizations were time-series based; we had lots of bar charts, line graphs, and area graphs, the bread and butter of data viz. For the visualization colors we primarily relied on Tableau defaults or, when we had the option, the color palette of our parent brand, Xaxis. Since our dashboards were for our own internal trader use, we put more emphasis on simplicity than design.
New Color Opportunities
As Copilot’s technology became more sophisticated and complex, so too did our visualization needs. The team realized that a dedicated data visualization team was needed who could focus on
communicating these complexities. That’s where we come in- a design group with two main goals:
translate our clients' data to actionable insights and
visualize our algorithms so that both our traders and clients could understand what happens “behind the scenes”
One of the first big projects tackled was a visualization of a complex clustering model that grows over time. The account teams had gotten pretty good at describing the model, but we knew that adding some color and shape to this explanation to SHOW what is happening would do wonders.
Similarly, we have built an A/B Insights feature to visually compare two flights and see how they differ in performance and delivery.
As you can see, our new visualizations brought with them some color challenges. We needed colors to represent:
differences between two different flights “A” vs. “B”
scenarios where there is no data, i.e. data vs. no data colors, and
a range of performance values from “good” to “bad”
Let’s focus on that last point for now – encoding performance. To understand this data visualization challenge, let’s specifically look at cost per click (CPC) performance on a map of the US, where we use color to encode performance.
Our First Stab
With the marketing team’s color palette as a starting point, our team came up with a continuous green → yellow → red scale for encoding performance.
The strongest aspect of this color scale is that it is familiar. This type of green-is-good, red-is bad, and yellow-and-orange-are-somewhere-between encoding is used in many places — from traffic lights to the stock market. The major drawback to this choice: it is not accessible to all.
Back to the Drawing Board: Find the Right TYPE of Color Scale
One of the first steps in landing on the right colors is to decide what kind of scale should be used. Color scales used in data visualizations typically fall into one of three buckets — divergent, sequential, or qualitative. (Read more about color scale types here.) In our case, we can immediately throw out qualitative because we know we are dealing with ordered, numerical data.
That leaves us with either sequential or diverging.
A sequential scale typically uses a single hue and varies saturation and / or luminosity.
A diverging scale typically uses two different hues (can be more) at either end of the scale with a neutral or white in the middle. These scales are only appropriate when "there is a value of importance around which the data are to be compared."
If we were to use a sequential scale, only one “end” of our data values would be highlighted. (e.g. if we made it so that values with a higher CPC were the darkest shade, then those DMAs would stand out, but not the DMAs with the lowest CPC.) For our purposes, we care about both the high (bad in the CPC example) and low (good) values, so a sequential scale is not exactly what we need.
Because there is a “middle value” of importance (e.g. mean CPC) that all other data should be compared to, a diverging scale makes the most sense for our visualization.
On the Copilot team, we believe in making advertising better for everyone. That means everyone.
Red-yellow-green color scales are not accessible to many people with color vision deficiencies (CVD). According to colorblindawareness.org, “CVD affects approximately 1 in 12 men (8%) and 1 in 200 women in the world” with red-green being the most common displays.
During our color research, we came across a tool called Colorblindly, which is an extension that helps developers create websites for the people with colorblindness by allowing them to simulate the experience those users have on websites.
Take a look at this map for example. For users with trichromacy (“normal” color vision), it’s easy to pick out the areas with bad (red) and good (green) CPA.
Now, compare it to the versions that CVD folks may see:
See the difference?
An update was needed to the hues at each end of the scale, and we leaned into an app called ColorBrewer to make our map palette specifically more accessible. We ended up with a diverging color scale with pink and green at each end.
Finally, we’d picked the perfect palette.
Adjust as Needed
As we mentioned, building a color scale has been a process.
While we were successful in highlighting good and bad performing objects with our pink and green color palette, we neglected to take the visualization context into account. We noticed that objects which have values closer to the mean are hard to focus on because of low contrast between the light colors and our white UI background. Furthermore, at the point where the color changes from pink to green - it read as if there is a big change in value, even when the colors were very close to the mean.
To address these issues, we thought it would make sense to:
add a neutral 9th grey color in the center, which will make this value transition smoother
reduce the overall brightness of the palette, which will make the neutral colors more visible
We changed our divergent scale from:
The last step to this process is building out a set of data visualization style guidelines which would include best practices on accessibility, diverging vs sequential scales, and more. Documenting our standards and learnings will help to build more consistency across our visualizations, whether they live in app, on Tableau, or in a slide deck.
The Making of Copilot Insights
In October of 2020 the Copilot team embarked on a journey of reimagining Insights through the lens of machine learning and data visualization. See the steps we took to build the newly launched Copilot Insights package - all from our homes during the pandemic.