I led the online strategy, design and development of the 2014 Global Slavery Index website. The site presents data on 167 countries, displaying the prevalence of slavery, the overall number of people currently enslaved, the risk of slavery and government response to the issue of slavery.

Built on WordPress, we developed a complex information architecture that integrated mapping and data table services from CartoDB with custom post types in WordPress.

In order to make the site as accessible as possible for both expert and lay audiences, careful attention was paid to how to display the tremendous amount of data in a way that wasn’t intimidating. I explored several data visualization libraries and narrative data navigation tools before landing on D3 and Odyssey.js to display live-data from external sources.

The site was launched with much fanfare and had over 300,000 visits in the first 24 hours, and over 2,400 inbound links in the first month. The site was featured on many data visualization blogs such as visual.ly and guardian.co.uk.

Data Visualization

One of the key focuses of my UX work was to ensure that the tremendous volume of information wasn’t overwhelming, while still allowing those who want more information to dive deeper.

On each data table presented on the site, we display only 10 countries, and then allow users to expand the table to view the results for all 167 countries.

Prevalence Table

This  table displays the prevalence of slavery, based on the percentage of the population enslaved and the estimated number of people enslaved by Country. The table can be sorted by clicking on the column title or the arrows.

The colour scheme used in the bar charts also indicate if the number is relatively high to low. In order to see more detailed information about a country, you can click on the country’s name.

Government Response Table

In the Government Response table, each country was given a letter rating based the strength of government responses to modern slavery. The highest possible rating is an AAA, and the lowest a D.

Colour is used to indicate how strong or weak a country’s response was for each of five outcomes we assessed.

Rolling over a row allowed users to see the scores (as a %) for each outcome. Higher values indicate stronger government response. All of the columns in the table can be sorted by clicking on the column title. The order of the sort can be reversed by clicking on the title again.

Vulnerability Table

In the vulnerability table, colour is used to indicate how vulnerable a country’s population is to Modern Slavery across five dimensions.

Rolling over a row allows visitors to see the scores (as a %) that each country received. The higher the score, the more vulnerable a country’s population is to slavery.

All of the columns in the table can be sorted by clicking on the column title. The order of the sort can be reversed by clicking on the title again.