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.
​
Conclusion
7
Months
92
Zoom Calls
200+
Interface Concepts
1
Design System
19
Podcast series
listened to whilst designing
