Design System

For B2B/B2C SaaS

-30%

Time-to-market

300+

Компонентов

$XXXk

Экономия за 5 лет

Обзор проекта

Бэкграунд

Когда я пришёл, у компании был только UI-kit в фигме и пару компонентов в Storybook. К тому моменту он заметно разошёлся с продом, что сильно тормозило не только мою работу но и команд Forntent и QA.

Проблема

Проектирование новой фичи начиналось с базовых компонентов, что сильно замедляло разработку

Дизайн, фронтенд и QA тратили время на синхронизацию базовых элементов, а не на продуктовую логику.

Команда

Дизайнер, Фронтенд, QA, CEO, CTO

Моя роль

Лид, владелец ДС

Архитектура системы Дизайн-OPS Онбординг

Таймфрейм

2020–2025

Отправная точка

Главная проблема

Без системы каждая фича стоила дороже, чем должна

Типичный юзкейс

Нужно спроектировать новую настройку в кастомайзере. Открываю Figma, а UI-kit не бьется с продакшеном. Кнопки разных размеров, у инпутов разные отступы, сайдбар ведет себя иначе, чем в соседнем разделе. Я не могу собрать экран как из лего, поэтому каждый контрол приходится рисовать с нуля, сверяясь с продом. То, что должно занять день, растягивается на неделю.

Средний Time-to-market небольшой фичи

~3 недели

Вариантов одного контрола

>3 в разных местах

Без дизайн системы

Хаос при масштабировании

Что было на входе

Original UI-Kit

Original product

Цели

С точки зрения дизайна

Ускорить сборку макетов за счёт компонентов

С точки зрения бизнеса

Ускорить Time-to-Market

С точки зрения разработки

Синхронизировать Figma и Storybook

С точки зрения пользователя

Снизить когнитивную нагрузку за счёт повышения консистентности продукта

Процесс

Начал с аудита, доказал ценность на пилотных фичах, получил buy-in от стейкхолдеров и залидировал масштабирование на весь продукт. Благодаря ДС получилось отказаться от хэндофф через Zeplin и сэкономить сотни часов как минимум 3х команд.

1 •

Подготовка и внедрение

Research

Аудит текущего UI

STRATEGY

Планирование

VALIDATING

Первый концепт

ALIGNMENT

Договариваюсь со стейкхолдерами

STRATEGY

Стратегические компромиссы

2 •

Развитие и масштабирование

ARCHITECTURE

v2.0 aka Семантические токены

ARCHITECTURE

Новый фундамент

SYNCHRONIZATION

Hand-off и DesignOps

SCALING

Онбординг и масштабирование

TIMELINE

Развитие и цифры

Итоговое решение

Сравнение до/после

На примере редактора контента (WYSIWYG)

Архитектура ДС

7 слайдов

Прототип

Светлая/тёмная тема

Результаты

Time to Market

Экономия за 5+ лет

Внедрение

Ускорение на

~30%

В $ эквиваленте

$XXXk+

В продукте

100%

Рефлексия

Что сделал бы иначе

Заложил бы токены с первого дня. Стартовать на хардкоде было быстрее, но переезд на Variables потом съел много ресурсов. Здорово, что сейчас с современными инструментами вроде Claude можно ускориться и автоматизировать большую часть процессов.

Что осталось в бэклоге

Тёмная тема технически готова, но пока не раскатана на продакшн.
Документация сложных организмов полностью вынесена в Storybook.

Хотите больше?

Забронировать встречу

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