The Brief (in brief)
Design the new global digital
brand experience for Barclays.
My Role
Lead Designer 
My challenge was to create the new digital design language, look and feel of their apps and websites and deliver a thorough, flexible digital design system.
Barclays' old digital system was bland,
rigid and felt outdated, so I started building a brand new system from the ground up.

Step 1: Find a blue

For accessibility reasons, the Barclays Cyan can’t be used for interactive elements, and the existing ‘digital blue ’ felt dull and uninspiring. So I went on the search for the perfect on-brand, accessibility-passing blue. 

Chapter 1

The Blue

I created this concept app tool to easily test the different blues 

We shared the tool with Barclays employees to understand what worked. 

Click to try 4 of the favourite blues

After testing, tweaking, and competitor comparison, Active Blue was instantly loved by Barclays.

A confident new shade
 named Active Blue.

Colour. Coding.

As part of the brand refresh, over 20 new colours had been added to the palette. My challenge was finding an elegant way for designers and developers to use them in an beautiful but accessible way.

Chapter 2

Colour

As Barclay’s had never used colour in their interfaces, I experimented to find the best ways of infusing our vibrant new palette.

Colouring outside the lines 

This concept was a key in showing everyone the value of our new palette. It was surprising, unlike their competitors, and crucially - could pass accessibility tests.

What if we added colour to… everything?

Colourful backgrounds could get messy on hundreds of interfaces, but as cards are self-contained, they can add personality in a flexible, curated way. 

Learning that cards can add personality

Creating an elegant colour system

With 25+ colours, accessibility was a challenge. So I paired every colour with a contrasting accent colour, making it simple for designers and developers.

Test. Tweak. Repeat.

Using the Stark plugin for Adobe XD, I tested and refined hundreds of colour combinations until every colour pair passed WCAG tests. 

It’s what you can’t see

that has the most impact  

The colour system was tested to remove major inconsistencies for visually impaired and colourblind users

Dark mode in Midnight Blue

Instead of black or dark grey, surfaces and components switch to a bespoke Midnight Blue theme to harmonise with the brand palette. 

Meet The Portal.

Printed visuals by Carl Wills

The Portal, a flexible rectangular graphic that can unify or highlight content is a key part of the new Barclays identity. My job was to ensure it appears seamlessly on-screen.

Chapter 3

Graphics

The Portal now welcomes users, elegantly branding the very first moment

Illustrating Change 

To transition highly functional screens into delightful, branded experiences
I commissioned illustrations to add charm and context for users. 

Chapter 4

Illustrations

Looping animations
 bring illustrations to life

The future is personal

 I designed a UI card system that enables rich content across many formats. The system minimises dev. time, enabling more personalised experiences. 

Chapter 5

Personal Content

Cards enable millions of beautifully personal experiences

Many ways to interact

I explored voice and chat based visual interfaces to help future-proof aspects of the system 

Chapter 6

Conversational UI

A conversational interface

provides direct answers 

Barclays Blueprint

We created interactive guides and hundreds of live components, delivered as part of a new centralised design system library called Barclays Blueprint 

Chapter 7

Design System Library

A re-imagined main site
that guides new customers 

A giant side navigation lets users quickly find what they need. And the Portal helps transition between featured items.

The Portal can be used to draw the eye

Concept for Press and Investor website

Content automatically flexes for many 

audiences within the same app

This significantly reduces development time while enabling more personalisation 

Blueprint is being implemented on all new projects across Barclays globally.

The work was met
with overwhelming excitement, with both Barclays designers and leadership expressing love and gratitude for the new system.

Interface designs are part of a multi-phase roadmap which includes many innovate features and experiences.

A refreshed brand identity is rolling out and will dramatically modernise Barclays.

Adam Marsh (me)
Digital Brand Experience,
Design System, Interface Design,
and Interface animation
Carl Wills
Masterbrand Visual Identity Design
 
Song Yee Kim
Design System Library
Michelle Huang
Branded Illustrations
Alba Skottowe 
Illustration Animation

Conclusion

7

Months

92

Zoom Calls

200+

Interface Concepts 

1

Design System

19

Podcast series 
listened to whilst designing

Play led to new ideas and insights

Without fearless playing around, I would never have explored a concept like this one. And while we didn't move forward with this exact design, it provided invaluable learnings and insight, particularly around the importance of bringing in much more colour.

 © 2011-2022 Adam Marsh. All rights reserved.

 © 2011-2022 Adam Marsh.

All rights reserved.