Renewables Module

  • SIERA's first move beyond real estate, into infrastructure ESG
  • EU and US localisation in one module, a first for SIERA
  • MVP delivered for client acquisition and contract renewals at the same time
Role
Lead UX Designer & Product Owner
Duration
1+ years
Platform
B2B / B2C SaaS
Tools
Axure · Figma · Chart.js · Miro
SIERA Renewables module on a laptop
4
New clients engaged in early-stage commitments
2×
Client engagement time with renewables features
1st
Infrastructure asset type on SIERA, beyond real estate
EU+US
Both meter setups delivered in one module

Hear the decisions behind the design

  • Short on time? The walkthrough covers the problem, the EU/US research and what shipped.

V1 shown. Some internal documents are reconstructed or omitted to protect client IP.

01 · The problem

No brief. No precedent. No internal stakeholders.

  • SIERA was built for real estate. Two major clients needed infrastructure: solar and wind farms, transport, water.
  • A new asset class, with new data structures and different energy meters in the EU and US.
  • No one internally had the domain knowledge, so I built the framework from scratch.

Challenges inherited

  • No brief, no direction, no domain stakeholders
  • No design patterns for infrastructure
  • EU and US energy meters work fundamentally differently
  • Standard bar charts misrepresent US meter data
  • Client acquisition and renewals running at the same time

What I took ownership of

  • Built the solution framework independently
  • Mapped delivery differences with EU and US teams
  • Designed the IA for a new asset type from zero
  • Introduced waterfall charts for the US market
  • Led the dev team and trained a Junior Product Owner
02 · Research

Building knowledge where none existed

  • With no stakeholders and no patterns to follow, I had to become the domain expert.
  1. 01

    Solar energy fundamentals

    • On-site generation, off-site generation, export and consumption: how each is measured and reported.
  2. 02

    EU vs US meters: the critical discovery

    • EU meters give three separate readings. US meters give one net reading.
    • The same data couldn't be shown the same way in both markets.
  3. 03

    Stakeholder outreach across both markets

    • I reached out to EU and US teams myself, so one build served both.
  4. 04

    Data flow mapping

    • Every metric traced from meter to UI. It became a reference document across the organisation.
  5. 05

    Rapid feedback sessions

    • Short cycles with internal consultants, clustered into themes, fed straight into iterations.

Mapping every metric to every touchpoint

  • I linked Renewables to Performance, Fund Dashboard, Actions, Documents, NZC and Waste.
  • It became the shared reference for every team.
Renewables information architecture linked to other SIERA modules

From meter to dashboard

  • Every metric, from the physical meter through the calculations to each screen.
  • Reconstructed for this portfolio; the original is protected IP.
Renewable energy data flow — from meter to dashboard card Data flow diagram showing how EU and US energy meters feed through calculation layers to produce the metrics shown on the Fund Dashboard Renewables card PHYSICAL LAYER — ENERGY METERS EU energy meter Uni-directional · 3 discrete readings Generated Consumed Exported US energy meter Bi-directional · net consumption only Net consumption +/− KEY DESIGN CHOICE CALCULATION LAYER Stacked bar calculation Generated − Consumed = Exported All values positive · segments independent Waterfall chart calculation Net value crosses zero axis Stacked bar would misrepresent data DERIVED METRICS Self consumption Generated ÷ Consumed % & kWh Exported to grid Generated − Consumed % & kWh Off-site purchased Supplier meter reading % & kWh Non-renewable Total − All renewables % & kWh UI TOUCHPOINTS Fund Dashboard — Renewables card Generation doughnut (self + exported) Consumption doughnut — 3-way source split Headline kWh + % of GIA + assets covered Inline tooltips — definition + calculation → The card that secured the client Asset Dashboard Renewables column per-asset hover popup On-site Renewable badge Performance View EU stacked bar chart US waterfall chart Chart view toggles Asset-level drill-down Colour system consistent across all touchpoints — forest, light green, amber, brown Tooltip pattern throughout — definition + calculation surfaced on demand Reconstructed for portfolio · Original Miro data flow omitted due to IP protection Colour system and metric relationships are accurate

Onboarding with the least effort possible

  • SIERA's back end was built for buildings: asset, building, space.
  • Instead of a new data model, I mapped a solar farm onto the one we had.
A solar farm on a renewable energy tariff
  1. Asset
    The whole site becomes the assetThe asset's floor area is the site area.
  2. Building
    The site is also the buildingSame floor area as the asset.
  3. Spaces are solar panel areasEach space is sized by its panels.
