Principles
guidelines 
Introduction
Nucleus is here to enable teams across British Gas to deliver consistent, accessible experiences that delight our customers.
Nucleus is flexible to change and use shared success criteria for decision-making and prioritisation.
It is an inclusive, community-driven design system. To help deliver this, Nucleus hold themselves accountable and measure themselves against these principles:
Accessibility principles
At a minimum, features must conform to Web Content Accessibility Guidelines 2.1 at Level AA.
Accessibility ensures that all persons can access and benefit from a website, system or application, regardless of their gender, age, culture, or ability. Considerations must also be made around different screen sizes, browser types and settings, or those who do not have certain plug-ins.
The four accessibility principles (POUR) are derived straight from WCAG 2.1. For each principle, WCAG provides in-depth documentation and guidance. Below, these principles have been restated as well as provide a bit of background into Level AA conformance.
The Accessibility guidelines describe in further detail how these principles have been applied.
Perceivable
- Users must be able to perceive that information is available.
- Information becomes invisible if it can’t be perceived with any available senses.
Operable
- Users must be able to operate the interface.
- An action becomes unattainable if it relies on an interaction that a user cannot perform.
Understandable
- Users must be able to understand both the information and interface provided.
- A piece of content or operation becomes a burden if it goes beyond a user’s understanding.
Robust
- Users relying on user agents, including assistive technologies, must be served with compatible content.
- A piece of content or operation needs to be compatible with evolving user agents, including assistive technologies, browsers, and other applications involved in rendering content.
Conformance with accessibility principles
To rate how well an instance conforms to the principles, WCAG 2.1 provides three three conformance levels:
- A is viewed as the minimum level of requirement to which all websites, apps, and electronic content such as documents should adhere.
- AA is viewed as the acceptable level of accessibility for many online services, which should work with most assistive technology which is now widely available on both desktop and mobile devices, or which can be purchased as a third-party installation.
- AAA compliance is viewed as the gold standard level of accessibility, which provides everything for a complete, accessible offering, including all the bells and whistles which make the difference between a very good experience and an excellent one.
Nucleus aim to ensure Level AA conformance. Within Nucleus, this means that any new component needs to meet related criteria. However, content will change with each application of a component. To ensure accessibility, product teams will need to consider both visible content and its counterparts used by assistive technologies, such as screen readers.
In-depth documentation on accessibility straight from the source can be found in WCAG 2.1. Because each level of conformance includes ‘lower’ levels, any specific requirement labelled as A or AA applies to us.
Experience principles
There are five experience principles which describe the core values that underpin the Nucleus Design System.
Tailored to individuals
Experiences are tailored to the individuality of each customer and the channel they might appear in. Data and insights are used to understand the customers’ needs and personalisation and smart technologies used to predict and act upon - not to react to.
- If a customer’s name is known, prefill their details.
- Don’t promote products customers already have.
- Don’t use a ‘cookie-cutter’ to create designs. Create for the purpose, the customer, the device and the outcome.
Leave no one out
Inclusivity and accessibility are fundamental. No one should be left out. Ever.
- If in doubt, test it in the lab.
- Consider how the page will be read.
- Consider how how things are written. Is it addressing the right audience?
- The code and content are optimised for screen readers.
- Learn about different types of barriers (physical, cognitive, and sensory limitations that can be either temporary or permanent).
Always there
The relationship with customers is a two-way conversation. Listen, don’t just talk. Look to offer reassurance and expertise whenever and however our customers might need it.
- Guides, tool-tips and fast-serving links so customers have all the info they need.
- Use the brand Tone of Voice to sound human, reassuring and helpful.
- Webchat when a customer hesitates.
Make life simple
The products and experiences offered should be simple, seamless and hassle-free.
Creating them this way enables customers to have time to get on with what’s important in their lives.
- Take steps out where possible and strip back.
- Focus on one message at a time.
- Keep messages concise and clear.
- Designs should be intuitive and the back-end systems do the ‘thinking’ – so customers shouldn’t have to.
Go beyond
Always go further than creating functional experiences by seeking out surprise and delight for the customers.
- The smallest gesture can make the biggest difference.
- Look at an experience end to end and understand where customers have come from, where they are going, and what state of mind they are in.
- Terms & Conditions written in simple terms.
- Using thoughtful animation at the right time to add delight.
Creative principles
Building the visual language from our creative principles.
Modern and dynamic
The brand is full of energy. Being modern and dynamic helps lead the way to change how things are done in the industry, making sure customers always feel in control.
Clean and fresh
At heart, it’s a blue and white brand, use the white space of a page in a considered way so customers are never overwhelmed.
Being clean and fresh helps show content simply, so customers can get what they need - and get on with their day.
Warm and friendly
The brand has clarity, but it’s never clinical. Being warm and friendly helps make a genuine connection with customers.
How to use these principles
A key activity for Nucleus is to come up with new, alternative solutions time and time again to see what works best. Some of these solutions might be solid solutions in their own right but not quite fit the desired experience, accessibility criteria, or visual language being aimed for by British Gas. Identifying these differences is not always easy, but that’s where principles can be of use to teams.
- Ideate to provide constructive constraints.
- User research and testing to learn how these principles might best be met.
- During design and sprint reviews as shared evaluation criteria.
- As metrics to provide cross-team, cross-journey data.
- In analytics to track changes over time.
Last updated: