Multi-Brand

Overview
The project focused on developing a flexible and scalable design system for a white-label banner ad tool used by the production team. The goal was to enable businesses to design, manage, and deploy customisable banner ads across multiple brands—such as Barclays, Mercedes, and Audi—while ensuring a seamless and consistent user experience.The process was structured into three key phases: Audit, Design Framework, and Template Build. The audit phase involved assessing existing banners and identifying shared components across different brands. The design framework was then developed in Figma, establishing scalable components and guidelines that could be applied universally. Finally, the template build phase ensured that teams could efficiently create and adapt banners while maintaining brand flexibility—without requiring Figma expertise.

Challenge

Several key challenges emerged during the development of the design system:Brand Consistency vs. Flexibility

1. The system needed to accommodate multiple brands, each with distinct visual identities, while maintaining a unified structure. Ensuring flexibility without sacrificing consistency was a significant challenge.Non-Designer Usability.
2. Non-Designer Usability – The production team, responsible for deploying banners, had limited experience with Figma. The templates had to be intuitive and easy to use, minimizing the learning curve and reducing dependency on design expertise.
3. Scalability Across Brands – Each brand had different requirements for layouts, typography, and color schemes. The design framework had to be scalable, allowing seamless adaptation across different brands without requiring extensive manual adjustments.
4. Component Reusability – Identifying common UI elements across banners and structuring them into reusable components required careful auditing and planning. Components needed to be flexible enough to accommodate variations while maintaining efficiency in production.
5. Workflow Integration – The existing ad creation process varied between teams, and integrating the new system without disrupting workflows required strategic planning, training, and documentation.

‍

Process

The development of the design system followed a structured approach, divided into three key phases: Audit, Design Framework, and Template Build, ensuring a scalable and efficient solution for banner ad creation.

1. Audit
   The first phase involved assessing existing banners across multiple brands to identify common patterns, shared components, and inconsistencies. This analysis helped establish a foundation for standardizing key elements while allowing for brand-specific variations.
2. Design System Creation in Figma
   Based on the audit findings, a wireframe-based design framework was developed in Figma, defining scalable components, typography styles, color systems, and layout guidelines. This framework ensured consistency across different brands while maintaining flexibility for customization.
3. Template build
   The final phase focused on template creation, using both Figma and Celtra, depending on the type of banner, static banners were built in Figma, providing a structured and reusable design system for quick customization and animated banners were created in Celtra, ensuring seamless motion design and interactivity while maintaining brand consistency.
4. ‍Documentation & Guide
   To ensure smooth adoption of the system, a SharePoint document was created as a comprehensive guide on how to use the design framework. This included detailed instructions on using templates, applying brand rules, and maintaining consistency in fonts, colors, spacing, and layout. The documentation provided teams with clear guidance, reducing the risk of errors and making the process accessible for non-designers.

‍

Outcome

The implementation of the new system improved the efficiency, consistency, and scalability of the banner ad creation process. The system provided a structured approach for designing static and animated banners, ensuring seamless brand management across multiple brands.

Key outcomes include:

• 50% Faster Banner Production – The structured framework reduced banner creation time, decreasing production effort from 2 hours to 15 minutes per banner.
• Brand Consistency with Flexibility – The system ensured each brand maintained its unique identity while adhering to a cohesive design structure, reducing design inconsistencies by 60%.
• 70% Reduction in Human Errors – By standardizing fonts, color combinations, padding, and layout rules, the design system eliminated common design mistakes, reducing rework and inconsistencies.
• 80% of Banners Created Without Designer Assistance – Templates enabled the production team to create and modify banners independently, reducing reliance on designers and allowing teams to deliver over 300 banners per month.
• Localisation at Scale – The use of Celtra’s Multitable allowed effortless localisation across 12 brands and 10 languages, significantly increasing efficiency in global campaigns.
• High Adoption of Documentation – A SharePoint guide provided a centralized reference for the design framework, with 90% of the team using it within the first month, improving onboarding and reducing training time.
• Scalability for Future Growth – The structured approach allowed the team to scale from 50 campaigns per month to 120 campaigns, supporting an increasing number of brand requirements.