Doug Proctor Experience designer

50 years of disaster response

Design process

First things first

A quick look at Google Analytics for World Animal Protection’s main website showed that more than 23% of traffic was mobile. Good enough reason to go mobile first.

User flows

Taking the business requirements into acount, I planned out the high-level user journeys both on, in and off the site.

Sketches and rapid prototyping

Next up: sketches and rapid prototyping. For this I used pencil, paper and the POP app for iPhone which allows you to turn your sketches into a protoype in seconds.

High-fidelity wireframes for mobile

Documenting layout details and low-level user journeys.

Brand integration

Taking the business requirements into acount, I planned out the high-level user journeys both on, in and off the site.

Just add PHP, HTML, CSS and JavaScript et voilà

High-level decisions

Responsive

The website needed to reach as wide an audience as possible. Opting for a responsive website was important because of its cross-platform nature. Moreover, we anticipated that people using phones would not be able to navigate a map-based application designed only for desktop easily.

Narrative and brand

Often the best way to engage with an audience is to tell a story. Each of the 50 interventions were prepared as their own chapter, to sit within the bigger story of World Animal Protection. Users would be able to move from chapter to chapter using a variety of methods, including a list-menu of events and by manipulating the map directly.

CMS

The site needed to be content-managed but also portable. I architected the site to pull in the content via a simple JSON feed, which can be generated by any CMS. We started rapidly with a SilverStripe instance, and this will soon be ported to Drupal as part of World Animal Protection’s efforts to normalise their platforms.

Interaction Model

Years vs. Events

Initially went with years as the primary options but quickly realised that this wouldn’t scale. Further exploration revealed that interventions as primary objects would give us the flexibility we needed. Besides, we assume our readers less interested in units of time and more interested in the actual things that happen in time.

The map model

We decided that an interactive map would drive the navigation, which meant a great case for an object-driven interface rather than page-based interaction. Information about an event would be “hidden” inside the corresponding map marker, from where it would animate outwards when summoned by the reader. This model maps perfectly to the real-world concept of events taking place at unique locations.

The mobile model

However, this model would not be suitable for small devices where there just isn’t enough space for all the content elements to behave independently. As such, we needed a second interaction model that would be suitable for mobile without being too conceptually different from the model for larger screens. The solution was to group content elements (gallery, video, text) into a single panel which would would be hidden off-screen until required.