Roadtrip Design System: Scaling Design at Norauto

As part of my work at Norauto, I led the creation and implementation of the Roadtrip Design System, a comprehensive and scalable design system designed to unify experiences across multiple brands and countries while ensuring accessibility, governance, and seamless design-to-code workflows.

1. Foundations & Governance

Design Tokens Architecture

I established a robust design token system based on the DTCG standard (Design Token Community Group) to manage:

• Colors and color palettes
• Typography scales
• Spacing and sizing systems
• Light/dark mode theming

Multi-Brand & Multi-Country Theming

Built a flexible theming system to support Norauto's diverse market needs:

• Multi-brand support: Adaptable tokens for different brand identities
• Localization-ready: Country-specific variations while maintaining global consistency
• Theme switching: Seamless transitions between light and dark modes

Design System Governance

Implemented structured rituals to ensure sustainable growth and alignment:

• Weekly Design System Reviews: Regular sync meetings between designers and developers
• Request tracking: Centralized management via GitLab/Jira
• Decision logs: Transparent documentation of changes and rationale

2. Contribution & Collaboration

Clear Contribution Process

Established a four-step workflow for contributing to the design system:

1. Proposal: Submit an issue in Figma or GitLab describing the need
2. Co-design Workshop: Collaborative sessions with designers and developers to explore solutions
3. DS Committee Validation: Review and approval by the design system core team
4. Integration & Documentation: Implementation and comprehensive documentation

Cross-Team Alignment

• Multi-BU Workshops: Regular co-creation sessions bringing together stakeholders from different business units
• Local-to-global alignment: Ensuring local market needs integrate with the global design vision
• Open feedback loops: Continuous improvement based on team feedback

3. Documentation & Accessibility

Centralized Documentation Hub

Created a comprehensive documentation ecosystem spanning:

• Storybook: Interactive component library with live examples
• Figma: Design specs and usage guidelines
• Internal site: Centralized knowledge base

Documentation Content

• Component guidelines: Detailed usage instructions for every component
• Accessibility rules: Preparing for the 2030 accessibility law compliance
• Do's & Don'ts: Visual examples showing correct and incorrect usage
• Search functionality: Fast onboarding with intelligent search across all documentation

Accessibility-First Approach

• WCAG compliance checks integrated into the workflow
• Color contrast validation tools
• Keyboard navigation patterns
• Screen reader compatibility testing

4. Tools & Automation

Custom Figma Plugins

Developed specialized Figma plugins to streamline workflows:

• Token export plugin: Direct export of design tokens from Figma to GitLab
• UI Specs generator: Automated generation of developer-ready specifications
• Component sync tools: Keep Figma components in sync with code

CI/CD Pipelines

Implemented automated pipelines for:

• Token synchronization: Automatic sync between Figma variables and codebase
• Component generation: Auto-generate UI components from design specs
• Storybook stories: Automatically create Storybook documentation from components
• Version control: Track changes and maintain design system versioning

5. Experimentation & Innovation

User Testing & Validation

• Regular user testing: Continuous validation of key components with real users
• Prototype testing: Figma prototypes tested before implementation
• A/B testing: Data-driven decisions on component variations

Continuous Improvement Loop

• UX Research integration: Insights from research directly feeding system improvements
• Internal analytics: Track adoption and usage patterns
• Feedback mechanisms: Structured ways to collect and act on team feedback
• Iterative refinement: Regular updates based on real-world usage

Impact

The Roadtrip Design System has enabled Norauto to:

• Accelerate development: Faster time-to-market with reusable, tested components
• Ensure consistency: Unified experiences across all touchpoints and markets
• Scale efficiently: Support multiple brands and countries from a single source of truth
• Improve accessibility: Proactive compliance with evolving accessibility standards
• Foster collaboration: Stronger alignment between design and development teams

✨ The Roadtrip Design System represents a holistic approach to design systems—combining technical excellence, governance, collaboration, and innovation to serve the needs of a complex, multi-market organization.