British Gas. Being brilliantly simple
Timeline
September 2023 – April 2024
Role
Branding & Design Lead
Responsibilities
Design, Branding, Accessibility, Behavioural Science Principles & Customer Testing
Tools
Figma, Adobe Photoshop, Miro, Adobe Illustrator, Nucleus Design System, Visual Studio Code, UserZoom
Challenge overview
British Gas were using a lot of gradients for design, digital components and within their primary colour palette which presented some accessibility challenges. One of their key brand elements was a ‘superflame’ that was a legacy brand asset that was being used across digital touch points which was leading to longer load times as well as making the brand feel a bit dated.
The desire was to make the new visual identity feel more modern as well as be bolder in it’s creative direction.
A digital first experience
Looking at photography, colours, typography and iconography, we aimed to refresh the visual identity to make it fit for the digital world as well as future proofing the British Gas brand. We also looked at content and how we could make our tone of voice brilliantly simple.
We changed our brand font to be more accessible for digital and screen readers as well as represent the friendly, human feel we were seeking to convey. I also set guidelines for photography to be real people in real situations in real light. The most important creative direction about our photography is that it’s believable, authentic and relatable.
Deliverables
branding & design
mobile-first designs
accessibility
email design system
Digtial UI refresh
By leveraging design thinking, accessibility, and behavioral science, I collaborated with the Brand team to spearhead the development of fresh layouts for our digital and print touchpoints. Through multiple concept iterations and thorough customer research, I refined my designs to consistently adhere to our creative principles:
Feel ‘human’ and create warmth in our designs
Embrace simplicity in design and messaging
Minimise cognitive load and emphasise visual hierarchy
Showcase our primary brand colour, ‘BG Cyan’
Utilise colour to direct attention and create saliency in key messaging
Visualise content through iconography and photography
Once the Brand team approved the new visual identity, I created comprehensive Brand and Design Guidelines for our communications and digital platforms. These guidelines were then shared across the the business to ensure alignment and consistency as a brand.
Creative principles
Building a design system
For our design requirements, we moved to Figma and l led on building out design systems for our digital channels to ensure brand alignment and consistency. It also allowed us to design and evolve our key elements in a more colloborative manner.
Introducing Behavioural Science
As part of our refresh, I brought behavioural science principles into our creative direction. I focused on using visual hierarchy, colour and white space to frame key messaging as well as reducing cognitive overload in our layouts.
Accessibility principles
Conforming to accessibility guidelines WCAG 2.1 AA, we moved away from having text in images and removed gradients from our colour palette. I promoted moving forward with solid colours and only using live text on coloured backgrounds where colours contrasted well.
User testing outcome
Once I had agreed our key creative principles, I undertook user testing. The feedback from customers was positive, commenting on how our new visual identity was clearer, more engaging and was using colour to call out different sections and messaging effectively.
