The Wake Up Foundation 2050 Index


The Wake Up Foundation is a, journalist lead, educational charity that, in it’s own words, ‘aims to raise public awareness of the dangerous trends currently under way in Western societies’ and ‘to encourage a bottom up, transnational dialogue using the emotional power of film, rigorous statistical analysis and creative campaigning’. They asked The Space Room to build a website pertaining to a new project they were working on called the 2050 Index.

The 2050 Index takes data from 34 different countries across the world and analyse how well they are positioned, across a range of metrics, for the short to mid term future, until 2050. Each country is assigned a percentage score, extrapolated from the data collected, in five different categories, namely, Demography, Knowledge, Innovation, Openness and Resilience. From these scores a mean percentage is derived and that is used to rank the countries in terms of their preparedness for the coming years.

The brief for this job was to find a way to breakdown and display this data so that it was visually appealing and easily digested. The site needed to work across a range of devices and screen sizes and should be easily updatable by the client.

Style and Colour scheme

From our discussions we decided that there were three main ways that a user might want to analyse the data. Firstly, they might want to see an overview of all the data and how the different countries compared generally, secondly, they might want to look at how countries compared in more specific areas or, thirdly, they might want to look at an individual country and ascertain in what areas that country was performing well or badly.

With that aesthetic as a guide we set about trying out various home page layouts with different colour schemes. The trick was to find something that was bold and different but not overwhelming and uncomfortable to read.

Eventually we settled on the following colour scheme…



Because the site needed to be usable on different devices, across a range of sizes, a set of icons was required to denote different metrics. The below set of icons were used in conjunction with a designated section colour to help users identify the kind of content they were looking at…

Data display

The data needed to allow users to compare countries individually, or within a given metric. We decided that a bar chart showing each countries comparative scores would allow people to easily see the spread of results. Flags were added to the chart to make it easier to pick out particular places and tabs across the top of the chart allowed users to reorder the results for more specific data. The transition between charts was animated so that the position of a country could be tracked visually as the metric changed.

Below the chart would be a secondary display giving some context to what the user was looking at. On the left was a synopsis of the current metric with the option to find out more. On the right were two radial charts showing more detailed breakdowns of the worst performing and best performing countries in that metric, again with the option to see more detail.

2050 Index data view

2050 Index data view showing ‘Overall’ results

The final thing was to make the bars clickable. Doing so would highlight the chosen country and update the secondary display to show an overview of information about that country and a breakdown of their data, with the option to  click through to a more detailed breakdown of the countries results.

2050 Index data view showing a highlighted country

2050 Index data view showing a highlighted country

The final challenge with the data display was in figuring out how to display that same data on a mobile size screen.

Instead of trying to fit in the graph, it was decided that the best option would be to list the countries in order for each metric. The user would see a more detailed score breakdown on clicking a country and the different metrics could be viewed using a dropdown at the top of the display, instead of tabs.

In order to produce the data display we used the javascript library D3.js, which is primarily for creating charts based on a data set.

Technologies used

  • Photoshop
  • Illustrator
  • HTML5
  • CSS3
  • SASS
  • JQuery
  • Grunt
  • PHP
  • WordPress
  • Responsive web design
  • D3
View the site