Rainforest Alliance, Redesign

Challenge

The competition for gaining donations is fierce – 86% of charitable donations are made to 1% of all nonprofits in the United States. While the Rainforest Alliance (RA) has an international presence as a certification organization, it had to be clearer for potential donors that we are indeed a nonprofit in need of funding for field project implementation.

For the new website, we needed to figure out a responsive, user-centered approach to explain our who we are, how we work and showcase impacts to gain more donations, while still showcasing our large database of Rainforest Alliance Certified™ products and services.
 

Approach

By clearly defining our audiences and user flows, we were able to completely restructure and simplify our information architecture to accommodate the primary actions we wanted our users to take.

Our qualitative and quantitative research showed that users were interested in learning about and taking action on the particular issues and regions they care about. We also found (not surprisingly) that technical certification language alienated audiences unfamiliar with the core of what RA does. By framing our work by issues and regions, along with simplifying the language we use to explain and categorize our work, we would lower the barrier for further engagement.
 

Storytelling + Contextual Calls to Actions

Since the organization has been around almost 30 years, we wanted to take full advantage of the beautiful storytelling staff were already doing and the strong photo library that’s been built up over the years. By pairing these stories with contextual CTAs to take action or donate, we are able to lead users through a funnel of engagement.
 

Modular, Pattern-based design approach

Since the budget was tight and our Drupal developers weren’t in-house, we wanted the design to be as lean as possible to cut down on development hours. We started the design process once we had a clear idea of the different elements needed for each page. First my team brainstormed through quick sketches, then moved onto wireframes where we could see what elements could be created in a similar way. Using frameworks like UIKit and Foundation, I built out key pages and patterns in HTML and CSS for our developers to reference as they build out different sections. From there we began an agile development approach from our development team.
 

Results:

After a 3 month discovery/design period and 4 months of development, the new rainforest-alliance.org site went live on time in early October 2016, just in time for year-end giving season.

While we are still working on compiling meaningful stats for the outcomes, we have already seen an increase in donations and have heard increased satisfaction from staff and external audiences.