Designing with Data

For the past 8 years I have been working in the world of UX design & development at IBM. In particular, I have developed expertise in building tools focussed on data visualisation and interaction for clients and internal projects.

During this time, I’ve run dozens of workshops across Europe on “Designing with Data”. The audience varies from Execs through to Developers and Designers entering the field of UX for the first time. I’m regularly asked for advice on what considerations should be taken when working with data and so I thought it would be worthwhile me sharing the 5 key messages that I present in these workshops.

I won’t be covering these in great depth, but enough that you can begin to consider and apply them in your own work.

1. The Value of Visualisation

The likelihood is, if you’re reading this article, you probably don’t need persuading that visualisation of data can be an incredibly useful communication tool. Just in case though, or, if you’re looking for a case to persuade others, let me share the following persuasive example based on the Five Second Test.

The table of data shows scores from a game consisting of 10 rounds. The winner of the game is the person with the highest cumulative score. In my talk, I show the table of data and ask the audience who the winner was. Generally, 60–70% of the audience will vote for Player 1.

Three Second Test — demonstration to show how graphical data, even when presented in a simple chart, can be far more effective at communicating a message quickly and clearly.

I then show the same data in the graphical form. In both cases, the same information is shown, once in tabular form and once in graphical form, for 3 seconds each. When the data is in graphical form we can quickly assert the winner, even at a 3 second glance of the information.

In the social media generation where we scroll through countless content daily, quick and effective message communication is becoming vital. Being able to design a piece of visualisation that can communicate your story quickly and grab the attention of users to engage is very important.

2. Design Process

Generally, when tasked with designing a piece of data visualisation, you are presented with a database, spreadsheet or an API and told to “make this look good”, resulting to this such design process:

Traditional Design Process — when working with data visualisation, we have a known dataset that has previously been acquired and stored. When visualising, we investigate that data, filter out the relevant pieces we care about, design a chart to represent that data and then build it.

IBM are very strong advocates for Design Thinking and if we are to consider its key philosophies, and apply those same principles to designing with data then we should arrive at something like the following process instead:

Designing with Data — when we first ask questions of our users (Enquire), we ensure that the output is designed with its core target in mind. Designing without limitations of known datasets makes us think outside of the box. What is the ideal data that we would have, should it exist? In focussing on the message of the data visualisation, we can then ask questions of the datasets available and cast our net wider in search of the relevant data in order to effectively tell our story.

In asking questions of your data and users, you will often take the incentive to explore wider for useful datasets. There may be open data, or other sources that you can call upon to support your existing dataset that enable a much more compelling visualisation.

If we design and prototype before interacting with the existing data, we can get feedback from users to ensure that the visualisation and interactive mechanisms work. We do not constrain ourselves to having to spend days getting data into the right format, even before we visualise it for the first time, for feedback to then tell us the piece of data isn’t relevant.

Example: 2018 U.S. Gun Killings

A wonderful, but haunting example of the out of the box thinking with datasets is the 2018 US Gun Killings visualisation on Periscopic. Challenged with telling the story of the number of gun deaths in the US, it would be easy to draw a bar chart, comparing the number against previous years, or other countries. Similarly, they could have drawn an animated line chart, growing throughout the year. Both would have utilised the base dataset provided.

U.S Gun Killings in 2018 — animated visualisation sequence that explores the concept of “Stolen Years”. Source: https://guns.periscopic.com/

Instead, the authors of this piece went further. They sought additional data on the average life expectancy in the areas where the deaths took place to supplement their message. With this, they calculated a new metric, “Stolen Years”, and articulate an incredibly powerful message that the gun deaths in just one year in the U.S, lead to over 500,000 stolen years.

3. Design for your Platform

Static line charts and bar charts can be great. They are the classic pieces of data visualisation that you first get introduced to in school. They are very effective at communicating simple data structures and are especially clean as they can be printed onto a piece of paper and still communicate as effectively as they do on a screen.

Though, in our modern world, the keyboard and mouse, touchscreens and mobile phones play an integral part of our everyday lives. A static bar chart is useful, but we have so many more dimensions of visualisation and interaction at our fingertips. Make the most of them and design with your platform in mind.

Example: The Global Flow of People

Let’s take an example of a chord diagram.

