How We Use Design to Strengthen Data Campaigns

In a number of ways! The great thing about tables is that you don't need to make any big changes. Small touches are enough to help guide readers. For example, when dealing with multiple data points, we bold the most important column to generate contrast with the other columns that are providing additional context.

JB: Sometimes you have to scan through multiple columns to determine what the primary ranking factor is – particularly with complex indexes – so formatting like this helps with signposting. Are there any other tricks you use to help the readability of tables that have lots of entries?

JL: Another easy trick that works well with tables, particularly those with lots of rows and columns, is to use zebra striping (see table above). This, or using dividing lines between each row, helps users to keep track of all the data without getting confused about which row they are on.

JB: How does colour come into play?

JL: Colour plays a vital role in our designs. In tables, we use colour to group related data. This helps users understand the relationships and patterns within the information. For example, for this McDonald’s prices table, we used colour to distinguish the location columns and filters from the columns showing menu items.

JB: Are there any other colour considerations with interactive tables?

JL: As colour attracts attention, we use it for buttons and filters that allow you to switch between content views or modes. Interactive tables need to be user-centred, so we use colour to guide the user experience. We want to make it clear which elements are sortable and interactive, and which are not.

We also use natural associations with colours as visual cues. That might be colouring arrows green to emphasise an upward trend or using red to indicate negative numbers.

JB: Are these associations consistent across projects or do they change from project to project?

JL: They’re not, it depends on both the topic and the metric. Colour associations can vary in different contexts. As I mentioned before, we use red to indicate negative numbers because it's a colour that can have a negative connotation. But anger, as well as passion, can be represented by red too. This is why we used red for the highest values in the 'Which Countries Swear the Most?' project.

JB: Speaking about maps with 100+ data points, how do you ensure that the readers aren’t overloaded with information and can pull out the key takeaways at a glance?

JL: When dealing with a numerical scale, there are at least two things you can do. One option is to pull-out top and bottom rankings to highlight the range of values more clearly, helping readers to understand where a country sits within the overall scale. Another option is to add top and bottom side tables, which is the simplest way to present the main points at a glance.

JB: Yeah, although maps are good for understanding where a country or city sits geographically, it can be hard to compare values. Without clear visual cues you have to scan every entry and manually build a ranking in your head to get the full picture.

JL: Yes, and we can take those cues to the next level by combining maps with bar charts. This works well when you need to compare values across different regions, because bars can easily indicate scale, while the map provides the geographical locations. I also see this as an opportunity to double down on the theme by shaping the bars to resemble other objects. For example when we shaped the bars like moving boxes to show the biggest tech layoffs by company.

JB: For me, having those charts helps to instantly see the major layoffs without having to read any values.

JL: It does and another example of this is the tile grid map. We usually apply this approach to U.S. maps when we’re visualising two figures that combine to represent 100%. This type of map is perfect for comparing data across all states, as it gives them all the same visual weight.

JB: What if you’re not using numerical values, how do we add information without words to make it easier to digest?

JL: If the main data points are industries, we use icons. If they are brands, we use logos. Images can make data more accessible. When the data refers to cities, recognisable imagery such as city photos makes it easy to spot the highlighted winners at a glance.

JB: You talked about colour association earlier, how do logo colours play into that? 

JL: Sometimes brand colours are very similar, especially if the brands are from the same industry. This happened in the 'Most Affordable Grocery Store for Halloween Candy in Every State' project, where most logos were red. To make a visual difference, we made all the logos black and created our own key at the top.

JB: Moving onto basic chart rankings, how do we employ imagery in different ways depending on the subject of the rankings?

JL: There are times when appearance is a big part of recognising what you're ranking, especially when it comes to people or places. Adding photos really helps readers identify each entry quickly. And if you want to draw more attention to the winner, you could use hero images.

JB: The hero image is great when being the winner of the ranking carries the bulk of the headline weight beyond other entries. Not only does it create that visual hierarchy, it also allows real estate for additional copy context that provides insight for journalists on the page.

JB: How does the type of data you’re ranking affect the way you design a bar chart?

JL: I love this question because it shows the difference between making a standard bar chart and creating something that really adds value.

For example, when you’re dealing with the passage of time, it can help to break the bars into smaller units, like turning years into months. Another good example is when you’re working with people data, where breaking the bar into blocks represented by people icons instantly makes the visual more relatable.

JB: In that example actually, something that’s present here is the industry colour coding of the bars. This is something you always request for the overall rankings we do.

JL: We use colour coding on the bars to make it easier to spot trends and differences between the various types of companies. But this is only one way to approach it. In the “Virtual Influencers” project, for example, we coloured the borders of the photos instead of the bars. What you choose will depend on how many categories you have and on your own preference. The key is to establish a visual logic that works across every piece. If the same colour is used for an industry in its own ranking, the reader can understand each asset more quickly because the colours are already familiar.

JB: These are examples of simple bar chart applications, when and how do you decide to adopt more explorative approaches?

JL: It depends on the type of data. Lollipops are a great way to show the difference between two data points and how that difference compares to others. To make this clearer, it helps to show the gap values in a separate column and to sort the table by the largest gaps so the story flows logically. It's important to have good contrast, because the whole point is to make the gap easy to see quickly. If you put the biggest gaps first, it makes the message stronger and easier for the reader to understand.

JL: An alluvial diagram is another great way to show changes over time. This is especially useful when you want to highlight how different groups relate to each other and how their proportions shift. It's interesting how it makes a static chart look more dynamic. In this example, each flow is coloured using the main colour from the company's logo. This makes the visual easier to understand and adds a layer of recognisable identity to the data.

JB: Thinking about all the insights you’ve provided, what sticks out to me is how easy it is to become over-familiar with a project to the extent that we fail to appreciate the user journey for someone fresh to the project. That curse of knowledge can lead to frustration as readers lose patience trying to decipher what the data is trying to convey. Anything we can do to expedite that comprehension process is helpful.

JL: I completely agree. As designers, we can easily fall into the trap of adding colour or extra elements simply because they look nice, rather than because they contribute to understanding the narrative. The real skill lies in knowing when to hold back and when to push forward. If we focus on how a first-time reader will experience the piece, every decision becomes clearer!