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 own the Design System.

We created components for designers and created a framework for developers to use components directly in real world applications. We documented everything and held regular meetings and training session/workshops to enable collaboration with all the designers at British Gas.

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.