Work

About

Lab

Resume

Work

About

Lab

Resume

Work

About

Lab

Resume

Embodied Carbon

Carbon data architects can act on

Cove.tool · Paid tool · Product design

Carbon data architects can act on

Cove.tool · Paid tool · Product design

OVERVIEW

From project assumptions to a carbon number you can act on

A guided flow in cove.tool that takes architects from a few project questions to real products and a baseline to beat.

🧩

Problem

Embodied carbon depends on many inputs: structure, enclosure, interiors and the product data inside EPDs. That’s a lot to ask of an architect early in a project.

🏗️

Solution

A four-step flow: answer project questions, choose EPDs, assign them to each building system, then compare baseline with achievable carbon.

📈

Outcome

A paid tool within cove.tool: a complete desktop flow of about 80 screens, covering structure, enclosure and interiors, with SE 2050 reporting built in.

THE PRODUCT

carbon.tool, cove.tool’s embodied carbon workflow.

How I designed this

PRODUCT

carbon.tool, a paid tool in cove.tool’s building analysis platform

MY ROLE

As a UX designer at cove.tool, I designed this flow in Figma, from the setup questions through EPD selection to the results.

Setup flow

Turned project assumptions into six guided tabs with help on each question.

EPD selection

Designed the library, project list and detail panel for dense product data.

Results

Designed the carbon profile, from project totals down to single materials.

WHY IT MATTERS

Carbon gets locked in before a building opens

Operational energy can be improved over a building’s life. The carbon in its materials can’t, so the time to act is while they’re still being chosen.

of global energy-related CO2 comes from buildings

is embodied carbon, from materials and construction

Operational carbon 28%Embodied carbon 11%Everything else

Source: World Green Building Council, Bringing Embodied Carbon Upfront, 2019.

The stages an EPD reports on

A1–A3

Product

Raw materials, transport, manufacturing

A4–A5

Construction

Getting it to site and building it

B1–B7

Use

Maintenance, repair and replacement

C

End of life

Demolition and disposal

D

Beyond

Reuse and recycling

The EPD table carries every stage, and the results headline sits on A1–A3: the carbon spent before a building opens, when material choices can still change it.

THE LANGUAGE

Five terms that run through the product

Carbon tools use a lot of specialist language, so the design had to carry it clearly.

EPD

Environmental Product Declaration. A product's verified environmental data sheet.

GWP

Global Warming Potential. The carbon a product is responsible for.

CLF baseline

A typical value from the Carbon Leadership Forum, used as the comparison.

A1–A3

Life-cycle stages from raw material through manufacturing.

SE 2050

The structural engineering commitment to net-zero embodied carbon by 2050.

THE PRODUCT

Where carbon.tool sits in cove.tool

Cove.tool is a building analysis platform. carbon.tool is one of its paid tools.

cove.tool navigation with the CO2 module selected

Its own module

The CO2 icon sits in cove.tool's main rail, alongside its other analysis tools.

Four steps in the second rail

Assumptions, EPD selection, assignment and results stay one click apart.

A paid tool

carbon.tool is sold as a paid product within cove.tool.

Built for architects

The role in the header reads Architect, with structural detail like SE 2050 inputs in reach.

What the design had to carry

Product data

EC3 or other sources

Every EPD names its source and links out

EPD types

Industry, Plant specific, Custom

Filters separate averages from real products

Comparison

CLF baselines

Each product sits next to a typical value

Impact method

TRACI 2.1

Shown beside each impact category

Reporting

SE 2050

Its own setup tab and results view

THE CHALLENGE

Expert data, for people who aren’t carbon experts

Three things stood between an architect and a useful carbon number.

Too many inputs

Structure, enclosure, interiors and stairs all change the number.

→ Grouped setup into six tabs, one topic at a time.

Dense product data

An EPD holds GWP, density, uncertainty and impact categories by life-cycle stage.

→ Cards lead with two numbers. Full detail opens alongside.

A number isn't a decision

A carbon total alone doesn't tell you what to change.

→ Every result sits next to a baseline and an achievable figure.

PROCESS

How the work unfolded

The Figma file shows where the effort went: four stages, one coverage map, and repeated passes on selection.

Full-size screens by stage, 81 in all

Set up · Questions, in two layouts12

Select · Every material, open and collapsed51

Assign · One template, 14 systems14

Compare · Profiles and drill-downs4

Selection took the most screens by far, which is where the hardest decisions were.

Superstructure

ConcreteRebarSteelTimberMasonry

Substructure

ConcreteRebar

Interior

WallCeilingFloor

Enclosure

RoofExterior wallGlazingGround slab

THE FLOW

Four steps, in the order the work happens

Screens below use placeholder data from the design file.

01 · SET UP

Project assumptions, one tab at a time

A long technical form became a guided set of steps.

General project details with renovation percentages

One list of steps

General, Structures, Enclosures, Interiors, SE 2050 and Advanced.

Help where it's needed

Each question has its own help icon.

Detail on demand

Choosing Renovation opens percentages for each building category.

Structure in the engineer's terms. Horizontal and vertical systems, lateral bracing and column grid, as dropdowns and sliders instead of open fields.

A setup screen marked up by hand, combining general and structural questions

