Case study 03 · Carbon credit marketplace

Every credit,accounted for.

A carbon credit is a promise that something real happened in a place like this. The dashboard is where buyers and sellers check that the promise was kept. I redesigned it so they can.

Product designDashboardDesign auditMobile
10

Screens audited, one by one, before anything was redrawn.

3

States at a glance: pending, completed and settled, the one thing the brief insisted on.

Carbon markets run on trust. When buyers started asking whether credits were real, the voluntary market shrank for two years in a row. Every order that sits in an unclear state, every invoice that is hard to find, adds to that doubt. The dashboard is not paperwork; it is where trust is either kept or lost.

01 · The marketWhy it matters
02 · The brief

Given by the product team for the BNZ marketplace, where buyers and sellers trade carbon credits and I-RECs.

Let buyers and sellers manage orders, invoices and transactions easily.

The line I held on to: clearly distinguish pending, completed and settled. Everything else followed from it.

03 · The audit

I went through all 10 screens of the existing dashboard. Tap a marker to see what I found on Order Settlement.

Before redrawing anything, I measured what was there.

Contrast ratios were measured from the screens against WCAG. Every note maps to a decision later on.

The original Order Settlement screen
Original market transaction details
Old transaction details: one long list, six tax lines
Original billing screen
Old billing: invoice buttons on every nested row
    04 · Principles

    Built for clarity, not decoration.

    Three rules decided every screen. When two options looked equally good, the one that followed these won.

    05 · Before and after

    Drag the handle, or use the arrow keys, to compare the old and new Order Settlement.

    Same data, different trust.

    Before: original Order Settlement After: redesigned Order Settlement BeforeAfter
    06 · Design decisions

    For each: what triggered the call, the evidence behind it, the options weighed, and what it cost.

    Eight decisions, each with a reason.

    07 · Structure and flows

    The sidebar after the redesign, and the three journeys it was tested against.

    Work on top, everything else below.

    08 · Style guide

    Colours sampled from the final screens, type in Inter, and the core components rebuilt so you can try them.

    A calm system for serious numbers.

    Colour
    Type · Inter
    Components, live
    InitiatedRejected & Refunded

    Chip text here is darkened so each chip passes 4.5:1 (5.1, 6.2 and 5.2 to 1). The primary button uses dark text on green for the same reason: white on this green measures only 2.05:1.

    ⌕ Search for order id, status or etc
    09 · Outcome

    Delivered: 5 desktop screens, 2 mobile patterns and a component set built on the audit.

    What I would measure once it ships.

    10 · Sources

    Every outside number on this page links here. Contrast ratios were measured from the Figma screens.