Bonfire is a multi-product design system built for speed and scale. Powered by tokens and an automated workflow.
Overview
Outdoorsy is an online marketplace for travelers to rent RVs and book campsites. Through a collaborative nine month engagement as a full-time embedded contractor, I architected a cross-platform design system from creation through development in addition to documentation and team training.
Details
Role
Product Designer
Client
Outdoorsy
Agency
Stay Gold
Year
2021
Outdoorsy’s product design team needed support translating newly defined art direction into their digital products. Due to siloed squads and lack of process, the team was dealing with conflicting visual styles, little consideration for accessibility and compounding technical/design debt – all leading to an inconsistent digital experience across the product ecosystem.
An atomic Approach
The primary deliverable for this project was an figma component library that can be used across platforms and products. Under the art direction of Kelsey Denison and Stay Gold and in tandem with features the internal design team had prioritized, I built fully accessible style foundations, and library of components and design tokens.
Token to Touchpoint
Design tokens fundamentally changed the working process for design and component creation. Using the Figma Tokens plugin as a central style repository empowered members from both design and development teams to make changes to token values and see the updates reflected in Figma and Storybook.
Themes
Product themes for both Outdoorsy and Roamly were quickly created using the same plugin. With just a handful of new tokens it was possible to stylize the base components for both brands and successfully deploy them for marketing pages and product flows for each.
Documentation beyond Design
To ensure adherence and adoption, standards were documented in ZeroHeight for everyone across the organization to see. The result is a dedicated place for all disciplines to document process, share examples and link resources. This effort earned Bonfire a finalist spot in the 2023 ZeroHeight Design Systems Awards.
Team Training
After development hand-off, the design team was onboarded to manage the system. I led weekly training and education sessions for the designers and design director around figma functionality, atomic components, and token/theme creation and implementation.
☼ Kind Words