Information Architecture

Over the years, WWF has published thousands of pages of amazing content. But as their site grew, so did the need for a better approach and underlying system for relating and structuring this material. Viget worked with WWF to rigorously architect their content and establish formal ties between the many pieces of the natural world and their organization. An important aim of this effort was to empower WWF to publish their captivating material in a more comprehensive and efficient way.

User testing, ranging from open card sorts to tree tests, helped solidify our decisions, particularly around the site's navigation. The broader result of this work is an expansive yet structured site that is tested and more natural to visitors.

Data-driven Decisions

Alongside Viget's UX designers, the marketing team combed through Google Analytics and SiteCatalyst data to better understand activity on the existing site and how that could inform the redesign. The team then pulled this data into Omnigraffle and laid it on top of the current sitemap to fully visualize (and help communicate to WWF) where users were going. Bright green areas signify popular pages. This view helped us better understand user behavior and identify resources that either should not be migrated over to the new site or should be absorbed into other areas or pages.

Information Design & Storytelling

When an organization has as much content across various subjects as WWF does, it's a challenge to help visitors both understand and care. Viget spent considerable effort organizing all this content and developing a storytelling strategy and persuasive page design that encourage engagement, understanding, and user action.

The overall storytelling approach focuses on five central areas of WWF's efforts: species, places, habitats, threats, and industries. These pages' compelling text and stunning visuals draw users in, then point users to other pages detailing WWF's specific projects and initiatives as well as ways users can take action.

We encouraged WWF to let the stories speak for themselves. While relevant calls to action and links to related content are incorporated throughout the site, they do not overwhelm users or clutter the pages.

Portrait Pages

WWF's areas of focus — species, places, habitats, threats, and industries — represent nature and humanity at their most majestic and awe-inspiring. We wanted the pages for each of these concepts to be just as awe-inspiring.

So we designed "portrait pages" for each species, place, etc.: bold, rich presentations that highlight WWF's amazing photography and do justice to the subjects. At the same time, our developers gave WWF an incredible level of flexibility over these pages' content. Each portrait page looks highly designed, but no two portrait pages look identical.

WWF can optionally include hero images; toggle a "sticky nav" on and off; toggle page sections on and off; optionally include large photo carousels; modularly add content within each page section; and use photos, videos, or facts (custom treated text created via the CMS) interchangeably. For portrait pages that have less content, WWF can toggle a "simple styles" design — a completely separate template and layout more appropriate for shorter storytelling.

Balancing this customizability with the need to maintain design fidelity and consistency was a considerable challenge for our back-end and front-end developers.

Accessible Content

WWF was keen from the start on creating a responsive site design, both to better serve users' needs and to serve as an innovative model for other non-profit sites. They wanted to enter content once and have that content display appropriately across browsers of different widths and across devices — those of today and of the future.

The redesigned worldwildlife.org does just that. The site looks and performs beautifully at multiple breakpoints, from the iPad to the Nexus 7 to the iPhone to whatever next year's hotness will be.

Custom Content Management

Our work on information architecture/design and storytelling presented an interesting opportunity and challenge: how to create a CMS to support all of this granularly structured content, content relationships, and design flexibility.

To do this, we first broke down the content into its atomic parts. This schema defines each content object, its attributes, and its relationship to other objects. From there the development team created a custom content management system (CMS), using Ruby on Rails, that allows WWF to easily manage all of this granular content and relationships.

There are about 45 top-level objects in the CMS that make up the public site content. These range from a species, which has a corresponding public portrait page; to navigation links (WWF has full control over the three types of navigation links in the header); to "species categories," which control the cool "mosaic" on the species index; to places' latitudes and longitudes, which control the points on the places index map.

The CMS includes other sophisticated features, including URL redirect management and a personalization manager that allows WWF to customize call to action content across the site. The CMS does all of this while avoiding an off-the-shelf CMS's unnecessary clutter and unused options.

Photo Management

Photography is instrumental to WWF's message and efforts. The organization publishes images to the site daily and regularly receives new assets from the field. A key part of building the CMS was creating a variety of photo management tools to make working with this rich (and often filesize-heavy) content as easy as possible.

To aid in reuse of photos across species, stories, places and all other pages, the CMS automatically scales and crops an uploaded image into numerous sizes. All WWF has to do is pick which photo they'd like to use in a particular slot, and the system does the rest. WWF can also use the CMS to manually crop images to one of several fixed aspect ratios to ensure the resulting image is presented in the best way possible.