An interactive map for WaterAid showing how access to water and sanitation across Africa has changed since 1990 with predictions to 2030.

An interactive map for Africa

WaterAid wanted to publish the map to coincide with Africa water week at the end of may 2014. The interactive map was aimed at a predominantly African audience of policy-influencers, to make water and sanitation data more accessible. It aimed to do this by using highly visual animated graphical devices such as timelines and dynamic charts. The map needed to be responsive so that it could be embedded in any website and be viewed on different sizes of screen.

Process

My role was lead designer. I worked from a sketch developed by the client and designed the interface and interaction design for the map.

A close collaboration

I worked closely with front-end developers and the WaterAid project lead to create the map in D3 – a popular SVG javascript library. This included daily meetings and reprioritisation of the kanban board, allowing the client greater flexibility to choose which features to develop and when. The process worked very smoothly due to constant communication between decision makers and developers.

A server was set up at Aptivate, and the code was continuously released to it, allowing for speedy user testing and feedback. The final map was then embedded onto the main WaterAid site inside an iframe. The embed code was set up to allow websites to hide both the social share buttons and the branding if required.

This was a small project and was aimed at showing what would be possible. Since the launch of the Africa map, WaterAid and WASHwatch have subsequently commissioned a further map of the world which shows how each country is doing with regard to water and sanitation access.

What would I change?

There are some features which could be improved on.

• Embedding the map: Despite the map being responsive, after public release, the Africa map was not embedded in online articles that talked about it. It’s not clear that you can embed it directly from looking at the map as the small green icon is not obvious. Luckily the issue was addressed in the World map.
• Responsive styles: Scaling the map for different browsers was also tricky as the ideal would be to show the map and the statistics at the same time. It could do with a rethink.
• Timeline slider: I would also rethink the time slider as the chunky angular yellow slide handle seems unmatched to the rest of the site.
• Colour range: The range of colours for the water map are too subtle to be as informative as they could be. If I had the chance I would spend a bit of time finding out a better colour range that still distinguished it from the sanitation map which was more successful in this regard.