BT.com Design Guidelines

Introduction |  Notifications |  Grids |  Colours |  Typography |  Image Sizes |  Padding and Spacing |  Modals |  Icons |  Social Norms |  Dividers
Tables |  Package Selector |  Timelines |  Progress Indicator |  CTAs and Buttons |  Forms |  Tooltips |  Accordions |  Loaders | 

Introduction


Personal, simple, brilliant.

These are our brand values, and they set out how we do things and the experience we want to give our customers.

Our brand is a vital business asset. It’s the one thing we’ve got that our competitors haven’t, so it has to be at the heart of our digital experiences too.

That’s why we’ve set out twelve principles to help guide us in our design work. By keeping these principles in mind, we know that we’re not just producing great work – we’re reflecting our values too.



Make things simple, desirable and intuitive

Every interaction should do what the user expects it to do, and every page should do the one thing it is designed for, brilliantly. We believe in beautiful but ‘invisible’ design.
 

Don’t get in the way


There’s no need to over-design. We create simple, powerful interactions without unnecessary interruption. Always let the user do what they need to do without distraction.
 

Less is more


Less visual clutter helps our users to focus on the task in hand. Use white space to prevent the experience from becoming suffocating.
 

Think Mobile First

Experiences we design must work effectively across all devices, so we design for the most challenging device first – mobile.
 

Remember that the user is not like you

Connect to ‘real’ customers through research and testing to determine the right solutions. Best practice is fine, but everything we do should be based on evidence.

Avoid jargon

We give the facts first and only add more content where it enriches the experience, all presented in an engaging way to inform and direct our users.

Be consistent


We provide familiar interactions, a visual language, a tone of voice and standardized terminology so our users don’t need to think too hard.

Use responsive design

One size might not fit all, but one design can. Responsive web designs react to fit on a variety of screen sizes, so they always maintain the UX solution – and they’re easier to manage, too.
 

Always have empathy

 

We think about how people feel and what situation they might be in to create experiences that support and enhance their lives.

Be efficient

Performance and maintenance are always front of mind. Beautiful solutions that work quickly are easy to maintain and last longer.

Design to AA Accessibility Standards

Everything we design and develop is accessible. That way, we provide equal access, equal opportunity and equally engaging experiences for people with disabilities.
 

Be collaborative.

Two heads are always better than one. Working together across disciplines, bringing individual skills and ideas to the party, will always end with better results.
 


Component library

A library is being developed which will show in greater detail how each component looks and functions across all of our breakpoints. However, this guide will show all of the patterns that have been approved and tested.
 


Changelog


1.0.1



1.0.0