Craft Design System

Design System Refresh
Planning & Roadmap
Education & Awareness

Provi’s first design system was put in place without standards to help it scale, and over time it drifted, leaving a wide gap between design and code. A full rebuild was a big ask. I set the new system up for success with a transparent, collaborative process. Every phase, from visual direction to a proof of concept, was designed to build confidence along the way.

Role: Staff Product Designer - Design Systems (FTE)
Project Duration: 10-month buildout
Company: Provi

Highlights

0–1 system build with a dedicated engineering partner
Built trust across the org with a detailed roadmap, sequenced rollout, and POC to validate ease-of-use
Powered a new full product build in 2 months

Collage of Craft components in use: product cards, a Product Details drawer with discount tiers, a data table, buttons, a search field, a toast, an alert, an empty state with illustrations, and filter controls.

01 / Visual direction

Upleveling the visual design

I worked across brand and product to get buy-in on a new visual direction. This included updates to color palettes, type scales, spacing, and corner treatments, alongside vision prototypes that imagined how the product might evolve with the new look & feel.

Typography styles: the current single generic product typeface and three marketing typefaces, next to the proposal of Kanit for headlines and Inter for body copy and labels, with a table mapping the old Fizz text styles to the new type scale and marking which ones change.

Vision prototypes in the new visual style: a personalized home page with rep recommendations and trending products, and a wine category page with filters, a sponsored banner, and recommended product listings.

02 / Foundations

Setting scalable standards

Tokens, contributions, and philosophy

The old system’s drift came from a lack of agreed-upon standards. I showed leadership how that weak foundation had caused the drift, and how setting those standards now would help the new system scale and enable teams to build a better product faster.

System Drift table pairing each issue with its cause and solution: inconsistent spacing, corners, and other styles, caused by tokens being limited to color, solved by a two-tier token structure covering color, spacing, corners, shadow, and type; components with high specificity and low reusability, caused by no shared philosophy around reuse, solved by educating contributors on when to reuse, adapt, or build new; and component bloat, caused by no contribution process, solved by a transparent ticketing process for system updates and additions.

03 / Accessibility

Accessible by default

I set WCAG AA as the target for Craft and treated accessibility as a requirement for every component. That meant color considerations including edge cases like disabled and error states, and how focus and interactions worked for keyboard users.

As a principle, it meant treating accessibility as a spectrum that benefits all users, not just a safety net for a subset of people.

An annotated dialog showing Craft’s accessibility requirements: focus moves into the dialog when it opens and Tab loops inside it, Escape closes it and returns focus to the trigger, an input’s error state uses an icon and text rather than color alone and keeps its helper text, focused buttons get a visible focus ring for keyboard users, and buttons meet WCAG AA contrast in default, hover, active, and disabled states.

04 / Planning & roadmap

Making the plan visible

A detailed roadmap with clear milestones

Product & engineering leadership was keen to understand how we’d approach a rebuild and when other teams might be enabled to tackle new work.

I sequenced the rollout in phases based on estimates across foundational work and component efforts (design, build, and QA). Dubbed “Thundergantt,” this view demonstrated what could be built and when, with gates along the way indicating which sections of the product would be unlocked. This work was then migrated to Jira as tickets that could be tracked and measured.

Design system roadmap as a Gantt chart from September 2023 through July 2024: two foundations phases, header and footer components, cards and carousels, and forms and inputs, each broken into design, build, document, and implement bars, with milestone lines for when the header and footer are ready, when product listing and cart pages are enabled, and when product detail pages are enabled.

05 / Validation

Proving the work

The global nav as a soft launch

We validated Craft through a redesigned global nav to test engineering ease of use and make sure usability didn’t slip. Click tracking confirmed that usability was as good as or better than the original. Engineers found the system easy to work with, and they also flagged a few improvements to components that had too much business logic baked in.

06 / Education & enablement

Building system fluency & adoption

I ran recurring sessions with designers and engineers on when to reuse, adapt, or build new, and how to contribute and hand off. The goal was a team that could support the system, not just consume it.

Three slides from the education sessions: how the Figma library feeds design files and documentation, a decision flow that starts with asking whether something that already exists can be reused, and what a component ticket in Jira should cover (why it’s needed, variants, rules, and motion) with an example Expander ticket.

07 / Business impact

A full product build in two months

Confidence turned into speed

With leadership backing and a validated system in place, Craft powered a new product build — a white-label distributor marketplace built on Provi — that shipped in two months.