top of page
BG_StandardLogo_FullColour_Clearance_CMY

BRITISH GAS - "NUCLEUS" PROJECT

UX Designer - UI Designer

After starting at British Gas designing the journey for users to book engineers, I decided to take on the responsibility to rework the Sketch library and make it the go to resource for the 40+ designers in UK Home whilst performing my main duties on the booking team. Once I achieved that, I was head hunted for the Lead UX designer position of the Nucleus Design System.

As a six person, multidisciplinary team we pushed a new style language through the business, building a development lead system using Web Components as a basis for the component library to be consumed by the whole 24 product teams across UK Home.

We have written documentation for each component, journey pattern and experience pattern and provided responsive Sketch mockups with templates to give our designers the resources to produce the best for our users from a design and accessibility point of view.

Alongside the Sketch library, I coded some Sketch plugins to make the library even better. Then approached the business through meet-ups and presentations to demonstrate the installation and use of the library and the complementary plugins.

For this project I used:

  • Sketch

  • Atom

sketch-2-logo-png-transparent.png

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.

Screenshot 2020-01-11 at 21.28.49.png
Screenshot 2020-01-11 at 21.27.41.png
Nucleus library - Cover.jpg
Screenshot_2020-01-11 Our Sketch library

Library fully designed and created by Adam Bruzon

Screenshot_2020-01-11 Community.png
Screenshot_2020-01-11 Components.png
Screenshot_2020-01-11 Foundations.png
Screenshot_2020-01-11 Principles.png

Documentation written and curated by the Nucleus Team

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.

IMG_3643_edited_edited.jpg

Nucleus workshop card sorting exercise

bottom of page