No new back-end structure.Solar farms onboarded through the existing asset flow.
03 · The key decision

Choosing the right visual language

  • I compared waterfall, horizontal bar, Sankey, clustered bar and doughnut charts with developers. Stacked bars suited EU data; only a waterfall could show US values crossing zero.

Three scenarios. Two markets.

  • Every combination of generation and tariff, mapped to its meter setup and chart.
  • It proves the waterfall is only needed on US assets with on-site solar.

1Hover or tap the teal dots to see what each colour means.

Scenario 1: solar on a renewable tariff, EU stacked bar vs US waterfall
Light green · supplier renewableConsumption from a green tariff supplier.
Forest green · on-site generatedConsumption from the asset's own solar.
Yellow · exported to gridEnergy sent back to the grid.
Three separate EU metersExport works against consumption, so it's shown as negative.Validated in testing.
Forest green · net consumedOne net reading drives the waterfall. Positive means consumed.
Light green · net exportedNegative means exported.Green shows the export still comes from a renewable tariff.
One bi-directional meterConsumption and export share one meter in the US.Tariff and on-site supply can't be separated.
Scenario 2: solar on a non-renewable tariff, EU stacked bar vs US waterfall
Light brown · supplier non-renewableConsumption from a fossil fuel tariff: "brown energy".
Forest green · on-site generatedConsumption from the asset's own solar.
Yellow · exported to gridEnergy sent back from the rooftop panels.
Three separate EU metersThe brown segment now shows a non-renewable supplier.
Forest green · net consumedOne net reading drives the waterfall. Positive means consumed.
Light brown · net exportedNegative means exported, in a non-renewable supply context.
Scenario 3: no solar on a mixed tariff, identical EU and US bars
No solar, nothing to exportAll electricity comes from supply, so no value crosses zero.
One stacked consumption barLight green is renewable. Orange is fossil fuel.
Two gauges, one barTracked separately, shown as one stack.
The control caseWithout solar, EU and US are identical.Proof the waterfall is only needed for US solar assets.
  1. 1Light greenSupplier renewable
  2. 2Forest greenOn-site generated
  3. 3YellowExported to grid
  4. 4Three EU metersExport shown as negative
  5. 5Net consumedPositive US net reading
  6. 6Net exportedNegative US net reading
  7. 7One US meterSupply sources can't be split
  1. 1Light brownSupplier non-renewable
  2. 2Forest greenOn-site generated
  3. 3YellowExported to grid
  4. 4Three EU metersBrown shows non-renewable supply
  5. 5Net consumedPositive US net reading
  6. 6Net exportedNegative, non-renewable context
  1. 1No solarNothing to export
  2. 2One stacked barRenewable and fossil split
  3. 3Two gaugesTracked separately, one stack
  4. 4Control caseEU and US identical

Only the supplier colours change between scenarios. The colour system does the storytelling.

Colour as a semantic system

  • Every colour means one energy type, in every chart, card and tooltip.
  • Readable for experts and newcomers alike.
  • Forest green #255056On-site renewable generated
  • Light green #74B48BOff-site / supplier renewable
  • Yellow #D1C022Exported to grid
  • Orange / brownNon-renewable energy
  • Teal #009C8DRenewable coverage (US, not split)
Fund-level EU renewables performance with colour-coded stacked bars

When a bar chart lies to your users

  • EU meters record generation, consumption and export separately. Always positive.
  • US meters record one net value, which can be positive or negative.
  • Without handling that, the module couldn't launch for US clients.
EU · uni-directional meters

Three readings. A stacked bar shows them accurately.

EU stacked bar chart of solar performance
US · bi-directional meters

One net reading that crosses zero. A waterfall shows it accurately.

US waterfall chart of net consumption
It changed the design system.I updated SIERA's design system so stacked bars became a standard part of bar charts across the whole platform.
Not a stylistic choice.Showing US clients an inaccurate picture of their solar data would have broken trust on day one.
04 · Design

One card. One conversation.

  • I pitched this card in the first client meeting as proof of concept.
  • That single card secured the engagement. Everything else was built on it.

1Hover or tap the teal dots on each card.

