A shared, cross-brand design system that would provide a cohesive foundation across multiple brand ecosystems
The goal was to create a flexible framework that could adapt to the unique identity and requirements of each brand while ensuring consistency, scalability, and efficiency across digital platforms. By applying the principles of atomic design, incorporating a dynamic token system, and emphasizing user experience, the design system was crafted to maintain the individuality of each brand while offering a unified and efficient structure.
Client
De'longhi
Support
UX/UI
Project Overview and Objectives
The objective of this project was to design and implement a shared, cross-brand design system that would serve as a cohesive foundation across three major brand ecosystems: Kenwood, De'Longhi, and NutriBullet. These brands, each with their own distinct identity and target audience, required a design system that could harmonize their individual needs while maintaining a unified approach to digital and visual design. The challenge was to create a system flexible enough to adapt to the unique guidelines of each brand, while ensuring consistency, scalability, and efficiency across all three ecosystems.
Laying the Foundations - Atomic Design Principles
To achieve this goal, the development began with a strong foundation based on the principles of atomic design, a methodology that emphasizes a modular approach to building design systems. Starting at the atomic level, foundational elements such as colors, typography, and grid systems were created, forming the core of the design system.
Building the System - Molecular Design and Tokens
Next, the project moved to the molecular level, where more complex design patterns—referred to as "molecules"—were created to represent reusable UI components such as buttons, input fields, cards, and other interactive elements. These components were designed with flexibility in mind, ensuring they could be easily customized to fit the unique needs of each brand, without losing their underlying consistency. This approach not only made the design system more efficient but also ensured that any changes or updates could be implemented quickly and uniformly across all three ecosystems.
Examples of Cross-Brand Components
Login/registration User-Flow
User Experience and Long-Term Adaptability
Detailed user flows, mapping every interaction and scenario for the new layouts: This approach ensured a visually cohesive, user-friendly, and intuitive design system, anticipating potential challenges and providing a seamless experience across all brand ecosystems.
