Introduction

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

Our standards

To maintain high standards details will be focussed on evidence. This evidence might come from analytics or observations during user testing and is used to identify problems with the outcome of adding value.

Asking for evidence is important to ensure that the entire 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.

Individuals at all levels are welcome to contribute, whether they have identified an issue that needs to be resolved or have other valuable insights to share.

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.

Individuals from various professional backgrounds, such as Designers, Software Engineers, Testers, Solutions Architects, Product Owners, and Directors, are all welcome to contribute to Nucleus.

What to expect

Everyone involved in the process plays a significant role in creating a customer experience that is coherent, consistent, and engaging.

A contribution flow has been established by the community to ensure that any contribution made adheres to the standards set by 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.

When a solution is designed to be reusable by another team or journey, and it solves a new problem or extends an existing solution, the chances are that the idea would be a great contribution.

This chart will help when making decisions about what to do:

First step: creating a Proposal

If the idea in mind is not currently offered by Nucleus, is reusable by multiple teams or user journeys, and is solving a problem that cannot be solved presently, that can be considered Proposal material.

It is recommended to check the Proposal board before raising a Proposal to ensure that no one else has already raised a similar idea.

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

It is important to provide as many details as possible and answer the questions on the ticket template to ensure that the proposal meets all the requirements.

If assistance is required in answering some of the questions, reach out to the team on Nucleus’ channels. They will be more than happy to help!

Collaborate

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

Bring the Proposal to the Drop-in Clinique, it’s a great way to receive feedback and interest from others.

The person making the proposal should remember that they are the main sponsor of the Proposal, but they can always seek support from the Nucleus team if they need to.

Contribute

Take the following steps to work on a contribution:

• Add any user research into the Proposal ticket by commenting on it with user analytics, usability testing, A/B testing, etc.
• Share the final designs with the wider design team, and the Nucleus team for feedback.
• Start building your contribution with a product engineer.
• Build documentation for the contribution by adding to an existing document or creating a new one, for which assistance is available.
• Once the contribution is ready to be reviewed by the Nucleus team, share the pull request with them so that they can assess if it has been built following Nucleus coding standards for components.

A contribution usually comprises:

• A design for a component/type/feature that can be added to the published design libraries (e.g. Nucleus Figma UI Kit).
• A built component/type/feature that can be added to our component library.
• Unit test for the component.
• Automated testing scenarios.

The best way is for a user and their team to ensure ownership of the above by taking as much responsibility as possible. However, the Nucleus team can provide support if needed.

Once the contribution is ready, it can be added to the next Nucleus release, making it available to all users.

And that is how a contribution is made.

Contributing a new icon or illustration

Tip

1. Identify the need
2. Propose your idea
3. Shape and refine
4. Stakeholder approval
5. Optimise for the system
6. Submit for review

1. Identify the need

Determine if a new icon or illustration is required (see all the current variants listed on the Assets page). Consider its potential use across different teams and journeys. Review existing system elements to avoid duplication.

2. Propose your idea

Share your requirements and initial designs on the Nucleus Proposals channel on Teams. Test user recognition and gather feedback. Document your research in the relevant RFCs for illustrations and for icons.

3. Shape and refine

Adjust your design to align with the brand style and colours. Ensure it adheres to the grid, available in the Figma UI Kit on the ns-icon and ns-illustration pages of the published Components library. Share your proposed asset with the community, gather feedback and fine tune so it can be used by as many as possible. Run some user testing for recognition, to make sure it is conveying the right sentiment/information, and inform your design with the results.

4. Stakeholder approval

Obtain approval from relevant stakeholders such as team leads and brand teams.

5. Optimise for the system

Simplify your design for SVG creation. The Nucleus team can assist with this. Aim for minimal anchor points, no masks, no strokes, 2px minimum width of any part and combined and flattened vector artwork.

6. Submit for review

If possible, create a branch, add the necessary variants as code, and submit a Pull Request (PR) for review. Update the corresponding Figma UI Kit to reflect the additions and submit a branch for review. Assistance is available if needed.

Efficiency is key, so we aim to include multiple updates to the ns-icon and ns-illustration in each release. Once the PR is approved, it will be merged and scheduled for release. New Nucleus releases are announced through the relevant Teams channels.

This process ensures that additions are valuable, reusable, accessible, well-documented, and meet the high standards of the Nucleus design system.

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 for a team to proceed is to own as much of the work as possible. By doing so, they become self-sufficient and do not have to rely on the availability of other teams to pick up the work. However, if necessary, the Nucleus team can provide support to assist the team along the way.
• Check that there isn’t already a Proposal for the piece of work that is in mind. All Proposals can be found on the kanban board along with their status.
• Share design ideas as early and as often as possible with the community. Achieve this by using Nucleus Teams channels, or the Drop-in Clinique sessions. It will help refine designs to ensure they work for the wider community.
• If designing an improvement to a component, check to see if the existing version can do the job first. That will provide a control version and benchmark to test a design against and see if it adds value by improving the experience and any key metrics.
• The proposer is the driver. If someone proposes a change or an addition to Nucleus, then they are the person who will be championing it.
• To be customer-centred, every contribution should add customer value and improve their experience. Try to apply the ‘customer lens’ to every contribution.

Insights on existing Nucleus work

GitHub is used for any feedback related to Nucleus components and documentation. It helps provide a transparent track of all contributions and potential issues. Use GitHub to:

1. View the Proposals status.
2. Create bug reports.
3. Add a new Proposal (RFC) request for comments, as well as react or comment on existing feedback.

Suggestions for new Nucleus assets

Nucleus aims to grow without sacrificing quality.

1. Track and add suggestions for new assets in GitHub by checking the status of requests.
2. Feel free to explore the styles and assets provided to suggest new components.
3. Please make sure to submit experiments and learning. It helps when tracking potential variations and to roll out stable additions to all teams via Nucleus.

To understand how the Nucleus team works, visit The Nucleus process.

Feedback on anything related to Nucleus

Reach out to the Nucleus team on the Teams channels to receive feedback on your queries.

Events and updates

The Nucleus team understands that they don’t always have all the right answers, so they want to work together with the proposers and connect them with other teams dealing with similar issues.

• The Nucleus team can help host and facilitate sessions and workshops focused on current tasks as things progress. If they can help organise or be involved in something, do let them know.
• Like other product teams, the Nucleus team participates in weekly and monthly cross-team ceremonies.