Overview

Lloyds is the UK’s largest retail banking group with over 30 million customers. They recognized the need to enhance its digital presence and improve the user experience across its various platforms. The goal was to create a cohesive and consistent design language that not only addressed current usability issues but also laid the foundation for future digital innovations.

As a Ul/UX designer within Lloyds Banking Group’s Design System Team, I was involved in the development and implementation of the dynamic multi-brand, multi-platform design system across the business. My primary focus revolved around creating and maintaining our component libraries whilst collaborating with cross-functional teams to ensure successful implementation and ongoing improvement of the design system. Other key responsibilities involved creating interactive prototypes and conducting usability tests, prioritizing accessibility, documenting components with clear usage and collaborating closely with developers for successful implementation.

Accessibility

Working in a bank, ensuring the accessibility of all designs was crucial. We received continuous support from AbilityNet, who invested considerable time testing our components and assisting in enhancements. Additionally, we benefit from a bi-weekly drop-in session by the Digital Accessibility Centre, providing expert guidance. Consequently, all our components meet the WCAG 2.1 AA accessibility criteria.

User contribution

Initially, we lacked a structured mechanism for providing input back into the system. However, it became apparent that there was a need for a board dedicated to logging bugs, issues, and requests. Additionally, we embrace code contributions on GitHub and actively encourage teams to contribute thoroughly tested components.

Advocacy

Initially, our product, Constellation, was relatively unknown, and there was a substantial effort to promote awareness and communicate its offerings.
We conducted weekly drop-in sessions for developers and designers utilizing our code, fostering discussions, receiving feedback, and reinforcing the understanding of components.

Conclusion

The design system implementation has brought significant benefits, notably cost savings and improved collaboration between designers and developers. Standardized components have streamlined workflows, reducing time and resources spent on repetitive tasks. This not only saves costs directly but also enables teams to allocate efforts more strategically.

The design system has played a crucial role in enhancing communication between designers and developers. A shared language and consistent design elements ensure a smoother handoff, minimizing misunderstandings. By providing a cohesive framework, the design system fosters a collaborative environment, resulting in a more polished end product.

In the past two years, the design system has led to substantial cost savings, with an estimated £7 million saved in design and build expenses for the bank. The positive impact extends beyond efficiency gains, contributing to a more harmonious and productive cross-functional collaboration within the organization.