Design System Bonfire

Overview

Roadpass Digital operated five distinct products, each built on different technological foundations including React, React Native, WordPress, and Ruby on Rails. To address the challenges arising from this diversity, a cross-functional team developed “Bonfire,” a unified design system aimed at supporting all platforms, streamlining processes, and fostering consistency across all products.

Challenge

The company faced several critical issues:

• Individual product teams were reinventing solutions for identical problems
• Inconsistent user experience across platforms confused users
• Resource strain due to redundant efforts
• Difficult onboarding process for new team members
• Lack of shared design language hindering collaboration
• Multiple tech stacks requiring different implementation approaches
• Absence of engineering leadership support
• Limited resources and tight deadlines

Solution

The team developed Bonfire as a comprehensive design system with the following key components:

• Design tokens for centralized control of colors, typography, and spacing
• Bonfire Tailwind Plugin for quick implementation and cross-brand theming
• Library of 14 atomized components in Figma and Storybook
• Support for multiple tech stacks (React, React Native, vanilla HTML/CSS/JS)
• Open contribution model for company-wide participation
• Detailed documentation in Storybook and Figma libraries
• Accessibility-first approach in design implementation

Impact

The implementation of Bonfire delivered significant measurable results:

1. Efficiency Improvements:

   • 80% reduction in feature completion time per platform
   • Multi-platform support for 5+ platforms simultaneously
   • Reduced QA resource requirements

2. Adoption and Standardization:

   • 64% increase in design system adoption
   • Established as company standard with continued use

3. Accessibility Enhancements:

   • Reduced accessibility issues from 500,000+ to just hundreds

4. Financial Benefits:

   • Annual savings of $143,000
   • Design Team Savings: $54,600
   • Engineering Team Savings: $88,400

5. Collaboration Benefits:

   • Improved speed and efficiency reported by both design and development teams
   • Enhanced cross-team collaboration
   • Streamlined design and development processes