Overview
Barclays Design Language program is a design system and UI code library used by internal product development teams to build Barclay’s digital products, on brand, with guaranteed quality and performance.
After multiple failed attempts to launch the program, I was asked to lead the program. My task was to launch it as fast as possible, get stakeholders onboard and push for adoption across as many software projects running in the bank at the time (roughly 150).
role
Design Director
Company
Barclays / Design Office
period
2014 - 2016
Process
Discovery
My first action was to identify and prioritise stakeholders. These were designers and developers on the Design Language team, brand guardians, owners of products most used by the bank’s customers, and tech and design lead of key projects in development across the bank. After meeting many, a few patterns emerged:
Brand guardians saw the expansive scope of previously proposed design language as a threat to consistency of the brand
Design Language team members struggled with easy and effective delivery of components and design guidance to other designers and developers in the bank.
Product owners didn’t see how they can use and adopt design language code and UX/UI patterns without hampering their own repositories and roadmaps.
Frontend and design leads were not excited about adopting design language code and UX/UI patterns because they did not feel part of the process.
MVP and further development
In response to these findings, I developed together with the design language team a 5 point plan:
Phase the design scope of the program - streamline the established UI style in the first phase, striking a partnership with brand stakeholders. Then launch a second phase to develop an up-to date, financially focused UI style.
Parse and deliver components and guidance in useful packs - initially enabling most required UI types (e.g. forms) and components used extensively (e.g buttons).
Kick start a collaborative UI and technical design process - inviting all the frontend and design leads across the bank to join regular open review sessions of design proposals and technical architecture considerations.
Establish a delivery cadence - set a rhythm of pack releases and publish a roadmap for the delivery of future packs.
Get an online portal hosting design language code and guidance up and running in the shortest time possible
‘Pack’ page mockup
Within three months, the team designed and built a portal and published the first packs.
Along the two years of my tenure, the program continuously evolved expanding components and design guidance scope, adopting an open source model for code development contribution. With in half a year form launch Design Language was adopted by 15 projects.
Web components overview page
component development process - global header
New language
As the program matured, attention could be allocated to raising the design benchmark. The strategic aim with this initiative was to reinforce the “goto bank” positioning Barclays was pursuing, by reinterpreting the brand’s digital expression as “made for financial UI”.
The exploration and style development process focused on key moments of the banking experience such as “Hello”, “pay someone”, “awaiting payment”, “checkin balance”. Three overarching themes served as path finders - “conversation with the customer”, “elegant input”, “insightful numbers”. These came through reflection and distillation of thinking going around in the broader design team at the time.