Bonfire

Outdoorsy is the new face of outdoor travel. We believe life’s best memories are made outdoors, so why put any barriers between you and experiences that last a lifetime? We go where popcorn ceilings, mini fridges, and marble lobbies can’t take you. We show you what can’t be seen from 30,000 feet above. The best way to get to know a new place is to fully immerse yourself in it and Outdoorsy offers an all-access pass to wherever the road takes you. We get you away from the city lights and closer to what you came for — that first breath of mountain air in the morning, the warm steam coming off your coffee, the crunch of gravel on the trail, the crackling laughter of family and friends as you share stories around the campfire. Outdoorsy encourages you to leave everything behind. (Except for the S’mores — bring those.)

Each of us connects personally to the idea of getting outside, escaping routine, and getting closer to the things that make us feel alive. We believe more time away from screens, traffic, and the trappings of modern life can change lives around the world.

We’re mobilizing the over 54 million RVs around the world, empowering RV owners to realize life-changing financial benefits, while ensuring everyone has access to safely enjoy outdoor travel. By doing that, we empower people everywhere to experience life’s best moments outside.

Design System Name

• Bonfire

Design System team size

• 5-10

Design System team make-up

• Designers
• Engineers
• Product Owner/Manager
• Content designer
• Brand

Governance model

• Federated

Products/brands covered by the design system

• 5-10

Adoption approach and means

We first identified the employees (prod, eng, des) that were most excited about the design system. These would be our owners & adoption advocates, we call them Bonfire Stokers. This is our secret sauce because adoption is about changing existing behavior. We needed people that were going to push these changes through. Once we had them identified, we built our system to be as easy as possible to adopt. Our mindset was that we wanted the usage of Bonfire to be easier than not using it. Once we had the system built, and open-minded employees driving adoption, it became much easier to implement on a per-project basis. However, what truly sets our adoption strategy apart is our emphasis on continuous learning and iterative improvement. We recognize that the adoption process isn’t a one-size-fits-all solution, and it evolves as the organization grows and changes. We consistently gather feedback from our adoption advocates and the wider user base to understand pain points, challenges, and successes. This user-driven feedback loop allows us to refine Bonfire and its implementation approach. We invest in regular training sessions, workshops, and knowledge-sharing events that empower our adoption advocates to become champions of the system. This collaborative approach not only fosters a sense of ownership among our advocates but also ensures that the design system remains relevant, user-friendly, and aligned with the evolving needs of our teams. Moreover, our approach to adoption extends beyond the initial implementation. We place a strong emphasis on documenting best practices, creating a comprehensive knowledge base (ZeroHeight!), and providing readily available support resources. This ensures that new team members can easily onboard, reducing the learning curve and encouraging wider adoption. In summary, our unique adoption strategy combines the power of passionate advocates, user-centric iteration, continuous learning, and ongoing support. By fostering a sense of ownership, making the system effortless to embrace, and prioritizing long-term usability, we create an environment where the design system becomes an integral part of our organization’s culture, driving consistent and successful adoption across various projects.

We employed two distinct adoption strategies. Given our startup nature and the limitations on time and resources for a comprehensive rollout, we’ve strategically directed our efforts toward net-new features and individual components. Our primary guideline is that any newly developed features must adhere to a minimum of 90% integration with our design system. This means that from the initial design phase to the final deployment, the entire process should rely on our design system and its associated tokens. It’s worth noting that in some cases, this approach might result in a product that seems “frankensteined” in certain areas. However, ultimate decision-making authority rests with leadership, who will determine whether such instances are permissible. Simultaneously, we are conducting a thorough review of our entire product, with a focus on upgrading individual components such as buttons, input fields, modals, and more. We are conducting these updates during gap time and lab days, which are our equivalents of allocated time for innovative pursuits (akin to the concept of 20% time). By concentrating on the refinement of our most frequently used components—like buttons—we aim to drive rapid and extensive adoption across our product.

Adoption lifecycle management

We considered the design system adoption got effective with the multi-themes experience. We use Figma Tokens as the foundation of our design system, which has enabled us to swiftly create distinct themes for various product lines. A great example of this occurred when our insurance division (Roamly.com) required a redesigned sign-up process. Leveraging the scalability of our design system, we rapidly developed a new theme using Bonfire. Existing components were slightly altered to adapt Roamly’s unique branding, however the core code snippets remained the same. This theme was created within a couple weeks, and was seamlessly embraced by the Roamly development team. This experience encapsulates the core essence of a design system—delivering speed and consistency at scale.

A significant step that drove the success of our design system adoption can be summarized as follows:

• Flexible Theming for Diverse Product Lines
  We achieved success by implementing a flexible theming approach that catered to the unique requirements of different product lines. This empowered separate teams to swiftly implement the design system according to their specific needs, enabling fast and efficient adoption.
