Carbon Portal
How we are putting sustainability at the heart of infrastructure decisions
UX / UI designDesign system

The Moata Carbon Portal is an embodied carbon emissions calculator with a comprehensive database of emission factors. It helps users make low-carbon choices in designs. Mettle designed and improved the interface and user experience, including a new tangible comparisons tool discovered during product development.

Initial carbon comparisons

To make carbon values more relatable to non-carbon users, Carbon Portal aimed to present comparisons using flights, photovoltaic panels, and trees. The goal was to democratise the tool's use among both carbon specialists and non-specialists.

After initial design exploration, the team found that equivalences to PV panels and trees were not tangible for many. Visualising large numbers of trees (e.g., 10,000 or a million) became challenging.

To address this, the product team decided to seek more user input and explore provocative comparisons. One such idea was comparing carbon emissions to the land mass of trees being burnt down. However, this approach posed a problem, as the relevance of land masses depended on the user's local context. For example, the size of London would only make sense to users familiar with London or the UK, but not to those from the USA or Australia.

London to New York plane lifting off
London to New York plane lifting off
Photovoltaic panels
Photovoltaic panels
Reforestation of a forest near a highway
Reforestation of a forest near a highway

Design iterations

Carbon specialists favoured using the the cost of carbon and the number of flights and as starting points for meaningful comparisons. This approach has allowed the to relate designs to their impact through the concept of offsetting carbon emissions.

We therefore developed three concepts for the Carbon Portal interface, which included both of these comparisons. These included a tooltip, an integrated switch and a dismissible panel.

Through a series of further user interviews with internal Moata users, we decided on the dismissible panel as it would allow users to tangibly compare their design decisions in real time as well as get support to helpful articles for the Moata community.

Carbon equivalence in euros of 56 tCO²
3918 pounds to offset
Carbon equivalence in euros and in flights

Next steps

The Carbon Comparisons problem is a continuous piece of work. Since its release on the Carbon Portal platform, we have continued to speak to a wider range of users to understand their experience with the live functionality. We are confident that this will positively inform future iterations of the feature, which could see more context specific comparisons.

We’d love to discuss your idea or challenge. Please get in touch with Charlotte, our MD, to arrange a call.

Mettle Studio

T3 Somerset House

To discuss new projects

Charlotte Heard contact photo
Managing Director

Charlotte Heard

For general enquires

Katy Jones contact photo

If you’re interested in working at Mettle, we’d love to hear from you, please email:

Press and media enquiries

Mettle - 2024Privacy policy