DESIGN SYSTEM
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.
For 3 years my role was to lead this initiative, by designing the foundations, creating a design community across all of the teams within the company and scaling a front-end dev team to bring it all to reality.
The output consisted of a Figma component library, guidance website for designers and developers, a HTML, CSS, React, Angular, iOS and Android library.
These elements were developed through extensive research and user testing to ensure that they would be effective in meeting the needs of Barclays' diverse audience.
Foundations
The first step in implementing the design system was to define the core elements of the design language, including typography, colour palette, iconography, and grid system.
Community
I then formed a design community of designers and engineers from different brands at Barclays together to create an open-source Figma library and code base.
Guidance
Once the core elements were defined, the team developed a comprehensive set of guidelines that detailed how to use them consistently across all digital products, from websites to mobile apps.
The guidelines also included best practices for accessibility, usability, and performance, ensuring that the design system would deliver a seamless user experience for all users.
