Conservation International (CI) operates in 30+ countries pursuing its mission of protecting nature for the benefit of everyone. With such a broad sphere of influence and footprint, CI needed a digital presence that reflected this complexity and purpose, yet in a way that was logical, intuitive, and engaging.

What we did

PEOPLE NEED NATURE

In contrast with other conservation focused organizations, CI draws a direct line between protecting the planet and protecting its inhabitants. Their mission is to raise awareness about the ways the health of the environment impacts our ability to access food, shelter, income, and maintain our quality of life.

As a result, CI has a portfolio of projects with a wide range of locations and objectives. While this is a testament to the impact of CI’s work around the globe, over time it resulted in an extended amount of disparate content on the site. 

Key stories, beautiful photographic assets, and the organization’s core identity were buried or obfuscated in this legacy site structure.

EXCAVATING AN IDENTITY

One of our first steps in the project was completing a comprehensive audit of the site. The information gleaned from this study informed our restructuring of the UI, with the objective of surfacing key issues, challenges, and solutions. The overall framework was re-designed to highlight CI’s mission to reinforce the connection between the welfare of the planet and the welfare of its people.

Through our content audit, creation of a site map overlaid with site analytics, stakeholder interviews, and site research, we were able to identify three main opportunities with the site content and user experience: 1) communicating a unified and clear organizational purpose; 2) streamlining and connecting site material; and 3) crafting a presentation rife with excitement and brand vision.

CREATING STRUCTURE

We approached the first two issues by revising, condensing, and re-focusing content structure and taxonomy. We wanted to create an architecture that would reinforce CI’s organizational vision and purpose, and provide opportunities to weave in brand messaging and tone.

Evolving an Identity

While CI has created branded materials with its new identity for some time now, they had yet to take full advantage of the iconic tone of its logomark. During early design explorations, the decision was made to remove the type from the logo and to begin promoting CI using only their iconic mark within the context of their digital properties. The results are striking, and elevate the brand to among the most recognizable within their field.

A STREAMLINED Brand

In establishing a visual aesthetic for the new site, we pored over all print materials CI’s Design Team had created to date. What we found was a visual treasure: beautiful photographs, gorgeous color, simple typography, and ample white space. But while the vast majority of the materials were similar in layout, on closer inspection we found opportunities to strengthen consistency among core design elements like color, typography, and hierarchy. To ensure both teams were designing with the same rules, we created a simple Brand Guide that would serve to inform both print and digital projects as we moved forward.

System-based Design

Due to the broad and deep needs of CI’s site, we relied on a design system rather than tailored pages to present their content. Using core components as a base, we were able to extend and simplify those pieces in order to create a cohesive and consistent feel element to element, page to page, and viewport to viewport. As a result, simple content pages and newly funded projects have the same tools available to them as the “Workhorse” templates that promote CI’s flagship work. 

We were excited to meet CI’s challenge of streamlining and focusing their site structure to better present their values, vision, and successes in a clear and compelling way. Handing off a comprehensive brand guide and easy-to-use design system helped us provide CI with the tools they needed to develop content for the new site and to keep it fresh and relevant.