Phase 1: Audit & Research
The project’s main objective was to enable the ButcherBox team—engineers, product designers, and product managers—to speak one design language. Meeting this goal required understanding the different needs of each group and creating a library that could serve a variety of users while ultimately streamlining the design process.
Audit Findings Example
Upon diving in, the project began—like many do—with comprehensive research:
Design Audit: Every aspect of the existing experience was examined by reviewing Storybook, staging sites, production sites, and file structures. Any discrepancies across environments, accessibility concerns, or unaccounted-for states were documented for later resolution.
Listening Tours: Key stakeholders were interviewed to pinpoint their unique requirements, recurring pain points, and makeshift solutions. Armed with this insight, the focus shifted to creating an underlying system of tokens—a critical element for success, particularly for engineering teams.
Phase 2: Design
Because engineers often had to guess at the intended updates when designs didn’t align one-to-one with the live environment (e.g., padding, gap spacing, corner radii), work began on tokenizing those core values from the outset. A standardized 4px-based padding scale was established, including slight variations for the bottom and top end values, ensuring new components stayed consistent with production.
Variable Structure within Figma
Responsiveness was similarly prioritized. Three variable modes were introduced to account for the site’s breakpoints, eliminating the need to design multiple layouts for every screen size. By baking responsiveness into the components themselves, the system reduced complexity and sped up testing.
Color tokens were also designed with precision. An initial variable palette was created and then threaded into a secondary set of component-level variables, allowing the brand to evolve while still indicating each color’s intended purpose. Visual elements like strokes and shadows received distinct tokens, ensuring a single tweak (for instance, a stroke color for a focus state) could be managed without effecting unintended elements.
Slotted Component Structure
After finalizing this framework and validating it with the team, work moved to the next level, the component build-out. Some components had straightforward use cases, but others—like cards—were inherently flexible and needed to reflect that modularity in Figma. Slotting proved invaluable: each card included a predefined set of slots, mirroring the production environment. Designers could seamlessly swap in various content elements based on use case, while engineers had a clear structure when bringing these new layouts to life.
Phase 3: Documentation
With the library components completed, the focus turned to documentation—especially important given the temporary nature of the role at ButcherBox. The goal was to leave behind a well-documented system that teams could easily reference and update.
Confluence Documentation Process, Figjam Process Brainstorming Session, Figma Library On Page Documentation
Library layout: Each component page featured “parts,” “component,” and “examples” sections, along with a header capturing who made the latest edits, when those edits occurred, how the component was typically used, and a direct link to its Storybook instance.
Component Level Descriptions: Additional detail clarified what each component included and how it was commonly utilized. This was particularly valuable for “parts” components, ensuring teams understood where modifications should be made and how they might affect other components.
Update Process: Clear guidelines in Confluence explained how to request and approve updates. In Figma, branching allowed team members to be notified of proposed changes, ensuring no individual could push updates to the main library without the appropriate sign-offs.
Confluence Pages: Because the system supported multiple teams, embedding Figma components directly within Confluence gave non-designers a straightforward way to learn about and interact with the library. The use of Figma plugins kept everything in sync, minimizing duplicative updates.
Conclusion
Although the project continues to evolve with new features and accessibility enhancements, the design system has already demonstrated its value to ButcherBox. From thorough research and audits to careful tokenization, flexible component creation, and robust documentation, each step emphasized flexibility and consistency. As ButcherBox grows, it has a strong foundation built to adapt alongside it.