NESO
I led the Visual Design and Design System for the Open Balancing Platform, the critical national infrastructure modernising the UK's energy grid for Net Zero. Working alongside the UX lead and development team, I directed the UI execution and built the scalable visual foundation for the system managing the nation's power supply.
+90%
User Efficiency Increase
+283%
Increase in Dispatch of Batteries
37,400
Metric Tons of CO2 Saved
Building a power system that’s fit for the future
IBM Consulting helps Great Britain’s National Energy System Operator (NESO) balance the electricity grid, creating a platform fit for a zero-carbon, sustainable future
Read the IBM Case Study →
The start of the balancing mechanism revolution
The first stages of the Open Balancing Platform (OBP) have gone live, revolutionising the balancing mechanism as we know it.
Watch the NESO Demo →
“We observed during testing that what would have taken over 30 minutes and 610 clicks to instruct in the legacy system took just 3 minutes and 10 clicks in OBP”
Before OBP, the UK’s energy balancing relied on fragmented legacy software and text-based interfaces devised in the 90s. Operators used software glitches as vital workarounds, creating extreme inefficiencies in a system where every decision is critical. This infrastructure wasn't scalable nor suitable for the volatility of renewable energy and Net Zero targets.
To modernise a system where every workflow has real-world consequences - blackouts, grid stability, carbon emissions - we had to deeply understand the operators' reality under pressure.
Research to Reality: Partnering with the UX lead, we conducted over 100 hours of contextual inquiry, shadowing control room operators through video calls and in-person sessions to map their exact pain points.
Securing Alignment: I translated our UX findings into modern UI explorations and early-stage explanatory videos. These visual narratives were fundamental in communicating our user-centric vision, securing executive buy-in, and aligning engineers used to legacy-driven operations.
*Video was created before our transition from Sketch to Figma.
Iterative Validation: We established a dedicated panel of "sponsor users" (experienced operators) to continuously validate our clickable prototypes. Working closely with system architects, we ensured our UI seamlessly accommodated the complex new AI algorithms being developed by the engineering team - balancing complex backend automation with an uncompromised intuitive user experience.
As the sole visual designer at the project's inception, it became clear early on that a design system was fundamental to keep pace with the vision and scale of the build. I led the transition to Figma and established the project's single source of truth.
1,500+
Componets
AA
WCAG Standard
Accelerated
Design-to-Dev Lifecycle
Custom Component Library: Leveraged and heavily customised IBM’s Carbon Design System to streamline React development. Using an Atomic Design approach, I devised custom logic for centralised management and multi-layer nesting.
Systemic Accessibility: Prioritised functional clarity for data-heavy interfaces. I devised strict frameworks for typography, colour, and contrast to ensure absolute legibility in low-light, high-stress control room environments.
Complex Grid Architecture: To support dense operator workflows, I designed a custom grid system that managed "responsiveness within responsiveness" - allowing operators to fluidly resize containers without breaking the UI hierarchy.
Zero-Ambiguity Handoff: Worked directly with developers to define Non-Functional Requirements (NFRs) and QA processes. By utilising design tokens and component specs, the design system eliminated ambiguity and ensured pixel-perfect React implementation.
This project was the result of incredible work by many great people at IBM and NESO. A special highlight to my core team from the design side: Mark Williams (my design partner and UX Lead), Annabelle Gao (for bringing me onto the project), and Zach Rigby (our table component master).
Back