EU fund card
EU fund dashboard renewables card
Headline metricsGeneration, 86% of GIA and 44/46 assets.A fund-level read in under five seconds.
Generation doughnut12% used on site, 88% exported.Legible without the legend.
The insight that landed the pitch70% contribution to electricity consumption.Answers: "How much of our need do renewables meet?"
Consumption doughnutOn-site, off-site renewable and non-renewable.Shows renewable dependency at a glance.
Percentages and kWh togetherExperts get exact figures. Everyone else gets context.
  1. 1Headline metricsFund-level read in under five seconds
  2. 2Generation doughnutSelf-consumed vs exported
  3. 370% contributionThe insight that landed the pitch
  4. 4Consumption doughnutThree-way source split
  5. 5% and kWh togetherFor experts and newcomers
US fund card · same design, different data
US fund dashboard renewables card showing +56 MWh net consumption
Signed net consumption+56 MWh: the fund was a net consumer.Negative would mean net exporter.
Forest green · net consumed156 MWh drawn from the grid after solar offset.
Yellow · net exported100 MWh back to the grid.Same meaning as the EU chart, no explanation needed.
Teal · renewable coverageThe US meter can't split on-site from tariff.So the design doesn't pretend to.
Same position as EUCoverage comes from asset setup, not meters.
  1. 1Signed net consumptionDirection at a glance
  2. 2Net consumed156 MWh from the grid
  3. 3Net exportedSame yellow as the EU chart
  4. 4Teal coverageNo fabricated split
  5. 5Same position as EUFrom asset setup data

Complexity made navigable

  • Precise enough for experts. Clear enough for newcomers.

Asset list · Renewables column

  • Key solar metrics for every asset, at a glance.
  • Hover reveals the full breakdown in the same colours.
  • An "On-site Renewable" badge filters assets instantly.
Asset list with a Renewables column and hover breakdown

Asset level · chart views

  • Switch views without relearning anything: same colours, same tooltips.
Consumed vs generated chart with tooltip
Generated vs exported chart
Asset with no off-site purchased energy
Asset with no on-site generation or export

Tooltip system

  • Every metric shows its definition and calculation
  • The "why" for newcomers, no clutter for experts

Toolbar redesign

  • Less visual overload
  • Full complexity still one click away

Dashboard doughnut

  • Director-level view on the dashboard
  • Consultant-level detail on drill-down

From reporting pain to design response

  • The quarterly ESG reporting cycle was where renewable data caused the most friction.
  • Every shipped feature traces back to a pain found there.
Reporting trigger
Locate data
Interpret
Compare assets
Report out
User goal
Evidence renewable performance for the quarterly ESG cycle
See renewables at fund level, in one place
Understand what each metric means
Spot under- and over-performing assets
Report defensible numbers to investors and regulators
Pain point
Data scattered across suppliers, meters and spreadsheets
EU and US assets report differently
Jargon-heavy metrics, one screen for novices and experts
EU and US data can't be compared like for like
Figures hard to trust without the calculation
Design response
Renewables surfaced on the Fund Dashboard
One card aggregates every EU and US asset
Inline tooltips: definition and calculation
Asset drill-down with the correct chart per market
Consistent colours and transparent calculations

Built from rapid feedback sessions with infrastructure consultants, ESG directors and client fund teams across the EU and US.

05 · Business impact

A new market. From one module.

  • Infrastructure became a new client type for SIERA, for the first time.

First infrastructure client

A solar farm operator: proof SIERA could go beyond real estate.

4 new client commitments

Early-stage commitments on the back of the module.

2× client engagement

Engagement time doubled with renewables features.

EU and US in one module

Launched for US clients without disadvantaging EU clients.

Design system updated

Stacked bars became standard across SIERA's bar charts.

Team leadership

Led the dev team and trained a Junior Product Owner.

What users see today

  • Three views from the live module.
Fund-level EU renewables performance
Fund-level US renewables waterfall chart
Asset dashboard with renewables column

What I'd do differently

Push for dedicated domain stakeholders earlier, and instrument analytics from day one to see how users move between EU and US charts.

Built from first principles

01
Domain research
Solar metrics, regulation, EU vs US meters.
Self-directed
02
Data flow mapping
Every metric from source to screen.
Miro
03
IA and chart design
Waterfall for US, stacked bar for EU, colour system.
Axure · Figma
04
Rapid feedback
Consultant sessions, themes, iterations.
UX sessions
05
Ship
V1 delivered for acquisition and renewals.
Chart.js

Explore more work

See the other case studies, or get in touch.

Back to all work Get in touch