The Global Flow of People — A chord diagram showing the migration of people across the globe, 2005–2010. Clicking on a high-level region expands to show a breakdown on a country-by-country basis, with a continuation of the hover/tooltip behaviour also available at the top-level for each outer edge and link. Source: http://download.gsb.bund.de/BIB/global_flow/.

At first glance, chord diagrams can easily be mistaken for a piece of Jackson Pollock art . Chord diagrams are ineffective at data communication when printed onto a piece of paper and presented in a report. Whilst you may get a high-level idea, in this case more people coming into Europe than leaving, the details are difficult to digest. However, when designed properly, they can be a very clean way of communicating traffic and flow between two entities when we consider the ability to interact.

The visualisation can be peeled back to unlock layers of depth in our data. We can use tooltips to offer precision in the chords and make areas semi-transparent when the user is focussed upon a particular area.

Example: Earth Nullschool

Another beautiful example of designing with your platform in mind is the infamous wind map by Cameron Beccario.

Earth Nullschool — Interactive wind map by Cameron Beccario showing the various data layer options available.

It has dozens of data layers that you can toggle on/off. Zooming and panning allows you to explore the world at varying levels of detail, you can click anywhere to get a precise data value and the wind data is so effectively communicated with vector field animations and colour.

4. Tell a Story

Every piece of data visualisation tells a story. Its job is to communicate the message represented in your data. As a person building or designing a piece of visualisation, it’s your role to ensure that the story is clear and well thought through. Data visualisation can be used to explain complex topics, such as this article on r2d3: A visual introduction to machine learning, in an easy-to-understand manner.

Visualisations can quickly become overwhelming though. By ensuring that focus is drawn to the data you care about, it ensures users take away the key messages you are trying to share. Animation can be an effective way of doing this, (a) without overwhelming the user with lots of data in one hit and (b) in such a way to exaggerate and put attention on changes and differences in data.

In the following example taken from my “Designing with Data” presentation, I animate the bars to bring attention in the difference in scale between the values, and then reinforce that message with the use of the “Events since…” slide. The animation is loosely inspired by the “Relative Scale of the Universe”.

Events per Second — Accelerated animation taken from my “Designing with Data” talk showing a data visualisation of the number of events-per-second across various large scale software infrastructures. Data taken in 2016 from Internet Live Stats & IBM Z

Example: Out of Sight, Out of Mind.

The following example is a beautifully melancholic piece of data-driven storytelling. Its distressing message is so eloquently told in beautiful data visualisation and animation.

Out of Sight, Out of Mind — Data visualisation telling the story of every drone strike in Pakistan since 2004. Each mark representing a death can be clicked to link directly to a new source detailing the strike and those killed. Source: https://drones.pitchinteractive.com/

I also must give a nod to the New York Times Graphics Team who are consistently one of the best at using data to tell captivating stories.

5. Stick to the Message

Just because you have the data, doesn’t mean you should visualise it. This point is a perfect follow on from “Tell a Story”. Make sure that you’re including relevant data in your visualisation and it doesn’t distract from the message you’re trying to communicate.

Example: London Tube Map

Let’s take the following piece of data visualisation as an example:

London Tube Map — visualising the connections between tube stations across London, UK.

If you asked someone what the London Tube Map shows, they may reply “it shows where the stations are”, but this is not the case. As a user, I want to know how to get from A to B, and the map does this very effectively. The message and focus therefore, is the connections and links between the stations.

Whilst the map is loosely geographically accurate, it does not show location data. If it did, the London Tube Map would look something like this:

Geographically Accurate London Tube Map — Animation to show how the inclusion of the accurate location data for each tube map leads to an ineffective piece of data visualisation.

This would be a nightmare to navigate, especially when you’re in a rush to catch a train and trying to find out which line you need to take. The visualisation also results in a lot unused screen real estate. It wouldn’t be effective at sticking to its message of how to get from A to B.

So, whilst Harry Beck had the location data at his fingertips when designing the original London Tube Map, he chose not to represent it accurately in the visualisation. As a result — the message that the user takes away from the map is far clearer.

Concluding Thoughts

Thank you for reading my thoughts on designing with data. I hope, in some way, that the contents of this article will help or inspire your thinking when it comes to data visualisation in the future.