LEGO - Internal Design Library System
LEGO - Internal Design Library System
LEGO - Internal Design Library System
Role
Design System Designer, Product Designer, UI Architect
Role
Design System Designer, Product Designer, UI Architect
Role
Design System Designer, Product Designer, UI Architect
Collaborators
4 Designers, 4 Frontend Engineers, 1 Product Manager
Collaborators
4 Designers, 4 Frontend Engineers, 1 Product Manager
Collaborators
4 Designers, 4 Frontend Engineers, 1 Product Manager
Timeline
Completed
Timeline
Completed
Timeline
Completed
Tools
Figma
Tools
Figma
Tools
Figma
The Cars24 Global design system started as a standalone initiative but evolved significantly as multiple platforms and features were unified into a single ecosystem. This consolidation shaped the system’s direction, requiring updates to design tokens and the overall architecture to support new products and ensure consistency across experiences.
The Cars24 Global design system started as a standalone initiative but evolved significantly as multiple platforms and features were unified into a single ecosystem. This consolidation shaped the system’s direction, requiring updates to design tokens and the overall architecture to support new products and ensure consistency across experiences.
The Challenge
Every time we started a new project or started a new phase of the project we were creating projects from scratch. This would mean setting up a new components library each time.
This meant we were designing the same components over and over again with the style changing each time to suit functionality. We needed to: 1. Recreate old components 2. Gather all old use cases and create use cases for each component
The Challenge
Every time we started a new project or started a new phase of the project we were creating projects from scratch. This would mean setting up a new components library each time.
This meant we were designing the same components over and over again with the style changing each time to suit functionality. We needed to: 1. Recreate old components 2. Gather all old use cases and create use cases for each component
The Challenge
Every time we started a new project or started a new phase of the project we were creating projects from scratch. This would mean setting up a new components library each time.
This meant we were designing the same components over and over again with the style changing each time to suit functionality. We needed to: 1. Recreate old components 2. Gather all old use cases and create use cases for each component
The Benefits
• It’s a single source to view components, patterns, and styles. • New changes for the same projects can be redesigned and managed at scale through the design system. • Design resources can focus less on tweaking visual appearance and more on complex problems/solutions. This ensures that the project and designs are consistent visually and functionally. • Ability to replicate designs quickly by utilising pre-made components and elements. • Reducing the need to reinvent the wheel and eliminating inconsistency. • Reduces wasted designs or development time around miscommunications.
The Benefits
• It’s a single source to view components, patterns, and styles. • New changes for the same projects can be redesigned and managed at scale through the design system. • Design resources can focus less on tweaking visual appearance and more on complex problems/solutions. This ensures that the project and designs are consistent visually and functionally. • Ability to replicate designs quickly by utilising pre-made components and elements. • Reducing the need to reinvent the wheel and eliminating inconsistency. • Reduces wasted designs or development time around miscommunications.
The Benefits
• It’s a single source to view components, patterns, and styles. • New changes for the same projects can be redesigned and managed at scale through the design system. • Design resources can focus less on tweaking visual appearance and more on complex problems/solutions. This ensures that the project and designs are consistent visually and functionally. • Ability to replicate designs quickly by utilising pre-made components and elements. • Reducing the need to reinvent the wheel and eliminating inconsistency. • Reduces wasted designs or development time around miscommunications.
The Approach
We started with creating a style guide for the system. Luckily for us this one had already been done. All we needed to do was implement any new changes or elements to the system and link the existing style guide.
The Approach
We started with creating a style guide for the system. Luckily for us this one had already been done. All we needed to do was implement any new changes or elements to the system and link the existing style guide.
The Approach
We started with creating a style guide for the system. Luckily for us this one had already been done. All we needed to do was implement any new changes or elements to the system and link the existing style guide.
The style guide consisted of:
• In-page annotations (how we document and layout each component within the library) • Branding (colours, typography (Web & Mobile, Logos) • Spacing guidelines • Layout grids • Icon pack • Border radius guidelines
These style guides are incorporated into the component library as well, to provide relevant guidance in context.
The style guide consisted of:
• In-page annotations (how we document and layout each component within the library) • Branding (colours, typography (Web & Mobile, Logos) • Spacing guidelines • Layout grids • Icon pack • Border radius guidelines
These style guides are incorporated into the component library as well, to provide relevant guidance in context.
The style guide consisted of:
• In-page annotations (how we document and layout each component within the library) • Branding (colours, typography (Web & Mobile, Logos) • Spacing guidelines • Layout grids • Icon pack • Border radius guidelines
These style guides are incorporated into the component library as well, to provide relevant guidance in context.
Components & Patterns
The components now utilize properties more efficiently. The previous iteration of the design system had components with vaugue properties called “color”, which made it unclear when designers should use each option. This led to components like button appearing differently across different applications.
In the new system, component properties are role-based. Designers choose between tones such as 'brand' or 'destructive' based on use case. The type property determines emphasis between 'primary', 'secondary', and 'tertiary'. Properties like these are consistent across products and components come with usage guidelines on how to use them.
Components & Patterns
The components now utilize properties more efficiently. The previous iteration of the design system had components with vaugue properties called “color”, which made it unclear when designers should use each option. This led to components like button appearing differently across different applications.
In the new system, component properties are role-based. Designers choose between tones such as 'brand' or 'destructive' based on use case. The type property determines emphasis between 'primary', 'secondary', and 'tertiary'. Properties like these are consistent across products and components come with usage guidelines on how to use them.
Components & Patterns
The components now utilize properties more efficiently. The previous iteration of the design system had components with vaugue properties called “color”, which made it unclear when designers should use each option. This led to components like button appearing differently across different applications.
In the new system, component properties are role-based. Designers choose between tones such as 'brand' or 'destructive' based on use case. The type property determines emphasis between 'primary', 'secondary', and 'tertiary'. Properties like these are consistent across products and components come with usage guidelines on how to use them.
Collaboration & Handoff
To transform this UI kit into a real design system, we exported the variables and created a code repository documented in Storybook. Designers use the Figma UI kit while developers can reference the exact same components in Storybook for the code.
The Cars24 Design System is an ever-evolving product. Our team actively monitors collaboration between designers and developers to identify areas for improvement. With each new product adoption, we uncover fresh challenges and adapt the system to ensure scalability, consistency, and efficiency across all platforms.
Collaboration & Handoff
To transform this UI kit into a real design system, we exported the variables and created a code repository documented in Storybook. Designers use the Figma UI kit while developers can reference the exact same components in Storybook for the code.
The Cars24 Design System is an ever-evolving product. Our team actively monitors collaboration between designers and developers to identify areas for improvement. With each new product adoption, we uncover fresh challenges and adapt the system to ensure scalability, consistency, and efficiency across all platforms.
Collaboration & Handoff
To transform this UI kit into a real design system, we exported the variables and created a code repository documented in Storybook. Designers use the Figma UI kit while developers can reference the exact same components in Storybook for the code.
The Cars24 Design System is an ever-evolving product. Our team actively monitors collaboration between designers and developers to identify areas for improvement. With each new product adoption, we uncover fresh challenges and adapt the system to ensure scalability, consistency, and efficiency across all platforms.
Evolution & Next Steps
Evolution & Next Steps
The Cars24 Design System continues to evolve—adapting to new products, improving accessibility, and expanding documentation to ensure long-term scalability.
The Cars24 Design System continues to evolve—adapting to new products, improving accessibility, and expanding documentation to ensure long-term scalability.
