Tools

In February 2018, the Global Coalition to Protect Education from Attack, a joint group made of Human Rights Watch, Save the Children, UNICEF, UNESCO, and UNHCR, among others, approached us to create a microsite for their 2018 report on the state of violence against education.

Like some of our earlier work, the EUA site had serve multiple audiences– the academics and researches who rely on the data, the groups who put time and effort into the data, and the general population at large. In addition, the global nature of the site meant that it had to appealing and logical to multiple cultural sensitivities, lightweight enough to be able to load on less robust data areas, and beautiful and functionally responsive at all breaks, as well.

Additionally, we had about half the time we normally have for such a project – just 12 weeks

I. UX

The structure of the site was in some ways by the report – requirements include explainers on who the GCPEA is, what their methodology is, and how they got to their conclusions, as well as a data rich maps. Additionally, each of the 28 countries featured needed it's own page.

Quickly, we realized that unless we wanted an unwieldy site that would cause user confusion and dead ends, we'd need to keep most of the dense information on a single page, and then push users off to the country pages, will easy access back at any time. This would also translate well to mobile, as it's essentially a mobile model when you look at user maps.

II. Design

Early on in the design, we knew that we wanted to piece to be bright bold and assertive – we used our affinity for public-good poster art from the early part of the 20th century to make a design echo. The work of the GCPEA, and it's associated organizations, picks up on the mantle of much of what was established in the post-World War 2 order, in Europe and beyond: an idealized concept of global citizenship, responsibility, and effort. In this way we hoped to link the efforts at public good of yesteryear with the efforts of the do-gooders today.

III. Motion and Data

We knew we wanted the design to offset by some subtle animations that led some life to sometimes text-heavy pages. However, with the knowledge that a great deal of users would be viewing site on mobile, or in low-bandwidth areas, we opted for SVG animations created in Lottie. The result were so easy to edit and deploy, it's an amazing tool that we will be using in the future, I'm sure.​​​​​​​

Additionally, the maps initially presented a problem – we were given 6 tiny maps, each with unique data, from the report print layout. Multiple maps are a fine solution in print, but in the interactive space, it seems like an error, or a missed opportunity. Additionally, multiple maps mean more loading. After a few false starts, Tim on our team arrived at the perfect solution– laying the data bars over the map itself. In this way, a relatively small node footprint reveals 4 points of data, all at once.

The final piece came together over an aggressive 6 weeks, which was a exhausting but rewarding. Thanks to our incredible lead developer Michiko, we managed to not only handle the inevitable clients changes that were requested at the last minute, but created a site that is beautiful, lightweight, and a pleasure to use.

“The Primer Stories team was great to work with—very responsive and communicative.”