ClimateHero. Calculate. Commit. Contribute.

ClimateHero helps people and companies work out their climate impact, cut it and fund climate projects for the rest. Calculate, commit, contribute. More than two million people have used their carbon calculator since 2018.

When I came in, ClimateHero was really two sites: climatehero.org for businesses and a separate WordPress site for individuals, each with its own look. The job was to bring it all together under climatehero.org, with one design language for both.

Two audiences, one site

Businesses bring in the revenue and individuals bring the impact, and they come looking for very different things. A sustainability manager wants Scope 3 and reporting. Someone at home wants to know what their flights add up to.

The answer is a Business and Personal switch that is always within reach, in the navigation and on the start page, so you can change sides without starting over. Shared pages like climate funding, FAQ and About work the same for everyone.

Serious, but not too serious

ClimateHero sits somewhere between WWF and Uber: a .org address, but a company. For good and for profit. So the design has to be credible for business customers and still warm and playful for someone curious about their own footprint.

I started with a month of exploration: design foundations, a visual direction and a few takes on the start page. Out of it came Polymath from OH no Type Co. for the headlines, brushstrokes as dividers and soft-focus Nordic landscapes (some of them moving), all built on ClimateHero’s existing mint green.

I also explored a set of brush-painted illustrations. In the end we used only their shapes, as painted blobs behind plain line icons: a little organic warmth around something more businesslike.

The logo got an evolution, not a revolution. I reworked both the mask and the wordmark: flatter, simpler and bolder, but still recognisably ClimateHero.

Designed in the code

From April to June I worked one day a week with ClimateHero’s developers. I kept the design system in Figma, but most of the designing happened straight in the browser instead of in static mockups. The site is built with SvelteKit, Tailwind and shadcn components, and I shaped those components to look and feel like ClimateHero: the header and navigation, page blocks and editorial pages for climate projects and stories. It launched in seven languages.

In the autumn I came back to bring the Business Calculator, where companies map their emissions and get their climate report, into the same design language.