Yesterday we launched povertyover.christianaid.org.uk. It was a fantastic, yet challenging project to work on and over the next few days I’ll be describing the craft of producing this interactive infographic. I say craft because I truly believe that is what we do. We take an idea, whittle it, shape it and fashion it into something that makes sense in the digital arena. Something that the target audience will take meaning from and hopefully – share it with their friends – which was the goal of this website.
When BMB approached us with this brief we were extremely excited to be involved. Robin and I follow a lot of infographic blogs and from the outset we were enthusiastically researching these and looking for great examples of map based infographics. The thought of being paid to create infographics that moved and reacted to data, time and various other filters was very appetising.
From the outset, the data we were to display was clearly defined. For each of the existing 285 countries of the world, a statistician had put together a 500 year history (where possible) of their relative poverty or wealth. Read more here for how these figures were calculated. We were supplied a figure from between 0.1 and 1.0 for each country for every year. It was our job to make this look beautiful, allow people to explore the data in an interesting way and highlight the following key parts of the story:
1. The world has, on the most part, moved out of poverty especially over the last 60 years.
2. There are however vast parts of Africa and Asia that still have a a way to go.
3. Countries that have been extremely poor before they’ve come out of poverty.
4. With further investment, development and aid – it is possible to move the countries remaining in poverty into prosperity.
Initially we looked at many influences and considered lots of different directions for how we were going to start representing the data. We loved Aaron Koblin’s work (Robin blogged about his show at the V&A last year here) and whilst we respect what he does, we quickly realised that we needed to be extremely graphic in our communication style – which was probably quite far removed from Koblin’s work . There were quite a few variables in our brief; wealth, poverty, maps and time. We needed to be single minded in our approach to how this was represented. Here are some of the approaches and influences we looked at:
Carl and Simon – the most excellent creative team at BMB had also researched many different types of maps (this is a whole cartographic language on it’s own). They provided us with some great books like this one. We were able to find inspiration from many examples here – but also it started reinforcing lots of map do’s and don’ts!
Initially Carl and Simon were extremely keen to represent the data as a globe that the user could spin around themselves. We knew that until we actually started experimenting with the data and the visuals that we just couldn’t be so conceptually ‘nailed down’ just yet. To their (and the BMB producer Tyrone’s) credit they allowed us to be pretty non-specific with how we were going to display the map at this stage. We entered our prototyping phase with gusto, knowing that the team were in for some serious experimentation!
Any period of prototyping needs to have some clear questions to answer. We had three:
a) What was the infographic world going to look like? Was it to be a globe, a flat map, a 3/4 view?
b) How would we represent the changing HDI value? By colour? By the size of countries? By height or behaviour?
c) How far could we push the tech spec? A world map, with all of the country borders etc has hundreds of edges. If we are doing something in 3D how was Flash going to handle all of the interpretation of the data on the fly and then rendering it as 3d values. Should we use Papervision? Away 3D? Should we use 3D models from 3DStudio Max? What could we get away with before it fell over?
We finished our ‘Think’ stage of the project knowing that we had only planned the project in terms of the objectives and the potential of the raw data. Now… looking at the project from outside eyes, this might sound a bit irresponsible and lacking in “traditional” planning techniques, after all it might appear that we had simply created a list of questions based around look and feel, style and technical possibilities. We felt though that we had now fleshed out exactly what the website needed to communicate and we were now in an extremely good place – our Design stage was ready to go.
In my next blog post I will describe how we prototyped and started working out a visual style for the infographic.
Poverty Over – A Case Study, Part 2 – Designing
Our Design stage for Poverty Over was a lot of fun. And fast!
We set out to explore the Look and feel of the infographic and how, in principle, it was going to work. However, it was not our intention to have all of the UI, buttons and micro detail of the infographic nailed down at the end of this stage. We intended to find a visual style, find the limits of the tech, marry the 2 together, and finish by writing a list of functionality that we could start building in the next phase.
Our Design stage was to be filled with rapid prototyping, with all members of the team around the same table. No distractions, focused on the questions we had posed from the ‘Think’ stage (How was it going to look? How would we represent the data? How far could we push the tech?).
We worked fast and without any design limitations. Corporate styleguides and other confining restrictions were ignored. Our designer, creative technologist and 3D animator worked closely together in these early stages and we experimented with colour palettes, finding the right sort of map and then the way we displayed the data.
We realised that the data worked best as a graphic device when it was displayed with differing heights of the country land levels. Poor nations were below sea level, developing countries above sea level. It felt like a nice metaphor for comparing growth and decline. We also realised that in order to show comparative data levels for all countries then all countries needed to be on display all of the time. Unfortunately this meant that an interactive spherical globe was not as effective as the flat map. We subsequently decided to use the globe concept in the intro sequence, which sets up the communcation and introduces the themes of poverty and change.
Here are some screen grabs of our various prototypes:
We spent 6 days prototyping and at the end we had come to the conclusion that technically we couldn’t use 3d models that were output from a 3d programme. In the end we decided to use the flash 3d API and some custom code to extrude the world map and draw it in 3d.
We had also been trying to add a light source, shadows and textures to the map surface. However this was causing the infographic to seriously slow down in how it rendered and moved on screen. We weighed this up and decided that the user’s ability to interact with the data was more important than adding texture effects. We knew we could make the map look great with flat colour as well. We’d just have to work within these boundaries!
So after a prototyping stage of around 7 working days we knew the method of displaying the data, the view of the map we wanted, how we were going to do it and how far we could push the tech. We also had a completely off brand colour palette and were still unsure of what else we could do with the data! At the moment we had a very straight-forward play through of the history of the world. The next challenge was to contextualise it. Why did Australia jump into huge wealth in the 1850s, what was causing Venezuela to buck the Great Depression and leap forward in the 1930s? For the data to start telling a story, we had more work to do.
We knew we couldn’t actually plan all of this stuff up front – we just didn’t know how the data was going to look at that point. We also didn’t know how many filters we should have – how many could we add before it would start to be confusing and detract from the central message? And what was the point of them?
So, we launched into our build stage, with a plan… but only a plan for the most high value and high risk elements that we planned to tackle in the next week or so. Fortunately our way of working allowed us to do this and we knew that making too many guesses at this stage would be a waste of time.
Read more about how we faced these challenges in part 3 of this case study – coming soon!