British Gas
Nucleus design system

Component library owner
Design System UX Lead

At British Gas, I took ownership of the Sketch component library and developed it into a shared resource for 40+ designers across the UK Home business.

I was then invited to lead UX within the Nucleus Design System team. Working in a six-person, multidisciplinary team, we established a design language across 24 product teams, with production Web Components and a supporting Sketch library.

My work connected library architecture with documentation, accessible patterns and adoption. I also developed Sketch plugins and supported rollout through workshops, training and internal presentations.

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

The shared library supported 40+ designers and developed into the foundations of Nucleus. Within the multidisciplinary team, we scaled the design language across 24 product teams.

Reusable Sketch components, production Web Components and shared documentation gave designers and engineers a more consistent basis for collaboration.

The contribution process, workshops and practical guidance supported adoption alongside product delivery. The emphasis was on a system teams could use and maintain, with accessibility addressed within the component and pattern guidance.

Designer of the month

A graphic announcing Adam Bruzon as the winner of the designer of the month, with five medal icons displayed.

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.

A person with a beard, wearing a gray shirt, standing in front of a wall with colorful sticky notes, whiteboard, and a camera on top, with window blinds in the background.