Introduction

Nucleus is here to enable teams across British Gas deliver consistent, accessible experiences that delight our customers.

We are flexible to change, and use shared success criteria for decision making and prioritisation.

This is an inclusive, community driven design system. In order to help deliver this, we hold ourselves accountable and measure ourselves against these principles:

• Accessibility principles
• Experience principles
• Creative principles

Accessibility principles

At 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 plug-ins such as Flash.

The four accessibility principles (POUR) are derived straight from WCAG 2.1. For each principle, WCAG provides in-depth documentation and guidance. Below, we’ve restated the principles as well as provided bit of background into Level AA conformance.

Our 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 users 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:

1. A is viewed as the minimum level of requirement which all websites, apps, and electronic content such as documents should adhere to.
2. 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.
3. 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.

Our aim is 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, our 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

Our five experience principles describe the core values that underpin our Nucleus Design System.

Tailored to individuals

We tailor our experiences to the individuality of each customer and channel they might appear in. We use data and insights to understand our customers’ needs and use personalisation and smart technologies to predict and act, not react.

• If we know a customer’s name, we prefill their details.
• We don’t promote products customer’s already have.
• We don’t use a “cookie-cutter” to create our designs. We 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 you are writing – would you say this to your mum?
• Our code and content are optimised for screen readers.
• Learn about different types of barriers (physical, cognitive, sensory limitations that can be either temporary or permanent).

Always there

The relationship we have with our customers is a two-way conversation. We listen, we don’t just talk and 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 our Tone of Voice to sound human, reassuring and helpful.
• Webchat when a customer hesitates.

Make life simple

Our products and experiences should be simple, seamless and hassle-free.

We create them this way so our customers 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.
• Our designs are intuitive and our back-end systems do the ‘thinking’ – so customers shouldn’t have to.

Go beyond

We always go further than creating functional experiences by seeking out surprise and delight for our customers.

• The smallest gesture can make the biggest differences.
• Look at an experience end to end and understand where customers have come from and 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 our visual language from our creative principles.

Modern and dynamic

We’re a brand full of energy. Being modern and dynamic helps us lead the way to change how things are done in our industry, making sure our customers always feel in control.

Clean and fresh

At our heart, we’re a blue and white brand, we use the white space of a page in a considered way so our customers are never overwhelmed.

Being clean and fresh helps us show our content simply, so our customers can get what they need - and get on with their day.

Warm and friendly

We’re a brand with clarity, but we’re never clinical. Being warm and friendly helps us make a genuine connection with our customers.

How to use these principles

A key activity for us 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 we’re aiming for as British Gas. Identifying these differences is not always easy, but that’s where principles can be of use to your team.

• 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.