Empowering EDF's MethaneSAT with a Scalable and Accessible Digital Platform

MethaneSAT is a division of the Environmental Defense Fund (EDF) that uses advanced satellite technology to track methane emissions worldwide. They aim to provide useful data to the public, academic institutions, and researchers to reduce greenhouse gas emissions and combat climate change. Their tools allow users to search location-based methane data and collaborate with EDF. 

We began by conducting a comprehensive content and UX audit of MethaneSAT’s existing website. This process identified which elements could be reimagined within a CMS and which bespoke pages needed tailored solutions. The audit also flagged usability and accessibility issues, particularly on mobile devices and screen readers, and used those insights to guide our improvements.

Recognizing MethaneSAT’s website limitations, we teamed up to enhance and rebuild the website on Drupal with reusable components instead of hard-coded pages. Central to our approach was developing a modular component system modeled after EDF’s Vital Signs website. This system and shift into a CMS provided MethaneSAT’s team the flexibility to curate and manage elements based on a system they were already familiar with. We designed a collection of 13 components with multiple color variations, ensuring that the material could be presented dynamically and feel less templatized. This approach not only streamlined content creation but also ensured scalability for future needs and information that needed to be switched out or updated based on new satellite data.

To address inefficiencies in the backend, we implemented a tagging system that allowed personnel data to be uploaded once and tagged across multiple teams or categories. This eliminated the need for repetitive manual entry and ensured that updates were reflected across the site in real time. As a result, we made it more efficient for content creators to generate content themselves and less reliant on developers.

For highly stylized pages like “Our Mission,” we retained existing animations and custom designs while making subtle adjustments for accessibility and mobile compatibility. We introduced a secondary color palette to delineate information based on specific content types, creating a clear system that helped users navigate the site more intuitively based on their needs and interests. We also helped them establish guidelines for the application of the secondary color palette so that newly published content adhered to their brand identity, providing consistency across the entire site.

In the original site, it was unclear whether an element was clickable, and the site heavily relied on the user's trust to hover in the right spot. Recognizing this confusion, we prioritized improving interactivity through arrows and consistent design patterns, and hover effects making clickable elements more apparent. This clarity not only enhanced navigation but also encouraged users to explore in-depth resources and data.

The redesigned MethaneSAT website exceeded expectations, delivering a scalable and accessible platform to its global audience. Through a component-based system, content creators can efficiently and independently manage the site without constant support from developers. Instead of a stale, information-heavy site, users can now smoothly navigate through content as an immersive educational experience. Altogether, we advanced EDF and MethaneSAT’s mission of empowering global audiences with data to tackle methane emissions.