A shared, cross-brand design system that 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.

Brands involved

De’Longhi, Kenwood, Nutribullet

Role

UX/UI Designer

Toolset

Figma, Auto Layout 4.0, Design Tokens, Agile

Year

2025

Examples of Cross-Brand Components

Design Process

The design phase followed a structured yet pragmatic approach, adapted to tight deadlines and evolving priorities. We focused on building a scalable, cross-brand system while keeping delivery efficient and consistent. Here's how we approached it:

1. Initial UX/UI assessment
   We started by analyzing the existing user interfaces and identifying patterns, inconsistencies, and areas of improvement. This helped us quickly define priorities and align the design direction with business goals.
2. Component audit and system scope
   A full audit of existing components across all brands helped us understand the overlaps, redundancies, and inconsistencies. This was essential to define what could be reused, what needed redesigning, and what was missing entirely.
3. Designing flexible UI components
   We created new components—buttons, forms, modals, and more—with consistency, accessibility, and cross-brand flexibility in mind. Each element was designed for reuse and adaptation in Figma.
4. Creating a structured token system
   We introduced a robust set of design tokens for core values like colors, spacing, typography, and border radii. This made future updates faster and ensured visual consistency across the brands.
5. Building a responsive, scalable component library
   Leveraging Auto Layout 4.0 and Variants in Figma, we built a responsive component library designed to scale efficiently. This reduced duplication and made updates quicker across screens and products.
6. Collaboration with development
   We maintained a continuous dialogue with developers to ensure designs were feasible and easy to implement. This reduced friction in handoff and allowed components to be built in code more efficiently.
7. User flows and high-fidelity wireframes
   For key customer journeys, we produced complete user flows and high-fidelity wireframes. These served as visual specs for developers and helped validate interaction logic before development.

Real-World UX Redesign Examples

System Foundations & Impact

The backbone of the new system was based on the use of design tokens, which were instrumental in creating a scalable and flexible architecture. Tokens allowed us to standardize core properties (colors, typography, spacing, etc.) and make the system easily adaptable for all future updates.

Highlights:

• Cross-brand consistency: The layered token structure allowed for each brand to maintain its unique identity, while ensuring a unified approach to design across all platforms.
• Component library: We built a library of reusable components, each designed with flexibility and reusability in mind. These components came with full variants and responsive behavior.
• Efficiency for developers: The design system helped reduce the time developers spent on code duplication and fixing alignment issues between design and implementation.
• Future-proofing the system: We ensured that introducing changes—whether it’s a color update or new component behavior—would be quick, centralized, and low-risk.

Accessibility Considerations

Accessibility was a core priority throughout the creation of the design system. However, due to tight deadlines, it was not possible to conduct in-depth testing on every individual component. Nevertheless, we implemented several key accessibility principles and practices to ensure an inclusive experience for all users, in line with the latest WCAG 2.2 (Web Content Accessibility Guidelines) and accessibility regulations.

Implemented Accessibility Practices:

• Color Contrast:
  Colors used for text and backgrounds adhere to the WCAG AA minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. We also ensured that color choices considered visual accessibility needs, including the requirements for users with color blindness.
• Visible Focus States & Keyboard Navigation:
  Every interactive element, such as buttons, links, and input fields, has a clear, visible focus state for keyboard users (e.g., borders or shadows to highlight selected elements). The keyboard navigation was tested and optimized to ensure users are never "stuck" and can navigate freely through all interactive components.
• Text Contrast & Dynamic Visibility:
  Dynamic text (e.g., tooltips or pop-ups) was designed with high contrast to remain legible even on complex backgrounds. Additionally, animated content and transitions were made disablable for users with visual impairments or those sensitive to epileptic seizures.
• Text Formatting & Structure:
  We ensured that text formatting was clear and consistent, using appropriate headings, subheadings, and bullet points to improve readability. The fonts used are easy to read and can be resized without losing functionality or readability.
• User Feedback:
  Error messages and confirmation notifications were designed with clarity, providing visible descriptions for users and voice notifications for screen reader users. Every action or error state is clearly communicated through text or visual indicators, with special attention to visual and cognitive accessibility.
• Accessible Forms & Inputs:
  Forms were designed to be easy to fill out for users with varying abilities, with clear, legible labels. Input fields have detailed descriptions, both visible and accessible via aria-describedby when needed, to improve the experience for blind or low-vision users.

Explore the Interactive Prototype

Testing & Retrospective

Given the tight deadlines, extensive user testing was not feasible for every component. Despite this limitation, continuous feedback from internal teams—including UX designers, developers, and CRO experts—played a crucial role in validating design decisions and ensuring the system’s effectiveness.

Although we lack precise metrics on time saved during development or formal accessibility testing, qualitative feedback from developers highlighted improved clarity and consistency in component usage, which translated into smoother handoffs and fewer alignment issues between design and implementation. This suggests a positive impact on development efficiency, even if not formally measured.The design system was successfully adopted across all three brands, reinforcing its scalability and adaptability in a live environment. While some compromises were made—particularly regarding in-depth accessibility testing—this project established a solid foundation for future improvements and more rigorous validation processes.

If given more time and resources, future iterations would prioritize accessibility testing and broader user validation to ensure an even more inclusive and user-centered design system.

Summary

This project proved the power of a well-structured design system, where tokens, collaboration, and iteration worked hand-in-hand to create an efficient, scalable solution. By aligning design decisions with technical implementation, we ensured a system that will serve De’Longhi’s brands well into the future, with the flexibility to evolve with emerging needs and trends.

Archive 2018/2025

⚡️ Designing thoughtful experiences , one pixel at a time

Let's keep in contact

Linkedin

Dribble 

Behance

2025 © Renato Cutillo