Creating a shareable Earth Day campaign in 1 week

Hero illustration of a grid of cards with climate-related illustrations & charts
Lachlan Campbell
Lachlan CampbellWeb designer-developer

At Watershed, the Climate Leads we support always come first. For Earth Day, I wanted to make something delightful to help celebrate their progress in decarbonizing their organizations.

For Earth Day last year, alongside a video celebrating Climate Leads, we helped our climate leads distribute an emissions summary report to employees at their companies. However, it wasn’t consumable e.g. on Slack as a drive-by viewer: you’d have to log in with SSO and digest a fairly detailed report.

This year, I proposed redesigning that report to be more comprehensible, but a multi-week project couldn’t fit alongside our current workstreams. My wonderful manager Jackson pushed me: could I focus on the essence, and come up with something to delight customers in the week before Earth Day?

We’d previously thrown around the idea of a “Spotify Wrapped for your climate program,” and cutting the scope down from a full climate program report to something bite-sized & shareable seemed promisingly possible. I made quick sketches on my iPad of what could look like to see if there was a one-week version that might make sense.

Two pages side-by-side with handwritten sketches of “Bloq's year in carbon” with downloadable graphics
iPad sketches of early ideas for the project

Not heeding Jackson’s suggestion to avoid tackling a larger project than I could finish, I wrote up a document describing the project idea and decided to run with it.

Monday (one week from launch)

Monday morning, I talked to our product team lead about the idea, and he gave the clear for a designer & engineer to join this effort for the week. Since this wasn’t the only project on my plate that week, the additional firepower from Kristin (product designer) & Sheila (product engineer) made the project feel more achievable.

We kicked off with a discussion on what we were imagining & the intended audience. Many Climate Leads had significant plans in place for Earth Day, announcing progress reports & new initiatives. We decided to design for Climate Leads without major plans yet in place, and to target sharing inside the company (versus on social media), since internal announcements would be an easier ask on short notice, and reduce the need for customization companies might want for a public announcement (e.g. adding their logo). While doing more thorough user research & thinking would’ve resulted in a better product, with 4 days to build, we took an opinionated guess.

We wanted to build a tool that presented climate program milestones on beautiful cards, which a Climate Lead could export as a graphic to share on Slack or email with their company. Quickly auditing the many visualizations of emissions/action Watershed offers across the product, we narrowed it down to 4 key summaries: the amount emissions have decreased, carbon offsets purchased, carbon removal purchased, and clean power purchased.

With the vaguest structure in place, I jumped into code, starting to wrangle live data into these modules. I set an early technical constraint for myself to use existing data structures and only write new code for the UI, keeping the build simpler.

Tuesday

Kristin sketched early wireframes, based around the idea of “stack ranking” various accomplishments on Watershed and presenting the most compelling one.

Screenshot of blueprint-style mockups in Figma

At the same time, I explored the visual style. I spent 20 minutes on potential visual directions for the cards, incorporating elements from our brand illustrations.

Screenshot of cards in Figma showing a carbon footprint and clean power purchase overlaid with illustrations
Early style explorations

Kristin & I brought the sketches to design critique, our twice-a-week convening of the design team at Watershed (6 members, as of this week) to discuss in-progress work. One designer suggested that when sharing on Slack or email, dealing with separate downloads for each graphic might cause added friction; instead, the tool could construct a single graphic with several panes.

We landed on portrait-oriented cards stacked horizontally, as we could add any number of cards depending on the company’s progress. I resized the style explorations into portrait cards to test in Slack, and the thumbnail looked decent:

Screenshot of a graphic thumbnail attached to a Slack message
Rapidly testing an example horizontally-stacked graphic validated the idea

With this visual prototype feeling right, I dragged the cards’ CSS styling into this portrait-stack shape. Working on the code simultaneously with the designs continuously de-risked the project, as we weren’t imagining anything we weren’t testing in code within an hour, validating every step would be possible in our timeframe.

Wednesday

Wednesday was our design-iteration day. Kristin hammered all day, trying many combinations of illustration, color treatment, & copy:

Screenshot of dozens of Figma boards scattered across gray space, showing many iterations

One design challenge we encountered was units. In our dashboard, many numbers are presented in “tCO2e,” which means metric tons of all the greenhouse gases an activity produces, measured in the unit of carbon dioxide’s climate-warming impact. While that’s already a complicated metric to communicate to passerby, our emissions card would show tCO2e divided by revenue, which lets you evaluate if your emissions are growing or shrinking relative to your business growth. (E.g. if you doubled your products sold in one year, it’d be challenging to reduce absolute emissions that year. But if you divide by revenue, you can see if your business is becoming more carbon efficient.)

We decided to show tonnes of carbon removal/offsets purchased but omit the company’s total footprint number, and landed on the phrasing “emissions decreased N% per dollar earned.” While not perfect—such as for European customers who don’t use dollars—it was comprehensible by anyone without including a paragraph explaining tCO2e / $1M revenue.

Screenshot of 5 cards at this stage of the design process
5 cards at this stage of the design process

Sheila built the processing of footprint data into the relative emissions vs revenue for each year, and assembled a chart of it, while I worked on building the UI of the tool.

