Design System
Multi-brand new design system adapted to the new branding.
Context
After the pandemic, the events industry shifted toward remote and hybrid events. The company decided to take this change as an opportunity to open up to a new market.
To be ready for this new market, we started by setting a solid foundation. The company invested in a rebranding to refresh its image and reflect this new era, and also decided to build a new product. To make this possible, it was necessary to create a new design system.
Challenge
The product needed to adapt to each client's brand while remaining scalable and under our control. At the same time, it was essential to maintain consistency with existing product functionality, ensuring continuity for current users.
The new system also had to work across multiple products, creating a shared and coherent experience between them.
A single design system supporting multiple brands and products, built to scale with control.
Design process
A structured process to build a scalable and consistent design system.
We conducted a full audit of all components across the different products. From this, we created a component sheet detailing all existing elements, identifying redundancies and opportunities for standardization. This phase gave us a clear picture of the existing ecosystem.
At this stage, goals, timelines, and priorities were defined to continue evolving the products while planning a gradual integration of the new design system. This allowed us to introduce changes without breaking existing functionality or disrupting current users.
We defined the visual language of the system, including layout systems, spacing, grids, breakpoints, color palette, typography, and tone. We also established naming conventions for components and tokens, aligned with the development team. This created a solid base, ensured consistency, and built a shared language across teams.
Work started with creating the tokens and redesigning the core components of the system. Close collaboration with developers from early stages helped build a solid design system and Storybook. Components and tokens were documented with clear usage guidelines.
All tokens, components, and layouts were built in collaboration with the development team. Progress was tracked using a table inventory, and components and layouts were carefully integrated into the product, replacing old ones without breaking functionality.
Key Outcomes & Results
Faster delivery across teams
enabling product and engineering teams to build and ship features more quickly through shared components and a unified system.
Reduced UI-related bugs
minimizing inconsistencies and errors by replacing incorrect or ad-hoc components and layouts with standardized ones.
Scalable multi-product foundation
allowing multiple products and brands to evolve on top of a single system while maintaining consistency and control. As white label!
If you're looking for a product designer or just want to chat about ideas, feel free to drop me a message. I'm always happy to connect.
Let's talk