Works

About

Rus

Design System

Scaling B2B/B2C SaaS

-30%

Time-to-market

300+

Components

$XXXk

Сumulative savings

TL;DR

Scaled a fragmented UI-kit into a unified design system. Introduced semantic tokens, automated hand-off via custom plugins, and synchronized Figma with Storybook, reducing time-to-market by 30% across multiple product teams.

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 & DS Owner

System Architecture DesignOps Onboarding

Timeline

2020–2025

The Starting Point

Core Challenge

Developing each feature cost more than necessary

Typical use case

I 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 I can't assemble the screen like Lego blocks, I have to recreate every control from scratch by cross-referencing production.

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 per month 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

Comparsion

WYSIWYG editor layout example

DS Architecture

Few examples

Prototype

Light/Dark theme

Results

Time-to-market

~30%

Resource saving

>6k hrs

Adoption

100%

Retrospective

What I'd do differently

I would implement design tokens from the start. Postponing tokenization helped us launch quickly, but migrating to 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 been rolled out. - Complex documentation has been fully migrated to Storybook.

Questions?

Let's Chat

Privacy settings

FlippingBook · 2023-2025

Designed a granular privacy control system, empowering Enterprise clients to secure their publications. Built native support for SSO, email access restrictions, and domain whitelisting.

+$XXXk in Enterprise deals

Mobile App Launch 0→1

FlippingBook · 2024-2025

Designed a native app from scratch to eliminate B2B churn and unlock trackable offline sales. Streamlined the sharing flow to just 3 taps, allowing sales managers to seamlessly generate leads on the go.

-80% Task Success Time