Screenshot of the tool in progress with “Bloq’s year in carbon” as a title, a download button, and three panes showing the company’s climate progress
The Earth Day tool, 3 days into development

Thursday

Kristin kept iterating on the cards, improving our copywriting & bringing the illustrations to life. She had an amazing visual idea to perk up the emissions bar chart beyond colored rectangles, using stacks of “carbon.” After struggling with SVG effects to implement this in code, I switched to CSS flexboxes to get it done.

For design crit on Thursday, Kristin & I brought our Figma docs & screenshared our progress. We got a litany of helpful feedback: improving color contrast, adding a real-world equivalent example to our clean power card to make MWh more comprehensible, optimizing the design for simpler downloading. While I’d been designing around the graphic being a singular element on the page, on our way out, Jackson made a quick sketch on the whiteboard of breaking the cards out on the page to perk up the layout.

In this case, it took less than half an hour to implement Jackson’s layout suggestion—hiding the directly-exporting graphic from the page, then rendering the same React card components with a different layout—but I wouldn’t have considered the idea on my own.

Testing our tool with different customers’ data, Sheila & I found dozens of edge cases & bugs to fix. We had to be judicious about which to prioritize with such a compressed timeline, but we kept a shortlist of ideas to try building nonetheless.

One of those ideas Sheila added was customers being able to choose which cards were included in the graphic: limited customization without venturing into building a full-on design tool.

Screenshot of the dropdown menu allowing disabling specific cards
The menu for choosing specific cards to include

I wanted a card summarizing which categories of business activity produce the most carbon. I gave myself half an hour to see if I could built it at suitable quality, knowing we could ship without it. Whereas many cards relied on specific activities a lower percentage of customers have taken so far, such as having purchased carbon removal, it was gratifying to add a card that nearly all our customers would see.

Friday (last day of development)

Friday morning I demoed our project to the rest of the Watershed team, a reliably exciting milestone. While the project felt nearly ready to go, continuing to test the tool & show it to more team members brought in reams of helpful feedback. We spent Friday polishing everything, stress-testing the automatic summary generation across customer data & implementing Kristin’s final design suggestions. We ended with 8 card designs, each dynamically embedding data about the company’s climate program.

Joined graphic of the final results for two example customers
The final graphics for two example customers

Victoria, one of our amazing Climate Stategy Managers who work 1-on-1 with customers, graciously volunteered to manage communicating the tool to customers. We drafted emails, and she made a Notion database tracking every customer and whether they were using the tool.

Monday, launch day & first day of Earth Week

After we announced the tool, a wide array of customers let us know they were incorporating the graphics into their Earth Day celebration. The graphics ended up in Slack channels, company-wide newsletters, slide decks in all-hands meetings, on LinkedIn, and even on the desk of the board chairman, who forwarded more questions about the carbon footprint.

Screenshot of Dataiku’s LinkedIn post sharing the graphic
Dataiku’s LinkedIn post sharing the graphic

For a project built out over four days, it was a success! If we’d started earlier in the year & spent longer talking to customers/planning, we likely could have leveled up both the resulting product and the impact of its usage. A number of Climate Leads mentioned they’d have loved to use the graphic, but didn’t have time within the week to share the news. Some factors will always remain outside the realm of control of a web app.

On Earth Day & every day, we strive to use great design & product thinking to help catalyze a wide array of climate programs at all stages, from their first footprint measurement to large-scale carbon removal contracts. It’s a massive privilege—and if you want to join us, we’re hiring engineers & designers!

By Lachlan Campbell

Stay up to date

Get the latest from Watershed, from policy updates to in-depth climate guides.

Guides

an image of the CSRD experts who spoke at Watershed's webinar

Tactical advice on the CSRD

Photo of UK flag on the left and TPT logo on the right

TPT: Everything you need to know about the UK Transition Plan Taskforce

Illustration of coins in a field

SEC ESG fund rules: Everything you need to know

Customer stories

coyuchi product

How Coyuchi gets product-level carbon insights from Watershed

houses next to solar panels

How Aon automated its carbon footprint measurement

kroll and watershed and cdp logos

Kroll on using Watershed to save time reporting to CDP

Watershed HQ

Sylvie Goulard, a new member of Watershed's Policy Advisory Board

Welcoming Sylvie Goulard to our Policy Advisory Board

Climate curve with text "Series C"

$100M for climate

2023 with a world for the 0

Watershed's 2023 year in review

SEC

Illustration of coins in a field

SEC ESG fund rules: Everything you need to know

the California capitol where SB253 and SB261 were passed

California SB 253 and SB 261: a guide for companies

Welcoming Mary Schapiro to the Watershed Policy Advisory Board

Welcoming Mary Schapiro to our Policy Advisory Board

Legal

watershed and latham and watkins law firm logos next to an image of the SEC

How to prepare for mandatory climate disclosure - advice from Betty M. Huber of Latham & Watkins

ropes and grey logo with the California flag, watershed logo and text: Guide

Michael Littenberg of Ropes & Gray on California’s SB 253 and 261

EU Flag plus Covington logo

What is the EU's Green Claims Directive? Full Guide with Covington experts