Data driven storytelling

My favorite examples of interactive data journalism and how they inspire me as a designer

Sanika Mokashi
Apr 28, 2018 · 8 min read

At a recent offsite for our design team, a few of us shared with our team some examples of products, designers, websites and applications that inspire us as designers. Topics were as varied as Japanese architecture, fashion designers and the design systems of Mexico city’s metro system. We all came away from the offsite with lots of food for thought and a newfound appreciation for many diverse subjects!

I talked about some examples of interactive journalism pieces and how they have inspired me as a designer. In the last few years, data driven interactive journalism has really taken off. NYTimes, WSJ graphics, Periscopic, and countless independent creative technologists have done a great job at taking complex data, presenting it in an engaging way and driving clarity.

Data driven interactive journalism

I’m going to go through 3 specific types of journalistic articles, and talk about how each of them has inspired my design philosophy. These 3 exemplify one each of Aristotle’s methods of persuasion - appeal to the brain, to the heart or to the ego.

Aristotle’s principles of persuasion

Appeal to the brain

Inviting your audience to think critically on matters of nuance

Some amazing examples of the first type come from NYTimes, and on topics as diverse as the federal budget and drug overdoses. The one example I have picked is the “You Draw It” series. It is exactly what it sounds like - there’s a partially drawn chart, and you’re invited to draw the rest of it. Let’s take a look at this chart about deaths from drug overdoses. Try it out now!

Knowing that it is a post about drug overdoses, I drew what I thought was a fairly upward trending line:

The chart with missing line (left) and my guess (right)

Boy, was I off! When I saw the actual graph overlaid with my guess, it drove home the point in a way that just seeing the graph by itself wouldn’t have. I had taken the time to think about it and commit my opinion to paper (or screen!), and the impact of the numbers on me was now much higher.

Another amazing example in this same series is about Obama’s presidency. We read so much in the media and think we have a decent idea about topics like healthcare and unemployment. NYTimes does a great job at inviting you to think critically about these topics and address your preconceived notions.

Source: NYTimes and gif from tumblr

How this influences my design

So what are my learnings from these examples? I think the most important is that you don’t need any fancy charts or jazzy graphics. A simple line chart executed well can be very powerful.

The other important takeaway I had was about involving the user upfront. A well known design principle is not to make your user think. But there are times when you don’t want to lose the nuance, and want your user to think critically and make a decision. NYTimes has some amazing examples of how to achieve this without alienating the user.

The third, of course, is something we all know well - gamifying anything will often get your user a lot more involved! After reading these articles in NYTimes, I immediately shared them with my friends, and one factor motivating me was definitely seeing how well they did compared to me!

Takeaways from the “You Draw It” series of articles

Appeal to the heart

Take your user along and build an emotional connect

Two of my favorite examples of the second type are Hans Rosling’s TED talkabout statistics, and Neil Halloran’s interactive documentary “The Fallen of World War II”.

The one I’m focusing on is the world war II documentary, which shows the human cost of the second world war. This data visualization uses cinematic storytelling techniques along with data visualizations to create an emotional impact on viewers.

An excellent example of how the documentary humanizes the data is by showing that the bar graphs are made up of a row of soldier figures. Before seeing any charts, we see that each of this figures represents a 1000 casualties + more than a thousand soldiers injured. The data visualization transition beautifully to zoom out of this ‘row of soldiers’ view to bar charts, making the data easy to understand but maintaining the context of how much human cost those bars truly represent.

One of the most powerful moments in the documentary for me personally was looking at the bar chart showing Russia’s casualties (the eastern front). In a beautiful combination of video choreography and data visualization, the camera keeps panning up a seemingly never-ending row of Russian soldiers who died during world war 2.

Russia’s casualties in world war II

The documentary also pauses in between to let you explore the data freely. Something cool I learnt was how Neil Halloran used a custom software written in JavaScript and WebGL to create the data visualization sequences in the film rather than more traditional video tools.

Influence on my design

I design software to manage data centers, and on the face of it, that seems as far removed from emotionally connecting with your users as possible! However, the important design principle this documentary reinforced for me was the importance of always being empathetic to your users’ state of mind. All applications and products have a personality, and it is up to you as the designer whether it is intentional and well crafted or unintentional and causing your users pain and frustration. For example, injecting some personality with witty messages is great, bt don’t do it in the disaster recovery section of your UI! We have recently started an exercise at Nutanix, to define what personality we want our product to convey. The next step is always making sure we do so cohesively through the language, visual design, behavior, illustrations and animation.

The second takeaway that we all know, but it’s always good to be reminded of — show, don’t tell! The documentary does a beautiful job of creating an impact by showing what the numbers truly represent.

The third takeaway for me was the importance of always taking your user along. In my day-to-day life, the way I think of this is making sure the user’s on-boarding experience, discovery of a new feature, or any complex wizard really needs to be well thought-through. The documentary always uses excellent transitions and animations to move between different views of the data, always maintaining context and moving the story along.

Takeaways from “The Fallen of World War II”

Appeal to the ego

First, do no evil! Use ethical design to create social awareness

According to Aristotle’s methods of persuasion, ethos involves the speaker inspiring trust in his audience. This comes from your moral competence, but also includes your expertise and knowledge. As designers or a creative technologists today, we have a lot of power to persuade our audience — and it is important to always be aware of whether our products showcase utmost ethical design.

Taking the case of charts, there are so many bad examples out there — which mislead their audience intentionally or unintentionally. One particularly egregious example is this (now deleted!) tweet from NRO, and quartz does a great job walking through exactly how terrible it is:

Now-deleted tweet from NRO claiming climate change isn’t real!

This is an example of a rather juvenile attempt to convince the audience that global warming is not real, by plotting temperature on an axis spanning 0 to 110F! As quartz shows us, this is a very much like plotting body temperature on a scale of 0 to 110F and berating Bob for complaining about his fever!

Fever? What fever?

The right way to do it, of course, is to use reasonable values for the y-axis, that showcase the real trends in the data:

Source — quartz

While this might seem like a particularly obvious example, it is very common to see charts that more subtly misrepresent data. The main culprits are incorrect use of axes, bar charts not using a 0 baseline, and cherry picking data.

As a designer, the main takeaway from such charts is to not do evil, of course, but also to practice rigor in design to make sure you’re not inadvertently misleading your users or lying by omission. Building trust with your users is always the right choice, and always more beneficial in the long term.

Going beyond the obvious of “don’t mislead”, design can also be a powerful tool for bringing about social good by creating awareness about important topics. Periscopic focuses on this by partnering with NGOs to create easy to understand engaging data visualizations. NYTimes also does a great job at this by driving clarity about important and relevant topics, always backed by rigorously researched data. One of my favorite examples from NYTimes is the recent article about “punishing reach of racism

The articles starts off by drawing the user in with a beautiful animation that shows how we as a society are failing black boys you can see how more of the blue squares are literally falling down the income ladder despite of growing up rich.

Source — NYTimes

The article goes into further details about the study, talking about various aspects like incarceration rate, income levels, marriage and how these are affected by race.

One example I really liked for its simplicity and powerful impact is this chart showing incarceration rates:

This is a very well written article based on a long running study, and well worth a read. It is, in my opinion, one of the best examples from NYTimes that showcases how design and technology can be used to generate social awareness!

Nutanix Design

Nutanix Design

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store