After Interactive Things (IXT) published their visualization, World Inequality Database on Education (WIDE) I decided to sit down with one of the chief architects, Christian Siegrist, to get a look at the design process for this piece.

Christian told me that WIDE visualizes important data in disparity, deprivation and marginalization in education worldwide. The creation of this visualization stems from the need to make the underlying education data more accessible to researchers, teachers, journalists and policy makers. IXT defined these groups as the visualization’s target audience.

Structure

As all creators do, Christian and the IXT team started by exploring the raw materials they were working with. For them, the data exploration process yielded the shape, structure and granularity of the data through a series of interim visualizations.

Created with Tableau, this overarching visualization attempts to show every intersection between the attributes in the dataset. In doing so it reveals patterns repeated across countries, making comparison from a bird’s eye view easy.

The structure of these attributes and the results of the initial visualization led the team to create more tableau charts that draw heavily on some of UNESCO’s earlier visualization techniques. The goal of each is to show a more fine grained “spread” that went beyond the broad averages, down into its detailed segments and demographic groups.

From Christian:

“You don’t always need to re-invent the wheel. You do have to vet the process and the form to make sure it makes sense.”

Functionality

To determine the functional capabilities any final visualization would have, IXT workshopped the central questions at hand. Together, in the same room, the team wrote down the main questions a user from the target audience might have.

They ended up grouping these questions into different uses for the tool, i.e. find, explore and ask. They also arranged the questions on a continuum from general to specific to help organize their thinking.

Once the team had their questions refined and organized, they were free to envision the types of visualizations that might best answer these questions.

The part of process that’s more or less invisible is the team’s discussion that lead them away from complex parallel sets and radial charts towards sketches in the bottom right that resembled UNESCO’s existing charts.

These initial sketches generated a long trail of mockups, prototypes and high fidelity designs by the IXT team. These designs try to illustrate how some visual forms could look and work with the WIDE source data. They explore how the data can be viewed across countries or across WIDE indicators and helped the team tease out how these different cross cuts to the data would be used in the final product.

Visual Design

Besides the original Tableau visualizations, IXT shared that they drew from several visualizations as visual and functional precedents. Chief among them is Jan Willem Tulp’s Ghost Counties for its treatment of links and nodes between data points.

The structure of the data attributes revealed several tiers of information, each with its own set of functionality. This concept fit nicely with the pattern developed by 37Signals in their recent redesign of Basecamp and WIDE draws heavily on this layered page metaphor.

Final Product

The final platform is the culmination of IXT’s design thinking distilled into an interface built for exploration. The front page of the site helps explain the information architecture that goes from countries to demographics to individual indicators. There are also many ways on this page to dive into specific stories without starting from scratch. There’s the newly added Popular Views in the righthand column that gives you a sense of what other users are interested in.

There’s also an interesting slideshow further down that presents short stories centered around 6 goals of the Education For All initiative and how they're supported by the data being presented. This is a great way to communicate a sense of purpose and entice users to explore some of the most compelling stories presented in the platform.

Exploring the data by one of the WIDE indicators reveals a sorted list of countries with the full disparity between all of their demographic groups laid out on one line. The can be ordered by the average amount or total range of disparity, giving you an interesting ranking that begs further exploration.

While exploring a country + an indicator you’re able to see these demographic groups broken out much better. They represent the same line seen in the overall indicator view but paint a much better picture of disparities within countries. Often the greatest disparities are seen in gender and wealth, though some countries have very different patterns.

Countries can also be explored as top level elements so that you can compare the disparities for all of WIDE’s indicators at the same time. This view becomes particularly powerful when you filter down the results and can see how a single demographic group fairs across the various indicators.

At its most complex WIDE can display disparities cross cut by multiple demographic groups. This allows you to see the difference between the poorest female rural group and the richest male urban group for any of WIDE’s indicators.

Because the user has near ultimate control of the way the data is filtered and cross cut it’s crucial that the complex exploratory system is explained. At the top of each page IXT included a help graphic that illustrates how to read the individual lines from most deprived to most privileged. The layered page metaphor also goes a long way to explaining the current view quickly.

However, as we saw in Google's Consumer Barometer, labels in sentence structure could go along way to make this complex visualization more understandable. The easiest way to accomplish this would be in the tooltips for any group. Instead of saying:

“Gender: Male, Urban/Rural: Urban, Wealth: Poor, 44%”

it instead could read:

“44% of Nigeria's Urban Poor Males have Less than 4 year of schooling”

The relationship between the myriad of dimensions could also be explained even more clearly. As it currently stands, the three main representations of the data exist on separate pages. To some extent each is a more detailed breakdown of the last so I wonder if there's a way to actually transition between them. Clicking on a country could animate down a list of the demographic groups and clicking on a group would break it out further by the remaining demographic types.

Social Extensions

Since WIDE was first launched, IXT has added a ‘Popular’ section showing individual views within the platform that are viewed more often. What's interesting here is that WIDE is essentially publishing its analytics of platform use as a feature and the feature works well. It’s a more social way to deliver interesting stories to the forefront and it lines up nicely with the ability to share or export any page within the report. These social extensions will become more common as larger visual reports like these become easier to produce.

Insights

Thanks to Christian’s insights into the IXT process we are able to get a better understanding of the conditions that went into building the impressively complex WIDE report. Publishing their process is old hat to Christian and the IXT team though. They have a whole series of similar ‘inside’ posts on their news site, datavisualization.ch. It’s an exercise in self-discipline to write these postmortems for your own projects but IXT believes in the process because it helps them grow as designers. With just a little effort along the way data visualization practitioners can give us a glimpse of their design thinking. And for the visualizations that don’t have detailed postmortems, The Why Axis is at your service.