US-based charity the Environmental Defense Fund (EDF) have been very successful in achieving major environmental breakthroughs over the past four decades. Their focus is on global warming, oceans, ecosystems and human health.
EDF’s approach is unique among environmental groups in that they are willing to partner with business and utilise incentives that help the human population as well as deliver much needed environmental change.
EDF’s old site, though rich in scientific content, did not focus clearly enough on the work EDF does or its successes. Added to this, calls to action relating to donation and taking action were sporadic and inconsistent.
Prior to starting any design work, we carried out an in-depth evaluation of the site and interviewed many key stakeholders, gauging their feelings about what the site needed to achieve for EDF, who it was for and how best we could convey EDF’s personality. This research fed into the development of a new information architecture and associated html wireframe (created for usability testing).
During this part of the project we also worked with EDF’s writers to encourage the development of story-based content that would resonate with the majority of the site’s audiences much more effectively than the existing ‘dry’ copy. This type of content also needed to have a goal that could be portrayed through strong calls to action. In other words, if there was no associated call to action to a story then it shouldn’t be published.
Following testing we moved on to creating a new visual design for the site. We worked closely with EDF’s brand guidelines but extended areas like colour palette where it was needed to convey perceptions such as warmth and clarity. Imagery plays a big part in the new design as well as the use of serif fonts for main copy and sans serif for instructional text.
Finally, we developed a suite of HTML/CSS/Javscript templates that EDF’s web team integrated with the Drupal content management system. We created responsive designs that react to browser window sizes including a homepage that responds to window height as well as width.