World Wildlife Fund

World Wildlife Fund Interactives

WWF and NJI designed and developed many story-telling interactives to illustrate the dangers of illegal fishing.

View Project

The World Wildlife Fund, the world’s leading wildlife and endangered species conservation organization, came to NJI Media to consider the best way to translate various infographic concepts to their website. The first report, Bait to Plate highlights the importance of stopping illegal fishing and in effect, the overfishing of the world’s oceans. Next up was the Rhinos interactive feature, which alerted visitors of the threat of endangerment for this race of animals. The next interactive created for WWF walked visitors through the Rio Grande, and illustrated the dangers of climate change and how it affects the area’s landscape. The feature then contrasts how this region can change with the help of WWF’s vision to ensure this area is protected for years to come. The latest is about the Bison population in the Northern Great Plains (NGP), which illustrates how Bison serve as important eco-architects in the NGP. Each feature is beautifully executed on the site and tells impactful stories that portray the World Wildlife Fund’s mission, which is to protect the Earth’s wildlife and endangered species populations.

Discovery

From Bait to Plate: Preventing Illegally Caught Seafood from Entering Our Food Chain

WWF had a similar story running in their print magazine, and wanted a fresh approach for presenting the content digitally. NJI started by researching references from other cause related stories and presented a few options. Landing on a linear illustrated narrative to wireframe out!

Define

Content Strategy

NJI got to work, working with WWF to identify key messaging to concisely communicate the touchstones of illegal fishing. We reworked the facts and language down into overarching concepts and scenes that would ultimately create the foundations of this experience.

Design

Illustration styles

Our design team illustrated every design asset – starting in pencil then into SVGs with their trusty Waycom tablets. Working with the development team on every step to make sure the animation would be scaleable and not too heavy on the page – they creating multiple layers to give the ability to animate each stage of the fishing-to-consumer process.These were prepared toward the goal of animation by the interactive team using a unique development solution: employing Scalable Vector Graphics (SVG). SVGs are an XML-based vector image format, and as their name suggests, they can scale to any size and not lose a bit of their resolution, so the experience translates well to mobile and tablet views. In theory, something like this could also be optimized for wearable tech.

Additional WWF Projects

Following the Bait to Plate project, NJI Media partnered with WWF to produce digital experiences to educate visitors on the Rio Grande, Rhinos and Bison.

Rio Grande / Rio Bravo

Almost equally important to helping endangered species is the preservation of the environment, which was the focus of the RioGrande/RioBravo experience. NJI partnered with WWF to both explain the water shortage problem and the solution for the future of the region. A unique solution to develop, as the water in the region is already 150% allocated with implications on both banks of the river that borders Texas and Chihuahua region of Northern Mexico.

Rhino

WWF came to NJI to create a central resource for information about the different endangered Rhino species that still exist today. The rarest being the Javan Rhino in Indonesia. Working with WWF's amazing photography to create a solution within the existing WWF framework.

Bison

You heard it here second, the Bison of the Northern Great Plains are having a comeback. The Bison are not your average large mammal, but also serve as eco-achitects within the NGP. The experience walks us through the different ways the Bison foster the wealth of species within the NGP and furthering the message to support Bison protection.

Development

Working Together

WWFs site is completely responsive, and a 80% mobile viewership, the Bait to Plate experience had to be designed for mobile first. Using SVGs allowed us to do this perfectly without suffering any resolution loss. To fit within the custom Ruby on Rails CMS we created everything locally then worked with the interactive team to host all the SVGs.

Deploy

Launch

The subtle animation, deep sea hues and simplified illustration make it easier for audiences to focus on this online experience amidst the noise of the web. The ability to restart each SVG animation by clicking back and forward in this adventure gives just enough control and interaction to the audience to establish an experience worth clicking through to the end. We recommend you visit the experience to find out more.

More Case Studies