ButcherBox
Freezer 1.0 design system component sheets

ButcherBox - Freezer 1.0 Design System

My Role(s)
Lead designer
Systems vision
Visual design
Leading cross-functional workshops
Leading user research & stakeholder interviews
Documentation & process development
Stakeholder management
Problem

ButcherBox lacked a definitive source of truth for their product components, leading to sprint inefficiencies and uncertainty around design intent.

Result

A tokenized, accessible, and variable supported component library launched for all product teams at Butcherbox, decreasing time to ship across the full product.

Problem Deep Dive

Context & Problem space

The project required a unification effort towards many different workflows, up until this point there was no singular source of truth design library for product teams to work from. This often led to individual squads trying to match the existing system as closely as possible. Unfortunately that often caused storybook, staging, and production to fall out of sync.

Changes would be made from what product squads efforts but would not be effectively communicated to the others. The breakdown in process effected the full product pipeline as designs didn't match what was live and developers often needed to second guess many details when trying ship feature updates or additions.

System audit of the existing storybook and live experience
System audit of the existing storybook and live experience for inconsistencies and accessibility flags.
Results Deep Dive

Crafting a source of truth

By the end of the engagement I built a unified design library MVP within Figma utilizing tokens, styles and variables to keep everything in sync. In and outside of Figma the team defined robust documentation for each component along with a detailed process for system updates, additions, and workflow for approvals. In addition to this work I worked with the team to update areas of the product experience that were not meeting accessibility standards to meet WCAG 2.0.

Per component page layouts in Freezer design system
Per component page layouts in Freezer design system with showcase of custom built component slotting (pre-native Figma slot update)
Process documentation page in ConfluenceFigJam session mapping the system update flowComponent library layout in Figma
Process document in confluence, outlined visual flow for updates, per page documentation for components in the system.