OECD: Survey & Data Visualization UX and UI design for a web tool

The purpose of this tool was to ask people about their income, their perceptions of where they would fit in the income distribution, and then show them where they actually belong.

Update October 2015: we designed a specific version of this tool for the Danish governmental organization Statistiks Denmark.

mockups2-01
New graphics, colors and functionalities were designed and developed for Statistics Denmark.

My friend Anthony Veyssière and I were commissioned by the OECD to design and develop this web tool:

To achieve this result, the first step was to define the structure. From the basic form provided by the OECD, we built screen by screen a non-graphic and non-functional wireframe. This simple screens helped us to take fundamental decision regarding the user experience. It was used as a base by the OECD to write the editorial content, by Anthony to develop the tool, and by me to design the user interface.

Thumbnail of the zoning (also called wireframe), built collaboratively with Google Slides.
Thumbnail of the zoning (also called wireframe), built collaboratively with Google Slides. Most UX decision were taken here, such as the global organization of the content, the general structure shared among all screens (the “next” button on the top-right corner, the illustration on the bottom and the interactive elements in the center).

To define an artistic direction for the tool, I designed two moodboards. The OECD provided links that inspired them the tool. I chose elements from those links, as well from other on-and-offline data visualizations, websites and illustrations, to assemble them into two visuals. Because this project would have a very diverse audience, the visuals were clear and simple to convey a universal look. Both were representing schematic “flat” illustrations and graphics, close to a pictograms aesthetic. The chosen moodboard was the left one:

The left moodboard has acid colors. It is more fun. The right moodboard has more soft tones and is more serious.
The left moodboard has acid colors. It is more fun. The right moodboard has more soft tones and is more serious.

Based on the wireframe and the chosen moodboard, I designed the mockup of the first screen, which was meant to introduce the tool and to summarize its main steps. I also used it to introduce the visual identity of the tool.

The first screen of the tool is divided in 3 columns. The first one contains an introduction text and the OECD signature ; the second one invites the user to use the tool and explains the main steps the user is going to take ; the last one consist in a welcoming illustration of a man on a planet, dreaming of a better world.
The first screen of the tool is divided in 3 columns. The first one contains an introduction text and the OECD signature ; the second one invites the user to use the tool and explains the main steps the user is going to take ; the last one consist in a welcoming illustration of a man on a planet, dreaming of a better world.

The nine first screens were sort of a fancy survey form. They all had a similar structure: a title bar, a short question, an interactive element to answer the question, a next button and an animated illustration reacting accordingly to the user’s answer. For each screen we designed a different illustration.

The first screens are about personal information. The character changes to represent the user: he becomes a female if the user select the female radio button, she gets gray hair if the user is more than a certain age, etc. On the central screen, family members are popping from behind the planet, and on the right screen, the bigger the family income is the bigger the golden planet gets.
The first screens are about personal information. The character changes to represent the user: he becomes a female if the user select the female radio button, she gets gray hair if the user is more than a certain age, etc. On the central screen, family members are popping from behind the planet, and on the right screen, the bigger the family income is the bigger the golden planet gets.
The next two screens are about the user's perceptions of where he would fit in the income distribution. User's family planet moves between a poor and a rich family (left screen). The right screen is about the poverty level, represented by a little gray planet.
The next two screens are about the user’s perceptions of where he would fit in the income distribution. User’s family planet moves between a poor and a rich family (left screen). The right screen is about the poverty level, represented by a little gray planet.
How income is distributed between the richest 10% and the rest of the population (left screen), and how would you like it to be distributed (right screen). The planet becomes a pie-chart, representing the total income and shared by the characters standing on it.
How income is distributed between the richest 10% and the rest of the population (left screen), and how would you like it to be distributed (right screen). The planet becomes a pie-chart, representing the total income and shared by the characters standing on it.
How many people are rich and how many are poor? OECD statisticians are using specific diagrams to represent how the income is shared among a population. The left screen is about how the user perceives it, the right screen is about how he would like it to be.
How many people are rich and how many are poor? OECD statisticians are using specific diagrams to represent how the income is shared among a population. The left screen is about how the user perceives it, the right screen is about how he would like it to be.

The last twelve screens of the tool let the user see the difference between his answers and reality. The screens are using the same content as the survey screens, but this time linearly animated to bring face to face user’s perceptions with actual the reality of wealth disparities.

The user can navigate between his answers and reality by clicking tabs. To bring a clear vision of the difference between  the user's guess, the user's wish and the reality, the illustrations are animated dynamically between those states.
The user can navigate between his answers and reality by clicking tabs. To bring a clear vision of the difference between the user’s guess, the user’s wish and the reality, the illustrations are animated dynamically between those states.

The tool was published in four different languages on various major newspaper websites, such as Le Figaro in France, CNN Mexico, El Pais in Spain, and was shared on Facebook thousands of times allover the world.

Next Related Project
The chronology were designed to be integrated on the tablets app and the web app of the dictionary.

The Junior edition of Le Robert dictionary contains a chronology which explains to kids from 8 to 11 all the major events since prehistoric times. I designed the tablet and web version of this chronology.