SIERA's entire product history was built around real estate assets — buildings, offices, retail. Two major client discussions, backed by product marketing research, surfaced a clear requirement: SIERA needed to support infrastructure assets. Not just buildings — transportation networks, solar and wind farms, water treatment plants, tunnels. A completely different asset class with different data structures, different regulatory frameworks, and critically, different energy meter setups between EU and US markets.
I adopted the Double Diamond methodology to enable an agile delivery approach — combining primary and secondary research with continuous design iteration. The Discover and Define phases built the knowledge base. The Develop and Deliver phases translated it into a shipped MVP.
With no internal stakeholders and no existing design patterns for infrastructure assets, I had to become the domain expert. This meant researching solar energy fundamentals, understanding regulatory differences between markets, and devising a new research strategy suited to the fast-paced delivery requirements.
After the expert sessions, I built a full IA linking the Renewables module to all relevant SIERA modules — Performance view, Fund Dashboard, Actions, Documents, NZC, and Waste. This ensured all accountable teams had visibility of the vision and that the module was designed to integrate with the platform's existing architecture, not sit alongside it.
The data flow I built mapped every renewable energy metric from its physical source — the energy meter — through the calculation layer, to every UI touchpoint in the module. This became a business-critical reference document used across the organisation, including by sustainability consultants. The original Miro file cannot be shared due to IP protection — this is a reconstructed version for portfolio purposes using the actual colour system.
Before committing to any chart type, I conducted secondary research to understand how renewable energy data is typically visualised — studying waterfall charts, horizontal bar charts, Sankey diagrams, clustered bars, and doughnut charts. I also worked with technical developers to validate which chart types were feasible within the React and Chart.js integration.
User research on this project was genuinely tough: few internal stakeholders knew exactly what client delivery required, and even expert interviews didn’t surface the answers I needed. I went out of my way — extensive independent research, finding the right personnel across both markets, and calculating what we could realistically deliver. The journey below is what that effort produced: the quarterly reporting cycle emerged as the moment where renewable data caused the most friction, and every design response in the module traces back to a stakeholder pain found there.
This was the most technically significant design decision in the project. EU energy meters are uni-directional — they record generation, consumption, and export as three separate values. A standard stacked bar chart represents this accurately. US meters are bi-directional — they record net consumption only. The value can be positive or negative depending on whether more energy was generated or consumed in a given period.
Three discrete meter readings: On-site generated, Consumed, Exported. Each value is always positive. A stacked bar chart accurately represents the relationship between all three.
One net consumption reading that can be positive or negative. A standard bar chart cannot show values crossing zero — it misrepresents the data. A waterfall chart was the correct solution: it handles positive and negative values, shows the net flow clearly, and gives users accurate solar usage representation.
To validate the chart decision, I mapped every combination of generation and tariff to its correct meter setup and visual representation — solar with a renewable tariff, solar with a non-renewable tariff, and no solar on a mixed tariff. These scenario boards became the reference for how each combination renders in both markets, and why the waterfall only ever appears on US assets with on-site solar.
Every colour in the Renewables module encodes a specific energy type. This system was designed to be immediately readable by both expert users who understand energy metrics and novice users learning the platform — consistent across every chart, card, and tooltip throughout the module.
A walkthrough of the Renewables module prototype — covering the problem, the EU/US research, the key design decisions, and what shipped. EU and US asset views are both demonstrated.
The core design challenge was making complex renewable energy data readable for both expert users — who need precise metrics and technical accuracy — and novice users who are learning what the data means. Consistent tooltips, redesigned toolbars, and a scalable IA bridged both needs without overwhelming either group.
The Assets list was redesigned to include a dedicated Renewables column, surfacing key solar metrics at a glance. Hover states reveal the breakdown — On-site generated, Off-site generated, Exported, and Consumed — using the colour system consistently across the entire list.
The "On site Renewable" badge allows instant filtering of assets with renewable coverage, reducing time to insight for consultants managing large portfolios.
In the initial client meeting, I pitched the Renewables card as a proof of concept — demonstrating exactly how we could surface solar performance data within SIERA's existing dashboard framework. That single card secured the engagement. Everything that followed — the IA redesign, the EU/US localisation, the waterfall chart, the junior PO I trained — was built on the foundation of that pitch.
The US version of the fund card uses the same design language but adapts to what a bi-directional meter can actually provide. With only one net reading available, the top section leads with a signed net consumption figure rather than a split doughnut — simpler, but no less precise. The coverage doughnut at the bottom uses teal to represent renewable coverage in aggregate — on-site generated or off-site green tariff — because the bi-directional meter cannot split the two, and fabricating that split would be dishonest data design.
The core design challenge was making complex renewable energy data readable for both expert users — who need precise metrics and technical accuracy — and novice users who are learning what the data means. Consistent tooltips, redesigned toolbars, and a scalable IA bridged both needs without overwhelming either group.
At asset level, users can toggle between multiple chart views to analyse different aspects of solar performance. Each view uses consistent colour encoding and tooltip patterns so users can switch contexts without relearning the interface.
A fundamental design principle throughout the module: technical users need precise, accurate data visuals. Non-expert users need to understand what the data means. Rather than designing for one or the other, I designed for both — through consistent tooltip patterns, redesigned toolbars, and deliberate cognitive ergonomics.
Every metric in the Renewables module includes an inline tooltip that shows the definition and calculation behind the data. This surfaces the "why" for novice users without cluttering the interface for experts. The pattern was consistent across all chart types, toolbars, and data cards.
Toolbars were redesigned to improve cognitive ergonomics — reducing visual overload while ensuring end users could access the full complexity of the data when needed. The design is scalable: as new renewable energy sources are added in future versions, the toolbar structure accommodates them without requiring a redesign.
The dashboard doughnut chart shows net consumption in one direction only — illustrating how much of the generated solar energy was consumed on-site versus exported. This was a deliberate simplification: the full breakdown lives at asset level. The dashboard gives the director-level view; the drill-down gives the consultant-level detail.
The Renewables module was not just a feature addition. It represented SIERA's ability to serve an entirely new client type — infrastructure — for the first time. The commercial implications extended beyond the immediate client.
Three views from the live Renewables module — V1 only shown due to IP protection. V2+ extends the module to additional renewable sources and airport infrastructure.
Return to the homepage to view other case studies