Building the system that let three products scale together

SKYKICK

Three products. One design system. 100% adoption. I built SkyKick's design system from scratch — the components, governance, and engineering partnerships that allowed three B2B products to scale together. The system became the foundation for major redesigns, including Cloud Backup, the company's largest revenue product.

Design SystemsLeadership0→1
Timeframe2019–2023
TeamLead Designer, Product Designer
Building the system that let three products scale together
A shared design language, documented and ready to build with.

Problem

A technical, engineering-led startup. Three B2B products. No shared design language. A design team of three supporting 70+ engineers across four product areas. The structural problem was front-end silos — teams building independently, components rarely reused, inconsistency compounding across products. But the harder problem was organizational. Leadership hadn't worked with a design system before. There was no shared vocabulary, no process, and no natural investment case.
Team structure diagram showing the imbalance
Three products, 70+ engineers, three designers.

Approach

Start small, deliver value. Rather than pitch a full system upfront, I started where I had traction — front-end basics. I had development experience, so I built an initial style library on Bootstrap, documented the components, and shipped foundational styles that immediately added value to the development cycle. The organizational work was harder. I found the engineers with a passion for front-end quality and formed a virtual team — a weekly standup to stay aligned, share feedback, and advocate internally. Together, we became the system's first evangelists. Getting prioritization from the PMs was the biggest hurdle and it required a mindset shift. The pitch wasn't about design consistency — it was about engineering velocity. Each product team committed one engineer — two days per sprint — with Design driving the backlog.
Bootstrap style library with early component documentation
From Bootstrap components to a custom CSS library — designed, coded, and shipped with PRs.

Foundations of the System

Infrastructure for adoption.

1

Figma Component Library

I owned the core library end to end — building components, reviewing updates with the design team, and iterating based on ongoing feedback. Shared across all three products, with per-product libraries layered on top to allow product-specific extension without breaking the core.

Figma library structure showing core library and per-product layers
The core library import flow, with per-product libraries layered on top.
2

Storybook & UX Patterns

I directed the Storybook implementation with engineering and personally documented the behavioral patterns that lived alongside the components — form validation, filter behavior, drawer interactions, navigation hierarchy. Visible, findable, and buildable without going through design directly. Each pattern documented with rationale, not just rules.

Storybook components and pattern documentation
Storybook as the single source of truth — components and UX patterns documented with rationale.

Outcomes

A common language. Our system was far from perfect, but the concepts and assets had permeated across the company. Going into a full redesign of Cloud Backup — the largest revenue product — tested the system as engineering teams ramped up for an aggressive development phase. The components, patterns, and UI templates allowed teams to maintain velocity without design bottlenecks. The product launched on schedule.

"I could direct engineering teams 'not to worry about how it looks' and focus on quality — including writing front-end tests we never had before."

— Brian Hartel, Engineering Lead
Engineering UX Survey results dashboard
Engineering UX Survey results showing high engagement with the design system.

Partnering with our UX Researcher, I launched the company's first Engineering UX Survey — 36 respondents, 80% with practical knowledge of the components, 61% actively developing with the system. The results gave the Design team the leverage to define and hire a dedicated UX Engineer — the first at SkyKick — to move the system to the next level of maturity.

3
Products
100%
Company adoption
+1
UX Engineer hire