Nucleus is the design system for the British Gas web experience, and so it was natural for Nucleus itself to take on some of the same branding and styling. As things have evolved and the system matures, we are looking to welcome other Centrica brands into using Nucleus and accommodating each brand’s unique styling.

It highlighted to us that Nucleus was looking like it was just about British Gas, and therefore styling it that way could be a poor reflection of our vision for a flexible, multi-brand design system.

The old Nucleus logo in British Gas style.

The task

The Nucleus design system needed its own distinct and separate identity – and that could start with the logo. We would retain the name Nucleus, but the existing logo utilised the British Gas ‘super-flame’, typography and colours and would need to change. Our goal was to reflect the way Nucleus operates and collaborates as a team.

Crazy 8s

We wanted everyone on the Nucleus team to be involved with the ideation stage so that we all felt like we had contributed to the result. This exercise has connotations with our process when creating components and making improvements to the design system – it’s all about a team effort.

Crazy 8s design sprint board.

So, the idea came about to facilitate a ‘Crazy 8’ session with team members. For those unfamiliar with the concept, taken from a typical ‘Design Sprint’, Crazy 8s is a fast sketching exercise that challenges people to sketch eight ideas in 8 minutes. The goal is to push beyond your first idea (frequently the least innovative) and generate varied solutions to your challenge. The sketches don’t need to be perfect or beautiful—they only need to communicate the idea. The ideas don’t need to be perfect either - the speed of the exercise helps quieten your inner critic, giving your creative impulses a chance to be seen without being filtered first.

Next, we all had a chance to explain our ideas and then we all had a vote for our favourite ones. It gave us the top 3 ideas to develop.

Early concepts

Early concepts stage.

We took the sketches and interpreted them in Adobe Illustrator - closely representing them and offering some evolutions to help identify the original intention where it may be ambiguous in the original. We also appended the existing typographic part of the logo (‘Nucleus Design System’) for context. Then these were presented back to the team for refinement. We then identified two plausible directions originating from 2 different team members.

Concept development

Feedback received, the next stage was to evolve the designs further, including,

  • Removal of the words Design System to just as Nucleus
  • Changed font to Centrica’s Helvetica Neue Bold Italic
  • Lowercase first letter hinting at the Centrica logo
  • Centrica colour palette and gradients application and exploration
  • Alignment to Nucleus icon grid
Concept development stage.

Aligning the Nucleus brand with Centrica and possibly taking some cues from it seemed to be an appropriate way to position Nucleus as an ‘umbrella’ to all the brands that might use it. There was further discussion when we presented these developments to the team.

Next, we took a look at the typography and how we might replicate the overlapping style used on the Centrica logo and explored a colourway that created visual parity between the centre of the icon (the nucleus) and the word for the first of the design directions.

Adjusting the typography and overlaps to reflect Centrica branding.

A misinterpretation challenge

When it came to evolving the second design direction, the team member who had the original idea highlighted that we had not interpreted their concept as they had in mind. Interested in correcting it, we followed it up with a further discussion to understand how to improve it.

Iterations born of further understanding.

Acknowledging the comments, we took this through the same sort of evolution as the first design direction (using Centrica colourways and applying the typography concept) in addition to alternative forms of the same idea to try and hone it in. One of these solved the issue.

Voting and feedback from the community

With two contenders on the table, we wanted to open things up to the community and get them involved - even if it only gained some exposure and engagement with Nucleus. After all, they are our customers. So we set about putting a poll together on Slack (where most of our users virtually reside) and spread the word that we wanted their vote. To give some explanation to the ideas, we also provided the initial rationale for each.

Community voting for their favourite.

Watching the votes and many comments come in was a very positive experience – it was surprising at just how close the voting was. After roughly a week we closed the poll. The results were in – design direction 1 won with 16 votes to 13.

Finessing

The voting was pretty close. Someone had commented about possibly using elements of one route in another. A round to finesse the design commenced.

Firstly, we took the winning design route and then reduced the number of sections in the outer ring from 8 to 7 to reflect the number of letters in the word ’Nucleus’. These sections also represent the outer part of the ‘atom’ (if you didn’t already know, we use the concept of ‘atomic design’ for our system, a nucleus being the central part) and also indicative of the different teams or brands that Nucleus can serve.

Colour combinations and finessing of the chosen route.

Then the colour combinations and gradients were explored a little further, bringing some of the 2nd place design elements (e.g. orange and pink hues of the outer ring) into the 1st place design. It worked well, playing complementary colours off each other and positioning the nucleus sphere’s gradient to a top-right light source in harmony with the slant of the typography.

Carefully proportioned and aligned final logo.

We enlarged the centre to give it more prominence and decided on the blue to give more impact and tie in with the text. We also experimented with hard and soft shines, and proportions of the individual parts of the logo, and the equilibrium of spacing and positioning – until we got it just right. The result corresponds with our principles of being modern and dynamic, clean and fresh, and warm and friendly.

What comes next?

So that’s how we created the Nucleus logo. It’s not a completed job yet, as we aim to roll it across our documentation and other items. (Maybe we’ll even print it on some t-shirts, or a mug!) As you might have guessed, a logo is not on its own a brand. It is a visual representation of it. There are many parts to a brand, how it operates from attributes through to personality and benefits. The Nucleus logo is just one part, and we aim to demonstrate and reflect our principles across everything that we do. We hope that you buy into that - there are good reasons we believe in these. Our brand is a living, breathing entity. We are our brand. We are Nucleus.