Creating a multi-brand design system for Europe’s leading shopping engagement platform
A systematic method for providing consistent designs across different sub-brands.
Team
Product Managers, Design Lead, Product Designers, Engineers
Role
Product Designer - UX Audit, Design System
Timeline
Aug 2021 - Jan 2022
Tools
Figma, Jira, Slack
In close collaboration with Atolls, I helped develop a comprehensive design system that standardises components across a wide range of brands and touchpoints. This system ensures consistency in design, leading to reduced product design and development costs while maintaining a high quality user experience.
This approach enhances Atolls' customer focus and future proofs its design processes, helping partners integrate effortlessly and speeding up business growth.
Overview
Atolls, Europe’s leading shopping rewards company, provides a platform where international customers can market coupon content. Each brand gets a version that matches its unique design, with plenty of room for personalising the content.
To keep things consistent as the platform scales, a solid design system is key. It needs to adapt smoothly to more brands, stay flexible for personalisation, and still be built on reusable design standards to keep things efficient.
The Challenge
The Approach
1.
Review of the current product design
A review of existing design elements and the development of a system for effectively utilising core components. Although the product’s foundational design was already in place, it was refined, expanded, and enhanced throughout the project.
2.
Design system structure and language development
Due to the unusually high complexity of accommodating multiple brands, a more subdivided structure was created compared to standard design systems. Clear design principles were also established to set reusable standards.
3.
Creation of a component library
Add your pricing strategy. Be sure to include important details like value, length of service, and why it’s unique.
4.
Documentation
Comprehensive onboarding resources that include training videos, checklists, and written guides, along with hours of video material.
5.
Support in the process and system implementation
Establishing the design development process with support from the design system. Additionally, general standards were created for transferring designs into code development, covering aspects like naming conventions, versioning, and more.
6.
Collaborative cross-functional teamwork
The design system was developed in close collaboration with the internal Atolls team, which includes other Product Designers, Engineers, Product Managers, and Marketing and SEO Experts.
In this project, we developed a multi-brand design system that includes style guides for over 28 brands, along with page templates. We also created a central component database featuring a wide variety of core components and their variations. This library of reusable design elements enhances efficiency, consistency, and scalability when integrating new partner platforms or adapting existing designs.
Alongside these design elements, we put together comprehensive guidelines on creating and using design systems. These guidelines support our growing team of designers and developers by facilitating quick onboarding and ensuring that the system can be easily extended and managed in the future.
