Conservation International

News and Views Blog

Building a nest for vital storytelling

Conservation International Blog

Conservation International has been protecting nature for more than 25 years. Employing over 1,000 people that work with more than 2,000 partners in 30 countries, CI has already protected 1,200 areas across 78 countries and more than 730 million hectares of land, marine and coastal areas.

One way in which CI raises awareness is by maintaining its blog, Humanature – initially referred to as News & Views in my mockups. The blog hosts stories by staff authors and contributors that cover their travels, business partnerships, and some really amazing field work. There’s great appeal based on their photography alone.

  • Client:

    Conservation International

  • Budget:

  • Live Demo:

  • Skills:
    • Information Architecture
    • User Experience Design
    • Visual Design
Wireframes for the home and article pages built with Adobe InDesign's library feature.

Understanding The Content

My first step in this project was completing an audit of key pages and interviewing the writers and stakeholders at Conservation International. Based on those inputs I created a sitemap of pages to be explored and highlighted the kinds of opportunities they wanted their users to experience:

  • Find articles by date, topic, author, or search field
  • Clear branding but not identical to CI’s main site
  • Space to promote current fundraisers
  • Share on Facebook, Twitter, etc.
  • Leave a comment
  • Access to everything past and present

I built wireframes for our key pages; articles, authors, archives, about, and home and bound them together in a PDF that everyone involved had access to. The information architecture went through, roughly, four iterations before I moved to visual design. Perfection at launch was never the goal; we would evolve throughout development and pivot based on our testing. By overstating the iterative nature of this project to stakeholders I did a fair job of staying unblocked during the process.

Representing the Brand

CI’s print collection is full of lush, colorful, inspiring photography. Clearly, images would be at the frontline so crafting a design system that supported those images but wouldn’t get in their way became important. To do that I pushed for ample space and easy-on-the-eyes, low contrast typography; but not so low that it would fail accessibility tests.

During visual design I found opportunities to tie-in CI’s color palette to elements like date stamps, tags, subheadings, and buttons. The Gestalt is a clean-looking, spacious site that cultivates hours of reading thanks in-part to its typography.

Focusing on a design system instead of customized pages helped me to achieve overall consistency and streamlined conversations with CI’s writers and managers. It was a pleasure for everyone to focus on components rather than how individual stories would be displayed.

CI mockups
In-progress mockups for Humanature's home page, and authors page.
CI specs
Redlines for spacing and font sizes.

Finalizing the Design

Mockups provided enough realism to prove things were working holistically. With design direction approved I approached the developers with several assets:

  • Mockups
  • Red lines / specs
  • A style guide for atomic elements: buttons, links, form fields, etc.

Each asset served as a valuable input for development, taking the guesswork out of spacing, text size, and color values. They also helped the developers gain a feeling of ownership; interpreting my deliverables reduced a lot of the questions they could have asked me during our reviews.