Project Details
For a long time, each of Lloyds Banking Group digital teams had been defining their own tools, templates and libraries when developing projects. While these teams followed the brand overall guidelines, a vast amount of elements weren't pre-defined which led to teams creating their own symbols and patterns according to the needs of the project at hand. This led to a considerable amount of user interface elements, styles and documentation that each team created and maintained for their own internal use. While all of them were visually aligned with the different brands in LBG, they weren't necessarily consistent across teams and projects, and over time it become a challenge to maintain all of these.
UDF, the Unified Design System
The main focus of the project was to design and implement a holistic design system that would provide a solid and robust design foundation for upcoming projects. The design system foundations layed out would be applied to all of the group brands, always making sure that the brands were consistent between themselves as well so as to provide an easier future upkeep.
The process
After collecting all the existing UI kits, style guides and assets, an inventory of existing components was conducted to identify inconsistencies and gaps between brands and in between the files themselves. Once all gaps were identified, the missing components to WIP UI kits for each brand were added. LBG's key stakeholders from each brand would feedback on a regular basis regarding key decisions.
A version of all UI kits was created so that it was aligned in structure and semantics across all brands. The kits content and components were not only visually aligned but they also followed the UX & Copy team recommendations regarding best practices and accessibility issues.
Before releasing the kits for wider use, they were subject to multiple accessibility reviews, a stress test by the team working on it, and a month-long private beta with some designers from the bank.
The UI toolkits delivered were highly refined and fine-tuned Sketch files which used advanced nesting and symbols for an efficient design and prototyping workflow.