Contribute to Nucleus

Our design system is a living organism, one that reflects and evolves with our collective learning.

Nucleus is a mature design system and has been utilised across the entire British Gas website.

Any changes to Nucleus are expected to add value for British Gas customers and to all the teams that use Nucleus.

Contributing#

In order to maintain our high standards we rely on details. These details will often be focussed on evidence. This evidence could come from analytics or observations during user testing, anything that identifies a problem and with the outcome of adding value.

We ask for this evidence to ensure that the whole community has a clear understanding of why a change has been made.

Responsibilities#

The Nucleus team are guardians of Nucleus, making sure all of its parts work symbiotically.

Contributions can be made at all levels. Anyone who has found a problem that could be solved.

What is a contribution?#

It starts with identifying a problem. Whether it's a problem with an existing component or pattern, or an improvement to the documentation. Maybe a pain-point with the prototyping tool. Every part of Nucleus is open to contributions.

A contribution:

adds value
can be something new, an improvement or a bug fix
is reusable
is inclusive and accessible
is documented

Who can contribute?#

Everyone.

Whether you are a Designer, a Software Engineer, a Tester, a Solutions Architect, a Product Owner or a Director. Everyone is invited to contribute to Nucleus.

What to expect?#

We all play our part in producing a coherent, consistent and engaging customer experience.

Over time, the community has established a contribution flow to ensure any contribution meets the standards of Nucleus.

Have you identified a problem?#

If you have, please share the problem with the community. Asking if anyone else is aware of the same or similar problem.

You'll be surprised how many problems exist that are constantly overlooked and ignored, so any problem, no matter how big or small has the potential to add value.

reusable by a team/journey other than yours
a solution to a new problem or an extension of an existing solution

...the chances are your idea would be a great contribution!

The chart below will help you decide what to do:

Proposal flowchart

First step: creating a Proposal#

If what you have in mind is not currently offered by Nucleus, it's reusable by multiple teams or user journeys, it's solving a problem that can't be solved currently, then you have Proposal material!

Before raising your Proposal, it's worth checking on the Proposal board that there isn't someone already trying to contribute a similar idea.

If nothing similar has been raised, then go ahead and create your Proposal.

Make sure you give as many details as possible and answer the questions on the ticket template. These will help us understand what you're proposing and make sure it checks all the boxes to go forward.

If you need help answering some of the questions, reach out to the team on our channels. We'll be more than happy to help!

Collaborate#

As your Proposal is for something that has reusability potential, it's time to involve those teams that may have an interest in it. Reach out to your colleagues see if they may have requirements that will help them use your contribution once it's available.

Bring your Proposal to the Drop-in Clinique, it's a great way to get feedback and interest from others!

Remember that you are the main sponsor of your Proposal, but we're there to support you if you need us.

Contribute#

You're ready to start working on your contribution!

Add any user research into the Proposal ticket by commenting on it with user analytics, usability testing, A/B testing, etc.
Share your final designs with the wider design team, and the Nucleus team for feedback.
Start building your contribution with your product engineer.
Start building documentation for your contribution (adding to an existing doc or creating a new one – we can help with that).
Once it's ready to be reviewed by the Nucleus team, share the pull request with us so we can see if it's built following Nucleus coding standards for components.

A contribution usually comprises:

A design for a component/variant/feature that can be added to the design libraries (Sketch/Figma).
A built component/variant/feature that can be added to our component library.
Unit test for the component.
Automated testing scenarios.

The best way is that you and your team own as much of the above as possible, but we can support you on anything if you need us to.

Once everything looks good to go, your contribution can be part of the next release and will be available to everyone using Nucleus!

And that's how a contribution is done!

How to make the best contributions#

Here are a few tips and tricks on how to make things as fast as possible:

The best and quickest way is for you and your team to own as much of the work as possible. This way you do not depend on the availability of any other team to pick up the work. But do not worry, we can support you along the way if you need us.
Check that there isn't a Proposal for the piece of work you have in mind already. You can find all the Proposals on the kanban board and see their status.
Share your design ideas as early and as often as possible with the community. You can do that on our Teams channels, or in the Drop-in Clinique sessions. This will help refine your design to make sure it works for the wider community.
If you are designing an improvement to a component, make sure you are using the existing version first if it can do the job. That will give you a control version and benchmark to test your design against and see if it adds value by improving the experience/key metrics.
The proposer is the driver. If you propose a change or an addition to Nucleus, you are the one who will be championing it.
We are customer centred, and every contribution should add customer value and improve their experience. Try to apply the 'customer lens' to everything you contribute.

Insights on existing Nucleus work#

For any feedback related to our Nucleus components and related documentation, we're using Github. It helps us provide a transparent track of all contributions and potential issues.

You can view our Proposals status.
You can create bug reports, add a new Proposal (RFC) request for comments, as well as react or comment on existing feedback.

Suggestions for new Nucleus assets#

We're working hard to grow Nucleus without sacrificing quality.

You can track and add suggestions for new assets in Github by checking our requests status.
Feel free to explore the styles and assets provided to suggest new components.
Please make sure to submit your experiments and learning. It helps us to track potential variations and roll out stable additions to all teams via Nucleus.

To understand how the Nucleus team works, visit Our Process.

Feedback on anything related to Nucleus#

Reach us on our Teams channels, if there's anything on your mind.

Events and updates#

We know we don't have all the right answers, that's why we want to work with you in person, as well as connect you to other teams dealing with similar issues.

We help to host and facilitate sessions and workshops focused on our current tasks as we go along. If you'd like us to help organise or be involved in something you're doing, do let us know.
Just like other product teams, we're participating in weekly and monthly cross-team ceremonies.