Design of a Data Visualization Tool on Inequalities

We have tried to make this tool fun and didactic so it can be easily understood by users from a wide variety of backgrounds. We have structured information to make it readable, chosen a simple and coherent aesthetic, illustrated and animated the statistical data.

My Role

We worked in tandem with the developer Anthony Veyssière. I worked on the user experience and artistic direction of the interface, illustrations and animations.

Intentions

When you think about your household’s income, do you feel rich, poor, or just average? Most of us have no idea – or the wrong idea – of how we compare with the rest of the population. But here, in 10 clicks, you can find out how many households are better or worse off than yours, and see how your ideal world compares.

— OECD introduction to the tool

The OECD’s objective with this tool was to reach a very wide audience. It had to be designed to be translated into several languages, and was therefore going to be used by users from very different cultural backgrounds. It had to be engaging and rather playful, and able to communicate a sometimes complex statistical information. The tool was intended to be a questionnaire that allowed the user to fill in information about her or his income, his or her wealth estimate in relation to the rest of the population, his or her perception of wealth distribution and the ideal distribution of wealth according to her or him. Once this information was filled in, the tool would then display it together with the actual statistical data.

Building the Structure

The first step was to define a global structure. Based on the draft provided by the OECD, we produced non-graphical and non-interactive wireframes. This helped us to take fundamental decisions on the organization of the content and to ensure consistency between the different screens. It provided a foundation for the OECD to write editorial content, for Anthony to develop the tool, and for me to design the interface. Using Google Slides allowed us to collaborate remotely.

Overview of wireframes (also called zonings). The rough aspect allowed us to focus on fundamental issues.

Creative Direction

To find an aesthetic orientation, I designed two moodboards. These boards are a composition of graphical elements found during my research or from links provided by the OECD. They contain images from interactive or non-interactive data visualization, illustrations or screenshots. As the audience of the tool was going to be very diverse, it was necessary to have an easy-to-understand aesthetic. I chose clear, simple and very legible visuals. The colours are flat, the shapes are geometric, and the plain illustrations are almost like pictograms.

The moodboard with the most cheerful colours and illustrations was chosen to define the visual identity of the tool.

The two trendsheet side by side. On the left, the colours are more acid and the illustrations more cheerful. On the right, the colours are softer, the illustrations more minimalist and serious.

The graphic mock-up of the first screen is based on the wireframes and on the artistic direction defined by the moodboard. The purpose of this screen is to introduce the tool to the user and explain the main steps.

Composition and illustration research for the home screen.

For greater clarity and consistency, the illustration chosen for the home screen is composed of two universal elements: a schematic planet and a human. The planet is declined as a balloon to evoke the ideal world, in opposition to the real planet on which the character stands.


LThe home screen in its final version is divided into three equal parts. On the left, a text introduction signed with the OECD logo introduces the subject; in the middle, the button to start the questionnaire and its various steps; and on the right, the illustration to attract the eye and summarise the tool’s intent.

Colours, illustrations and animations

In order to make the tool user-friendly, I tried to keep a visual and conceptual continuity between the different screens. Turquoise is used for the interactive elements of the interface, pink to evoke the ideal state, blue to represent reality, and yellow for the user or wealth.

Illustration forms and concepts are reproduced and adapted through the screens: a small planet becomes a home, inhabited by characters with identifying attributes: men, women, children, poor or rich. The planet is also turned into a circular diagram to represent the distribution of wealth.

Versions of the concept of planet as household, diagram, etc.

Data Visualization

Illustrations are animated dynamically to instantly visualize the data selected by the user or reported by the tool. This makes interaction more fun and data easier to understand.


Users can give their opinion about the ideal wealth distribution between the richest 10% and the rest. Wealth is represented by a pink diagram, inhabited by an apparently rich person and 9 other people.

Danish Version

We have later adapted this tool for the needs of the Danish Statistical Institute. They wanted to communicate their national data to the Danish population.

We have therefore redesigned the tool to match their needs: code, structure, colours and illustrations.


The colours and illustrations have been adapted to suit the context.


The OECD planets allowed universal representation. We have replaced it with islands to match one of the Danish geographical characteristics.

Broadcasting

In addition to the Danish version, the OECD tool is now translated into nine languages and has been distributed on news websites worldwide such as El Pais, Le Figaro and CNN Mexico.

Here is the tool as it is currently being distributed (the OECD has made some changes since then):