National Grid ESO
Design System

UX ■ UI
Project Overview
This project is part of the Balancing Transformation programme that aims to transform the way NGESO balances the electricity grid. In line with higher business imperatives to accomplish an electricity system that can operate carbon free by 2025, and a system strategy supports net zero by 2050. The challenge set was to design the future experience of the control room engineers and operators to balance the grid, in a carbon-neutral world.

This project has recently gone live.
Find out more →
My Contributions
Led the creation of the Design System and all components that will comprise the front-end graphical user interface of the system. The success of this work directly supported the signing of the $18M, 2-year contract with National Grid ESO.
National Grid ESO
Visual Designer
May 2021 - Aug 2022
As the visual designer on the project, I was responsible for everything that emcompasses the front-end graphical user interface. Working together with our UX designers and developers, to translate requirements into wireframes and then transitioning those into build-ready state for technical development and deployment. I led the creation of the Design System and implementation of the tooling and processes that revolve around it. Iterating and adopting it in line with our scaled agile ways of working, ensuring that we maintained a user-centric approach while also keeping it feasible and achievable within the project timelines.
User Research & 
Design Exploration
Implemented a user feedback loop supplemented by IBM Design Thinking processes to ensure a user-centric iterative approach. Spending 100+ hours with users, shadowing and capturing their as-is journeys and collaboratively ideating the future experience using low-fidelity wireframes. Continuously adapting and evolving all designs and the design system itself, to tackle user needs and pain-points. Starting initially with the development of the look and feel with an emphasis on data visualisation, analytics and accessibility (adhering to WCAG).

Watch the walkthrough video below to get an insight of the design process.
Design System
After various iterations and exploration, a design toolkit and style guide was created. Atomic design principles were applied for the structure of the Design System. And the custom design system was later adopted to a Carbon Design System framework. Shifting towards the use of IBM's open-source Carbon React library as to streamline the transition to build and the offshore development of the Web App solution. Accelerating the client's journey towards it's zero-carbon goal. As the development has proceeded hand-in-hand with the UX work, using the Design System devised accelerated the process of translating new patterns from low-fidelity concepts into high-fidelity wireframes and prototypes, and adopting the necessary components. All underpinned by a set of foundational user-centric UI principles and best-practice guidelines.