Lloyds Bank
UK Banking first design system
What I did
Product Management
Product Strategy
Data analysis
User Research
Launched Feb 2018
Lloyds
Scottish Widow
Halifax
Product Strategy
Data analysis
User Research
Launched Feb 2018
Lloyds
Scottish Widow
Halifax
The goal
Lead the build of a design system for Lloyds, Halifax and Scottish Widow banks via a newly formed Design Ops team.
Living style guide
Governance
UI auditing
Design Principles
Ways of working
New Hire Onboarding
Community development
Accessibility Doc’s
Living style guide
Governance
UI auditing
Design Principles
Ways of working
New Hire Onboarding
Community development
Accessibility Doc’s
Mapping the design and tech landscape
Building a singular design system to serve four banks was a daunting task. To hit the ground running I documented the design and tech landscape. Using meet and greet sessions to define product owners ‘problem statements’. I later validated the product owners assumptions via interviews with developers and designers define the banks challenges from the different disciplines.
Our process: From discovery to launch
1
Define the design and technology landscape through interviews and problem statements.
2
Empathy mapping, interviews and audits transformed our hypothesis into tangible goals.
3
Creating prototypes and user interviews to test our products and processes.
4
Launching the design system in a product team to produce ‘real’ metrics and learnings.
Ed Bainbridge
Head of CX Design Studio, at Lloyds Banking Group
Head of CX Design Studio, at Lloyds Banking Group
‘It was great working with Derrick during his time building a design system at Lloyds. Derrick navigated a complex landscape of legacy systems, stakeholder management and design requirements, taking a hands on approach to any task needed to support his team. His blend of exceptionally strong design thinking, motivational leadership and bias towards action/execution was something many of us found inspiring.
Reviewing UI and design lanuages
Auditing design languages and researching competitors allowed us to further defined our problem statements. I managed the review sessions with design directors and leads highlighting the out comes to our stakeholders.
Quantifying inefficiency
Analysing each feature teams component library proved that asset duplication was rife across the banks.
Allocating tasks and workstreams
Collaborating with stakeholders, I defined the roles and work-streams needed to support the design system.
Reviewing UI and design lanuages
Auditing design languages and researching competitors allowed us to further defined our problem statements I managed each review with design leads and stakeholders.
This is Phil and Phil has legendary attention to detail.
This is Phil and Phil has legendary attention to detail.
Quantifying inefficiency
Team by team analysis proved that asset duplication was rife across the all banks.
Allocating tasks and workstreams
Collaborating with stakeholders, I defined the roles and workstreams needed to support the design system.
Making documentation sexy
I communicated our new onboarding processes via lightweight, living documentation. Eventually evolving our documentation into easy to read ‘comic book’ style guides.
Images created by Pablo Maroñas
Images created by Pablo Maroñas
UI, UX and Copywriting
Working with UX copywriters we created principles for the design system. Integrating ‘UX writing’ into our style-guide.
Evidence of new efficiencies
To prove ‘real world’ ROI we launched our new ecosystem with an internal project team. This collaboration helped us gather feedback, fix teething issues and share ‘success metrics’.
Rollout out across 3 banks
To scale the design system to 30+ teams, I created a automated self-service portal.
Paola MianiHead of Design Strategy Lloyds Banking Group
‘I had the pleasure of working with Derrick during his time at Lloyds. As Senior manager of the Design Systems team, he showed a deep understanding of the project and the company ecosystem. He learned quickly how to navigate stakeholders and build relationships with key areas of the business.
He is a fantastic person to work with, not only because of his technical experience, and his clear ability to understand the project requirements, but also for his human approach and unique style in everything he did.’
Key takeaways
Communicate in terms everyone understands and create centralised support docs for the complex stuff.
Break down silo’s and build relationships that you may be too busy to engage in, in a later phase.
Read some tips on creating a Design System here
Break down silo’s and build relationships that you may be too busy to engage in, in a later phase.
Read some tips on creating a Design System here