A marked-up review frame from the file. This version puts general and structural questions on one page, numbering and grouping the fields.

02 · SELECT

Choosing real products with EPDs

An EPD is a product’s environmental data sheet. Three columns take you from browsing to full detail.

EPD library, project library and EPD details

Filter by building element

Icons narrow the library by element and material. All, Firm and Personal scope the list.

Two numbers first

Product GWP sits beside the baseline, so options compare at a glance.

A library per project

Picks collect in a Project EPD Library, and teams can add their own.

Full detail alongside

GWP, density, uncertainty and impact categories open without leaving the list.

Collapsed library version of EPD selection

Library, project list and details side by side. Everything is visible, but it's a lot at once.

Identity. Category, manufacturer and product, so one line tells you what it is.

Two numbers. Product GWP and CLF baseline sit side by side at the same size.

Units with values. kgCO2e/yd3 stays under each number, since units change by material.

Quick select. A radio on the card adds it without opening the details.

03 · ASSIGN

Matching products to the building

Every element gets a product and a baseline, with the effect in view.

Organised by element

Beams, columns, slabs, shear walls and stairs, split into sub and super structure.

Product over baseline

Each row pairs the chosen product with its CLF baseline, down to project carbon.

See the effect beside it

The carbon profile stays open as a stack of baseline and achievable by material.

04 · COMPARE

Baseline next to achievable, at every level

Results go from one project total down to a single material.

The headline

Achievable and baseline totals, the reduction, life-cycle stage and lifespan.

Embodied and operational

One mirrored chart shows both, for baseline and achievable.

Drill into each system

Structure, enclosure and interiors each get a breakdown by assembly.

Down to the material

A stacked profile shows which material to change, and SE 2050 metrics and PDF export sit at the top.

Project carbon breakdown

Embodied carbonOperational carbon

7,500

5,500

3,500

2,500

Top: baseline. Lighter: achievable.tons CO2e

System carbon profile

BaselineAchievable

Super-structure

Concrete · 20%

Steel · 15%

Reinforcement · 15%

Timber · 15%

20%

30%

15%

18%

Reinforcement · 5%

Steel · 15%

Concrete · 15%

15%

Sub-structure

Structural embodied carbon

Columns 30%Beams 20%Slabs 15%Lateral bracing 5%Stairs 15%Foundation 15%

Rebuilt from the design in its own colours, with its sample values.

DESIGN DETAILS

The smaller parts

Small components carried a lot of the clarity.

The headline block

Big numbers first, with reduction and lifespan beside them.

Renovation sliders

Value and slider stay together, on one 0–100 scale.

Carbon stack

Super and sub structure, baseline next to achievable.

First-run prompt

One sentence on why the questionnaire is worth doing.

Colour

Brand blue

#00A0DB

Headings

#2D3748

Body

#585856

Secondary

#989898

Lines

#E2E8F0

Panels

#F3F3F3

Type

Aa 284

Lato throughout. Large, light numbers do most of the visual work.

WHAT WORKED

What held up across the flow

✓

One layout, every stage

Selection, assignment and results share a left-to-right pattern: broad on the left, detail on the right.

✓

Baseline beside every number

Product cards, assignment rows and results all pair a value with its baseline.

✓

A template that scaled

The assignment screen stretched across 14 building systems without a new layout.

✓

Collapsing the library

Folding it into a side tab keeps it close without competing with the work.

WHAT DIDN’T

Issues I’d fix now

Looking back at the file with fresh eyes, measured where possible.

Contrast fell short of the 4.5:1 AA text minimum

Body text7.1:1 · Pass

Brand blue on white3.0:1 · Fail

Secondary grey on white2.9:1 · Fail

The line marks 4.5:1. Brand contrast is something I went on to fix in Covesive.

The SE 2050 form running past the bottom of its frame

The SE 2050 form, with its last fields and buttons below the screen edge.

Forms outgrew the screen

The SE 2050 form runs about 95px past its frame, so key actions sit below the fold.

→ Break it into groups, and pin Back and Save.

Designed at one width

Every screen is 1900px wide. Three columns plus navigation would struggle on a laptop.

→ Define which columns collapse first.

Charts leaned on close blues

Segments use similar blues and greys, which are hard to tell apart without labels.

→ Label values directly and add patterns or more contrast between neighbours.

Screen count grew fast

Selection alone reached 51 screens, largely repeats for each material.

→ Document one pattern and its rules instead.

WHAT’S NEXT

Where I’d take it next

01

Test the setup

See how far architects get before needing help.

02

Fix contrast

Bring labels and links up to AA.

03

Design for laptops

Set rules for narrower screens.

04

Tighten the pattern

Replace repeated screens with one documented pattern.

TAKEAWAYS

What I took from it

Numbers need a neighbour

A carbon figure means little alone. A baseline next to it makes it a decision.

Show less, keep the rest close

Expert data doesn't have to be hidden. It just shouldn't all arrive at once.

Learn the domain's language

Designing with terms like GWP, CLF baselines and EPDs meant learning them first.

Other Projects

All Projects

Data-request loop for architects

RFI Loop

Design system · Accessibility

Covesive Design System

AI-powered design tool

Ada Tech x PUMA

🌱