Our Thoughts

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. 

The History 

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."  

You can read more about the differences here.

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. 

Consider Colorblindness

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. 

NOT. 

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: 

  1. add a neutral 9th grey color in the center, which will make this value transition  smoother

  2. reduce the overall brightness of the palette, which will make the neutral colors more  visible

We changed our divergent scale from: 

To:

Before

After 

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.

Suggested Articles

Tobias Sutters

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.