Establishing a Digital Magazine to Combat Climate Change

The Environmental Defense Fund (EDF), recognized globally as one of the leading environmental organizations, is driven by a team of expert scientists committed to crafting solutions that reduce climate pollution and empower people and nature to flourish in a more sustainable environment. Our initial involvement with this incredible organization began with the task of making updates to its main website, EDF.org.

During this period, EDF asked us to take on the design and build of a new segment on their website, a unique digital magazine called Vital Signs. The vision for Vital Signs was to function as a standalone website while also serving as a sub-brand of EDF, primarily promoting its original journalism, expert analysis, photography, and mini-documentaries.

As we entered the project, we noted that our biggest hurdle would be transforming EDF's long-form storytelling into a captivating digital experience. Additionally, we had to account for the extensive range of content that their team planned to publish, which spanned from short and long-form narratives and photo essays to videos and "Go Green" lifestyle pieces aimed at promoting sustainable living and carbon footprint reduction.

Given these considerations, we chose Drupal as the Content Management System (CMS) for the Vital Signs website. Drupal offers a structured and consistent framework for content creators to build pages utilizing a component system. By offering the flexibility to mix and match components based on each page's unique needs, it grants the EDF team full artistic autonomy to craft more compelling narratives.

To identify the necessary components, we began combing through EDF magazine issues and existing posts to pinpoint which content types could be converted into individual components. We then collaborated with their team to organize these content types into broad categories. This categorization process was pivotal in determining how to structure the content on the Vital Signs site in a way that effectively captivates EDF’s target audiences, enhances user engagement, and boosts brand awareness.

The brief required that the Vital Signs site have its own distinct identity while still paying homage to the primary EDF branding. Drawing inspiration from the bold hues of the EDF logo, neon green became the anchor for the new site design, and in stark contrast to EDF.org, we chose black for the homepage background. This new application of the EDF color palette allowed us to differentiate the two websites.

To ensure we still found opportunities to tie back into the corporate brand, the interior pages of the site feature subtle nods to the blue tones from the EDF color palette, along with secondary design elements and typography applications similar to those found on edf.org.

While developing the site experience, we had to carefully balance the unique needs of both the users and the content creators to ensure an optimal experience for all.

The users

A key focus of our developers was to facilitate engagement by directing users to content that aligned with their interests and that the high volume of media-type content wouldn’t compromise the website's performance.

Filtering

To foster an engaging digital experience for users, our developers added a robust filtering system to the website’s ‘Story’ and ‘On Film’ Archive pages. As a result, the user can choose between different categories, such as “Climate and Energy” and “People and Nature,” and the system dynamically feeds content based on their selection. To take these pages one step further, the hero image changes depending on the filter category selected.

Media

Images and videos play a significant role in many of the components, as it was crucial that we handled the different forms of media in a responsive and accessible manner.

One noteworthy example of our developer’s approach is the video hero component. Rather than uploading videos directly to the site, we opted to host external videos on YouTube and Vimeo. Given their existing channel, YouTube was our go-to platform for longer-form interactive videos. For the more passive, ambient videos, we selected Vimeo, allowing content creators to customize how they display on the site. 

Additionally, as part of our commitment to maintaining a high-performance website, we used Drupal's capabilities to serve images in the appropriate size, format, and aspect ratio for each device type.

The content creators

One of the significant challenges was crafting the many different components, each with its own unique variations. It was imperative for the integrity of the website that these components, regardless of their order on a page, would function seamlessly, granting the Vital Signs team total artistic freedom when creating compelling content. To achieve this, we meticulously encapsulated padding and margins within each component. 

Moreover, we set clear guidelines: depending on the nature of the content, only specific sections of a page would accommodate certain components. This ensured both consistency and adaptability in the website's design.

Launching the Vital Signs platform for the Environmental Defense Fund represents the power of cross-team collaboration and innovative design in crafting a brand-new online presence. Born from EDF's rich printed resources and powered by the robust framework of Drupal, this new website is optimized to enhance user engagement and education. 

We are proud to have been able to support EDF's mission through the creation of Vital Signs, where their profound expertise in science and economics can be shared more effectively, reinforcing their ongoing efforts to combat the biggest challenge of our time: climate change.