Building a Comprehensive UI Kit in Figma for ANZ.com Designers to Establish a Unified Design System
Our design team lacked consistency as each designer worked differently without a shared UI kit in Figma. This led to significant variations in designs, resulting in inconsistencies across our websites. Additionally, without reusable components, our efficiency was hindered, making it harder to maintain a cohesive design system.
Situation
The challenge was that creating a UI kit was a massive undertaking. With no existing shared system, we needed to align on elements to include in the kit. This required mapping what we had in the style guide versus what was live in AEM, which was time-consuming and complex to organise.
Complication
To resolve this, we collaboratively chose elements to build out for the UI kit. I led the discovery and implementation of our grid system, hero banner solutions, and developed a home loan-specific icon set. After presenting our findings to the team, we built the components to live in the style guide, improving consistency and efficiency across designs.
Resolution
Documentation of the grid system in AEM and also the grid system in Horizon
Documentation of our hero banner components in AEM and built out wireframes of these components. Also imagery showing the built our hero banner component to align to AEM.
Created icon suite specific to Home loans based on the Horizon design system.