Barclays – Design system
Barclays, one of the world's leading financial institutions, realised that it needed a cohesive and consistent design language to communicate its brand identity and improve the user experience across all of its digital products.
I was tasked to turn this into an atomic design system in Figma, build a relationship with engineering to create this in HTML/CSS, iOS and Android, spread the word across digital ad brand departments and create a community across the bank.
Core team
Design Lead – Matthew Higgins (me)
Senior Designer – Cherin Sanih
Engineering Lead – Dan Head
Researcher – Adam Bradley
Impact
Designed and built a fully fledged design system across multiple brands in 2 years. Become the go-to and only design system across the bank.
0 UI defects when QA’ing the first project using it. A first for Barclays.
Brought together a design community across the bank to unify our approach on design.
Design teams able to rapidly prototype concepts at speed not seen before.
No customer will ever see your Figma file.
Designers can get hung up on pixel perfect Figma files, which I don’t disagree with. Pixel perfect design files should be a given, so once at a ‘good’ point, my energy swiftly pivoted to ensuring the build was on point. Managing the front-end dev team allowed me to do so. We also created detailed documentation for both designers and developers to ensure it was being used correctly.
Creating an open culture and design community
Iterating and expanding the design system isn’t something two designers can maintain long-term for 4+ brands and nor should it be. So I created a community of design from across all the different brands within the bank. Having a representation from both design and engineering for each brand ensured everyone had a voice.
We aligned on patterns, coding principles, the name of the design system and much more. The concept of “UI us flexible, but the UX is consistent” was a design principle we all agreed on aimed to achieve consistency and familiarity for anyone using our experiences.
