I was asked to create an interactive, responsive website to demonstrate the breadth, scale and impact of World Animal Protection’s work across the globe.
This was during the later stages of their recent brand overhaul, and one of the key objectives of this website was to introduce the new brand to the public before the full brand rollout.
A canary in a coalmine.
I undertook the UX design, visual design and front-end development of the site, working with the excellent Brand, Digital and Mobilisation teams over at World Animal Protection.
My job was to help conceptualise this powerful brand tool, then turn that concept into a living, breathing website.
An emersive, cross-platform website that takes the user back 50 years to explore the most important interventions that World Animal Protection has carried out.
With a highly successful brand roll-out now complete, the 50 Years website is an important part of the on-boarding process as new supporters are introduced to World Animal Protection’s past and present.
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.
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.
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.
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.
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.
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.