Overview
Audi UK was migrating to a new headless platform, Adobe Falcon, using Unified instead of React. This required a complete rebuild of the UK component library to align with the new design system developed by Audi Germany, which provided the Unified Kit and Icon library. The existing UK components were outdated, inconsistent, and incompatible with the new tech stack.
Business need: Create a unified, scalable library to ensure brand consistency across the UK site while speeding up development and reducing design errors.
The Solution: Delivered a comprehensive UK component library aligned with Audi Germany’s Unified kit. Produced clear documentation and onboarding guidelines for designers. Enabled content editors to implement components quickly within the new platform. Introduced new handover standards for developers, designers, and content editors.
Team
UX/UI Designer: Daniela Marini
Agency
BBH London
Period
2024
Component Documentation
Collaborating closely with the content team we've consolidated all component information in one accessible location. This centralized documentation makes design specifications and functionality easy to find, improving team alignment and speeding up decision-making across projects.
Device Breakpoints
Designing with mobile in mind from the start, we ensure that all components and layouts are optimised for mobile users. Updated breakpoints allow us to adapt desktop designs to mobile almost instantly, creating a seamless experience across devices while making the mobile experience feel as polished as desktop.
Colour variables
Integrated colour variables allow us to instantly switch between light and dark modes, letting us see and decide which themes work best together. This function maintains visual consistency across components while keeping the design adaptable to various viewing preferences.
Component Variations
With component variations available at a click, switching between states is effortless. This quick access keeps us adaptable and ensures we find the best design solution with minimal steps.
Integrated Car Library
A structured library of vehicle images and trims makes it easy to access the latest visuals for any model. Components stay up to date and seamlessly integrate with site tools.
Automated Exports
Automating our export process, allows for device specific resizing to be done with a single click. This eliminates manual adjustments, ensuring assets are consistently ready for use in seconds. By cutting down production time, we can focus more on creative work while keeping assets accurate and high-quality.