• Streamlined Transition from Whiteboard to Development
  A crucial advancement was reducing our reliance on pixel-perfect designs. This enabled us to seamlessly transition from initial whiteboard sketches to actual development when necessary, minimizing bottlenecks and expediting the design-to-development process.
• Optimized Allocation of Design Resources
  A key aspect of our success was the strategic reduction in the demand for designer resources on various projects. This was made possible by identifying areas where developers could autonomously introduce net-new features without requiring constant designer input. This strategic shift multiplied our overall efficiency and productivity.
• Enhanced Efficiency for Developers
  A pivotal factor that contributed to our success was the integration of our design system with Figma. This enabled designers to seamlessly push changes, which would then automatically translate into real code. This integration significantly minimized communication breakdowns, allowing developers to concentrate on more impactful projects.

In the early months of 2023, our company faced the impact of layoffs—an experience shared by many tech firms. This reduced our resourcing and forced us to do more with less. Bonfire was seen as a huge benefit in this scenario. Adoption was accelerated as it streamlined our processes – DS components provided effortless drag-and-drop implementation, expediting feature development. Additionally, the integration of Bonfire reduced the need for extensive design QA, empowering developers to extract pre-built code snippets and allocate time more strategically. A transformative shift occurred as Bonfire seamlessly became an integral PED partner, catering to our entire team’s needs. Resource limitations made Bonfire adoption not just beneficial, but essential. The design system’s role evolved from a convenient tool to a fundamental requirement, enhancing efficiency and enabling our teams to navigate resource constraints adeptly.

Adoption results

Certainly, there are several pivotal measures that have driven our design system adoption:

1. Cultivating Belief in Simplicity
   The most significant stride was fostering a collective understanding that using Bonfire is inherently simpler and more efficient than avoiding it. This foundational buy-in triggered a commitment across the team to engage, enhance, and advocate for its usage. 
2. Empowering the Bonfire Stokers Team
   Our Bonfire Stokers team played a crucial role by vocalizing successes achieved through Bonfire and by spotlighting the enhanced efficiencies stemming from its implementation. This proactive communication effectively showcased the system’s value and the tangible benefits it brings to our projects.
3. Continuous Improvement
   A commitment to consistent improvement has been essential. We actively listed to our teams feedback and iteratively refined Bonfire based on that feedback.
4. Collaborative Learning and Training
   We facilitated comprehensive training sessions to ensure that each team member is proficient in using and updating Bonfire. Collaborative learning has been key to instilling confidence and competence in its usage, while also diversifying capable owners. In essence, our significant steps for design system adoption revolved around belief cultivation, proactive advocacy, iterative improvements, and comprehensive training. By embracing these measures, we’ve accelerated adoption and embedded the design system as an essential component of our work culture.

Our adoption process has significantly enhanced collaboration and communication across our teams in several ways: 

1. Shared Language and Consistency
   By adopting a unified design system, our teams now share a common design language and consistent user interface components. This eliminates confusion and ensures that everyone is on the same page when discussing design concepts or implementation details.
2. Streamlined Feedback Loops
   The design system serves as a visual reference that allows for clearer feedback and more efficient iteration cycles. Designers and developers can easily point to specific components or patterns, making discussions more focused and productive.
3. Reduced Communication Gaps
   With a centralized design system, the need for continuous back-and-forth communication is minimized. Developers can access design assets directly from the system, reducing the need for designers to create explicit specifications for each component.
4. Efficient Onboarding
   New team members can quickly familiarize themselves with the design system, which accelerates their onboarding process. This shared resource ensures that everyone is aligned from the start, reducing the learning curve and fostering quicker integration into the team.
5. Cross-Functional Collaboration
   The design system serves as a bridge between different teams, such as design, development, and product management. This encourages cross-functional collaboration as teams can easily understand and work with each other’s contributions.
6. Faster Decision-Making
   The design system establishes predefined guidelines for design and interaction patterns. This expedites decision-making processes, as teams can refer to established best practices rather than starting from scratch each time.
7. Easier Handoffs
   Handing off designs from designers to developers becomes smoother, as the design system provides ready-to-use assets and code snippets. This minimizes the chance of misinterpretation and reduces the effort required for implementation.
8. Scalable Workflows
   As projects grow in complexity, the design system allows the team more time for strategic communication, as opposed to tactical. Teams can confidently manage larger projects knowing that the components and guidelines are already in place.

​​One evidence to show our design system adoption’s success is when one of our developers had this to say: 

“From engineering, I would say consistency has improved a lot! Also, most engineers would say that building the UI is faster with the prebuilt components because the Storybook repo matches the Figma components.” 

We do not currently have a way to measure adoption. Instead, as a design director, I have routine 1on1s with various development stakeholders to gauge usage and concerns. Overall the feedback has been very positive and as stated above, adoption has allowed us to continue to scale with a reduction of resources.