TCdata360

World Bank Group

The World Bank collaborated with Voilà on several aspects of TCdata360, their website on open trade and competitiveness data. It's an ambitious project to offer a single point of entry to more than 2000 indicators from various sources, and all in open data format, along with visualizations. 

They were teaming with a different partner to develop the tool and reached out to us for information design advice. In many cases, they already had a draft design for which they wanted improvement suggestions. The content was already set. The suggestions were then taken to an internal committee for decision, and then the partner for implementation.

Country reports

The country reports are downloadable (PDF) documents where a large quantity of data is presented in compact form. It is constantly up-to-date as it is generated from the data available when the user requests it.

On the left is the original version on which they wanted to improve the data visualization and appearance. On the right, the suggested redesign.

  • The tree maps are replaced with bar charts. Graphs that use surface tend to diminish the scale of the differences, which can be useful for comparing units within a very large range. This was not the case here. Also, the treemap made it difficult to write the name of the indicators in full when the small values made the surfaces too small.
  • The quick summary data is now presented in a box in the header. It saves space on the page and is easier to read.
  • The table rows are shaded for easier reading across the table.
  • The three types of data in the top tables are now differentiated by vertical lines: average on the left, annual in the center and projections to the right.
 
Original version

Original version

Suggested redesign

Suggested redesign

 

On page 2, the radar chart was replaced with a lollipop chart that made comparisons across indicators easier. It has been moved in the "Private Sector View" section.

The comparisons in the Logistics Performance Index (top right) are now presented in an arrow chart that shows the direction and magnitude of a change over time. The arrows turn to yellow for a negative change.

 
Original version

Original version

Suggested redesign

 

The annexes start on page 3 and are essentially tables. The challenge was to make them look good, readable and to clearly differentiate the types of data. We've used two shading for legibility and vertical lines to clearly group similar data. The IFC section on page 4 is shaded to differentiate it from the World Bank data. We used landscape orientation to give more space to each column and reduce the places where the text would wrap on a second line.

 

Original version

Suggested redesign

Original version

Suggested redesign

 

Logo

The World Bank wanted a logo that would be "digital (without showing numbers) and is yet smart, modern, creative, alive and vibrant". One of the challenges was that the name itself is not easily understood by the eye, given the combination of acronym, word and numbers — it looks like a robust password. We used bolding to differentiate these three parts. The font is Andes, the official font of the World Bank Group.

The bubbles in the icon bring the colours and the idea of data visualization in an attractive way. The colours are taken from the palette of the World Bank Group.

 
 

Website user interface

The World Bank wanted to improve the interface of the TCdata360 website prior to launch. It would be a matter of fine tuning to better balance the design. The interface also came with several rules from the corporate guidelines, to make sure the website would fit with the rest of the organization's web presence.

This is a powerful tool that can be overwhelming at first for a user, if they are presented with its full depth. This is why every attempt was made to simplify the first impression, a challenge given that no content could be taken out.

 
Original version

Original version

Suggested version

Suggested version

 

 

It is not clear whether there is a need for a map to select a country, but the World Bank were keen on it so the simple suggestion was to move the drop-down menu to the very top, where the user would see it first as they scroll down the home page.

 

Original version

Suggested revision

 

The stories page presented a good opportunity to use pictures and summaries, therefore becoming more informative and inviting to the user. Moreover, this material was already created for the home page.

 

Original version

Suggested redesign

 

The indicators page was clarified by aligning the name with the links leading to it (replacing Topics with Indicators), by aligning the indicators to the left in a single column to avoid the awkward line wrapping and by using the site-wide convention of blue for hyperlinks.

 

Original version

Suggested redesign

 

In the  country page, the spacing, alignment and colours were adjusted to make the data stand out more. The design of the line graphs was also improved with text orientation and choice of scales.

 

Original version

Suggested redesign

 

The suggestions to other pages not shown here all followed the same principles of alignment, hierarchy and clarification.

We were involved in this project over a period of nine months, and the World Bank invested on a much longer period to bring this ambitious project to fruition. It will be exciting to see what the users make of it, hoping that it will be discovered and used by a large community of researchers and practitioners of trade and competitiveness data.