Design System

For B2B/B2C SaaS

-30%

Time-to-market

300+

Components

$XXXk

Сumulative savings

Project Overview

Background

When I joined, the team had only a basic Figma UI kit and a handful of components in Storybook. These assets had drifted significantly from production, creating a major bottleneck for design, frontend, and QA workflows alike.

Problem

Designing a new feature required building foundational components from scratch, severely dragging down development speed.

Instead of focusing on product logic, design, frontend, and QA spent valuable hours aligning basic UI elements.

Team

Designer, Frontend, QA, CEO, CTO

My Role

Lead Product Designer & DS Owner

System Architecture DesignOps Onboarding

Timeline

2020–2025

The Starting Point

Core Challenge

Without a system, developing each feature cost more than necessary

Typical use case

Say you need to design a new settings toggle in the customizer. You open Figma, only to find the UI kit doesn't match production. Buttons are different sizes, inputs have inconsistent margins, and the sidebar behaves differently than in the adjacent section. Because you can't assemble the screen like Lego blocks, you have to recreate every control from scratch by cross-referencing production. A task that should take a day routinely stretches into a week.

Avg. time-to-market for minor features

~3 weeks

Variations of the same control

3+ across the product

Without a design system

Friction when scaling

Where we started

Original UI-Kit

Original product

Goals

Design perspective

Accelerate delivery through components

Business perspective

Reduce time-to-market

Engineering perspective

Synchronize Figma and Storybook

User perspective

Minimize cognitive load by standardizing product-wide patterns

The process

I initiated a comprehensive audit, demonstrated value through pilot features, secured stakeholder buy-in, and led the rollout across the product. Our design system eventually allowed us to sunset Zeplin handoffs, saving hundreds of hours across design, engineering, and QA.

1 •

Foundation and Implementation

Research

Current UI Audit

STRATEGY

Planning

VALIDATING

Initial Proof of Concept

ALIGNMENT

Stakeholder Buy-in

STRATEGY

Strategic Trade-offs

2 •

Scale and Development

ARCHITECTURE

v2.0 & Semantic Tokens

ARCHITECTURE

A New Foundation

SYNCHRONIZATION

Hand-off и DesignOps

SCALING

Onboarding and Growth

TIMELINE

Growth and Numbers

The outcome

Before/after

WYSIWYG editor layout example

Design System Architecture

7 slides

Prototype

Light/Dark theme

Results

Time-to-market

5+ years cumulative

Component coverage

Improved by

~30%

Total savings

$XXXk+

Adoption rate

100%

Retrospective

What I'd do differently

I would implement design tokens from the start. Postponing tokenization helped us launch quickly, but migrating to Figma Variables later required massive refactoring. Looking back, leveraging AI tools could have dramatically accelerated that transition.

Backlog

Dark mode is technically complete but has not yet been rolled out.
Complex pattern documentation has been fully migrated to Storybook.

Want to learn more?

Book a call

Mobile App Launch (0→1)

FlippingBook · 2024

Led the end-to-end design of the mobile app to unlock offline sales scenarios. Designed complex PDF rendering UX and validated patterns with sales teams.

20% Growth in Engagement

Privacy settings

FlippingBook · 2023

Designed a granular privacy control system allowing Enterprise clients to secure their publications. Included SSO, password protection, and domain whitelisting modes.

$500k+ in Enterprise Deals