Design system
Creating a foundation for a multi-brand design system
I played a key role in the initiation and implementation of the design system in Figma, ensuring a clear separation between functionality and branding. We established a neutral white-label brand to serve as the base for designing other brands.
Project goals
Creating a white-label design system that ensures consistent UI/UX across all e-commerce sites while allowing brand-specific customization.
Creating a scalable design system prepared for future growth, accommodating both small and large brands.
Align the design system to support the unique brand identities and business goals of each participating brand within GrandVision.
Theming
Implementing multi-brand theming in Figma
One of the biggest challenges was setting up the theming for all brands. The design tools weren’t ready for this, so we had to creatively adapt Figma. We created a new ‘neutral’ style guide with design tokens that could be applied to existing GrandVision brands.
Theming vs functionality
Separating functionality from theming allowed us to design centrally and switch between brands for stakeholder testing and validation. This system was used in both design and front-end.
Before Figma introduced Variables, we managed theme changes using Themer for all elements, components, and templates in the design system.
Design system
Streamlining development with detailed design system documentation
As a contributor to the design system, I was responsible for documenting theming options, interaction behaviors, and states. This documentation facilitated development and enhanced collaboration between designers.
Core features
Design and implementation of the core platform
Beyond design system work, I was part of the core development team, developing features for the design system and brands. I was responsible for designing, communicating with stakeholders, and conducting design reviews with the centralized team.
The core development team designed solutions for multiple companies, ensuring compatibility across languages and currencies was a major challenge. We ensured the design was modular and flexible to meet diverse e-commerce needs of brands.
Results
Within 3 years, the platform grew to 13+ online stores, all adopting the unified design language and front-end.
Credits
Helder Mota
Design Lead
Jan Mooij
Senior Front-end Engineer
Timo Westland
Senior Front-end Engineer
Deniz Kaya
Business Analist