Global Food Security Index website→
Project introduction
Two years ago the EIU created an index for Dupont to illustrate how countries around the world performed relative to one another with regard to their food security. The index was accompanied by a website with an interactive data tool. The data feeding into the index is refreshed each year and as part of the annual update the opportunity was seized to review and improve the site.
We sat down with the The DuPont team and reviewed the site and its performance. Using a combination of analytics data and quantitative user and client feedback we assessed how well the current design met the project goals and objectives and identified a number of areas where we thought we could improve things. We agreed to the following:
Better promote the significance of the research results up front
Broaden the appeal of the index results to include non-subject matter experts
Better demonstrate thought leadership
Increase downloads of the index model (data)
Users and audience
Policy makers are NGOs, academics, broader audience
Team and my role
The team consisted of myself as the lead designer, a team of 3 analysts in New York and Washington DC, a visual designer, PM and developers in New York and the Product Owner in London.
Constraints
Geographically dispersed teams and client, spread between time zones in London, New York and Washington
Tight timeframe due to a media launch event in Istanbul
Technical constraint from building on top of an existing codebase
Design process story
Problem framing
The original version of the site was centred around an interactive data visualisation tool to allow users to explore the data. Whilst this was engaging, fun to use and looked cool, it did however require the user to work quite hard to interpret the results and benefitted those that had a good understanding of food security and the indicators used to measure it.
One of the problems I identified is that the user is thrown into the data tool with little or no introduction to the subject matter or the index. There is very little narrative holding the experience together, which starts at quite a deep level that could be overwhelming and confusing. From the outset it is not easy to get an overview of the results, to see who are the high or low ranked countries, or even perhaps to simply interpret the data.
Ideation
I explored ways of introducing the user in a more staged manner and pursued an approach for data visualisation described as the Martini Glass. This begins with an author-driven approach to introduce the visualisation. Once the author’s intended narrative is complete, the visualization opens up to a reader-driven stage where the user is free to interactively explore the data. The structure resembles a martini glass, with the stem representing the single-path author-driven narrative and the widening mouth of the glass representing the available paths made possible through reader-driven interactivity.
I shared this idea with the team and illustrated how we could lead the user from an author-driven into a reader driven experience by starting with a ranked list of countries, where the top-ranked countries are high performing and the bottom of the list shows poor performers. This gives a broad and global picture of everything, that is easy to interpret and that gives immediate value without effort. From the table view a country of interest could then be selected and this would lead the user into the data tool itself where they would then be able to play and explore with individual indicators.
The table view allowed for immediate engagement with core elements of the research findings. Rather than just presenting a simple ranked list of countries I wanted to allow the user to gain more insight than simply who is top or bottom ranked. We included the individual indicator data as sortable columns, so the user can break down the results and see performance based on indicators. We also allowed the user to switch views between the rank and score and as a regional breakdown. In a second tab on the table we incorporated the previous years’ data to show the year on year changes. A third tab provides further insight with a simple chart display of the countries with the biggest changes.
Concepting
When the idea of a table view was first presented to the team there were some concerns about whether this would work given the large number of countries (113). I worked with a front end developer to mock up an HTML prototype to demonstrate the table. We wanted to show how even with 113 rows of data the user could easily scroll and not lose reference by adding a fixed header. They could also sort results and switch views of the table using tabs. By putting the prototype in the hands of the team and client, they were able to experience first-hand the table view and this helped to allay any concerns.
After a few rounds of feedback and iterations from the team a visual designer worked on updating the styles.
Retrospective and lessons learned
The update to the index and the site was ready for the launch event. Over the past year analytics data has shown increased downloads of the index
User engagement has been higher. Increased downloads of the index. Resource section has been well used. DuPont has continued to commission the EIU to update the index.
Involving the client in the whole process. They feel involved and engaged. No big reveal. Because we had shown our work early and often the sign off went smoothly.