BRITISH GAS
"NUCLEUS" PROJECT

UX Designer - UI Designer

At British Gas, the project was designing core booking journeys, improving how users schedule engineers through clearer, more efficient flows. Alongside delivery work, I took ownership of the Sketch component library, transforming it into the primary design resource for 40+ designers across UK Home arm of British Gas.

Following this, I was invited to lead the UX on the Nucleus Design System. Within a six-person, multidisciplinary team where we established and scaled a new design language across 24 product teams. Delivered a development-led system built on Web Components with a supporting Sketch library, enabling consistent implementation across products.

Produced comprehensive documentation covering components, journey patterns, and experience standards, supported by responsive Sketch templates to ensure accessibility and design quality at scale.

I extended the system further by developing custom Sketch plugins to improve efficiency and adoption, and lead rollout through internal meet-ups, training sessions, and presentations.

For this project I used:

  • Sketch

  • Atom

CHALLENGE

On a daily basis, we would discuss the challenges of designers creating new components in isolation, having radically different design styles and no unified way to share the work and design language of the company.

We would be blindsided in meetings with a new page that contained different drop-shadow styles and even incorrect colours.

SOLUTION

Whilst I performed my duties as a Senior UX designer for the booking team, I created a library of reusable components in Sketch to disseminate between my peers across multiple design teams.

I implemented a version control using GitHub and enabled colleagues to contribute and share designs and bugs to improve the design cohesion throughout the entire designer community at British Gas.

I even created Sketch plugins in my own time to enable me to create components and work with Sketch faster.

OUTCOME

This side project became the Nucleus Design System and a team was created to curate and disseminate the Design System across the business.

We delivered a production-aligned design system with components built in both Figma and code, creating a single source of truth between design and engineering. This removed the need for manual design translation and reduced accessibility rework by embedding compliant standards directly into reusable components.

At a delivery level:

  • Design: Saved approximately 1–2 days per designer per month by eliminating repeated UI specification, and clarification cycles.

  • Development: Reduced frontend implementation time by 15–30% per feature, as developers worked from production-ready components rather than interpreting designs.

  • Accessibility: Cut accessibility-related rework by ~30–50%, with WCAG-compliant components reducing the need for retrofitting and auditing.

  • QA: Decreased design–development QA cycles by ~25–40%, due to higher fidelity between design and shipped UI

In addition, the system improved delivery confidence, reduced inconsistencies in implementation, and ensured accessibility was addressed proactively rather than reactively.

Summary: A tightly integrated design-to-code workflow that accelerated delivery, reduced rework, and embedded accessibility into the core of product development.

Designer of the month

He has been going the extra mile to make work better for all of us. A few weeks ago, he released a shared Sketch Library v.2.0. He's actively inviting contributions. And he's taking all of that learning and craft to start again, ramping up a new, Nucleus aligned Sketch Library. He is also advocating a culture of taking care and being here for each other, work related or not.

“

Gets several nominations every month which goes to show how consistently great he has been. In particular, the constant work he puts in to Nucleus while helping everyone understand and implement the new VI needs a shout out.

“

SKETCH LIBRARY

As the creator of the previous British Gas Pattern Library, I began work on the Nucleus Design System library and brought my experience of creating the first into the Nucleus version.

To support this library, I wrote documentation to support the installation and use of the library for the other 40+ designers in the UX community.

DOCUMENTATION

Writing documentation to support every component we created was integrated into the creation process.

We held workshops to decide the best layout for the documentation template and provided the community a comprehensive description of each component, best practices, dos and don'ts and technical specifications.

Each member of the team had a hand in crafting and writing this documentation. Each member bringing their expertise to the table, developer, designer and accessibility champions.

PRESENTATIONS AND WORKSHOPS

To be able to communicate the Nucleus Design System effectively, I suggested we hold a weekly meet-up to discuss what we have been working on and Apple-style teaching sessions to demonstrate how to use features of the Sketch library and for a developer to demonstrate how to implement the components in the development environment.