Enter password to view project
Central Restaurant Products, E-Commerce Design System & Documentation
Central Restaurant Products is a B2B retailer of foodservice equipment and kitchen supplies. Shortly before I joined in 2022, an unexpected incident took the company's website completely offline. With the store down, the team launched an entirely new site in roughly two weeks. Given the urgency, it was the right call, but design took a back seat to getting back online.
After stabilizing, I rectified earlier, cursory design decisions by building the company's first design system: a Figma component library, a semantic token architecture, and a documentation site that became the single source of truth the product had never had.
The Problem
The emergency relaunch got the business back online, but the speed came at a cost. Over the following period, development changed hands three times. Each group brought its own conventions, and with no shared documentation, a lot was lost in the handoffs. The result was a patchwork site assembled from many people's hurried efforts, with no common foundation underneath.
Those early shortcuts didn't stay in the past. Every inconsistency became something the next person had to interpret, and the gap between design and development widened with each handoff. Bottlenecks and rework became part of the everyday workflow.
The Goal
My aim wasn't to undo the relaunch. It was to make sure things could now be done correctly and efficiently:
Correct what had been built inconsistently
Consolidate scattered decisions into a single source of truth
Document everything, where no documentation existed before
Year
2023-present
Timeline
Ongoing
Role
UX/UI Designer
Design System Lead
Scope
Audit
Foundations
Design Tokens
Component Library
Documentation
Governance
Foundations
Laying the groundwork
Before building a single component, I defined the fundamental elements that would serve as building blocks for the entire system: color, size, effects, typography, and iconography. These elements connect the brand to the system and keep every interface clean and consistent.
Semantic tokens
Tokens are how the foundational elements are applied to the product. Each one is named for its purpose rather than its value, so components reference tokens like Color.Background.Brand.Main and Size.Dimension.Action.XS instead of raw hex values or numbers, and a change in one place carries through every component that uses it.
State layers
Interaction states use the same approach. Instead of a separate color for every hover and press state, the system uses state-layer tokens: translucent overlays at set opacities, such as 8% for hover and 16% for press on accent buttons. This keeps states consistent across every button style and cuts down on the number of colors to maintain.
The Library
Where every design starts
Building a comprehensive component library in Figma was the first practical application of the design system. With nearly 60 custom components and over 500 variants, the component library serves as the anchor for all subsequent designs.
Auditing and rebuilding
Early construction of the library was a gradual and methodical process. First, the foundations and tokens defined earlier had to be translated into usable variables within the file. I then audited the live site to identify existing UI elements that needed to be consolidated and recreated in Figma. This was also my opportunity to begin identifying and correcting redundancies and inconsistencies from earlier design efforts.
Anchoring new work
All other project libraries connect to the Central component library, so new features inherit the system's decisions by default. When a feature needs a new component or a change to an existing one, it's made in the library first, and the update cascades to every file that uses it. The result is that every new screen, whether it's a checkout update or a new account feature, looks and behaves like part of the same product.
Documentation
Making the system usable
The component library provides the "what" to use, but documentation was needed to cover the "how" to use it. After three turnovers in development teams, the system needed a tangible record: guidelines to onboard new contributors and guide future work.
Democratizing the system
Many stakeholders outside design and development don't work in Figma, so I built a documentation portal in ZeroHeight that anyone in the company can use. ZeroHeight syncs directly with the Central component library, so changes appear in the documentation immediately, and the guidance stays accurate without constant manual updates.
Beyond the building blocks
Where the component library supplies the building blocks, the documentation supplies the context around them. It explains how the foundations are meant to be applied, when and why to use each component, how components respond to interaction, and the specs developers need to build them accurately. Beyond individual components, it covers patterns for recurring situations, such as error handling, confirmations, and empty states, along with onboarding material for anyone new to the system. Together, it gives designers, developers, and stakeholders a shared reference for decisions that would otherwise live in one person's head.
Adoption
Putting the system to work
With limited time and development resources, the system couldn't launch all at once. I had to create opportunities to put it into action.
Building it into the roadmap
Instead of shipping it as a single project, I introduced new components within other feature releases or broke them into smaller projects. For example, I incorporated text field and input updates into a larger checkout flow update, and rolled out the new color system as part of a redesign of our product detail pages.
Results & Reflection
The library is now the foundation for product work across the team. Design reviews move faster, because many elements are already approved at the atomic level. Wireframes, mockups, and prototypes can be produced more efficiently. Most importantly, the system has provided a common language between design and development that bridges communication gaps and creates smoother handoffs and more accurate production.
Reflection
The relaunch taught the company what a missing foundation costs. When the site had to be rebuilt in two weeks, and then passed between three development groups, there was nothing to hold decisions in place, so each handoff lost a little more. With the system and its documentation in place, a future emergency or team change no longer means starting over, because the decisions live somewhere everyone can find them.
The design system is a living project. As an ongoing effort, I am continuing to work with the development team to fill in gaps and increase efficiency, such as adding coded components, accessibility documentation, and missing patterns. Additionally, I am working to extend the system I've set in place for Central Restaurant Products to our other brand, Hubert.