Дизайн-система
Vsesmart.ru Дизайн-система для eCommerce-продуктов
Проект был направлен на развитие
и масштабирование существующего UI-кита в полноценную дизайн-систему для web и mobile.
На фоне роста eCommerce-платформы требовалась единая архитектура компонентов, токенизация стилей и формализация процессов, чтобы ускорить запуск продуктовых инициатив
и обеспечить консистентность пользовательского опыта.

Моя роль:
Продуктовый дизайнер. Развитие дизайн-системы, проектирование
и унификация компонентов, переход от стилей к токенам, подготовка документации, внедрение DesignOps-практик и синхронизация с разработкой.

Домены:
Design System · E-commerce · B2C · Web & Mobile
vs-mobile_hero 1
image 157
Понимание задачи
Ситуация По мере роста продукта Vsesmart.ru команда столкнулась
с фрагментированностью интерфейсов: компоненты создавались в разных задачах, стили дублировались, логика поведения элементов отличалась в мобильной
и десктопной версиях.
UI-kit существовал, но не покрывал все сценарии и не обеспечивал единую систему правил, токенов
и процессов поддержки.
Это замедляло разработку, усложняло масштабирование
и влияло на консистентность пользовательского опыта.
Задача Привести существующий UI-kit
к формату полноценной дизайн-системы, которая:
  • обеспечивает единые визуальные и поведенческие правила,
  • сокращает время проектирования и разработки новых фич,
  • упрощает коммуникацию между дизайнерами и разработчиками,
  • масштабируется вместе с продуктом (web + mobile).
Проблемы Бизнеса:
  • Увеличение Time To Market при запуске новых функциональностей.
  • Рост стоимости разработки из-за повторной реализации UI.
  • Сложности с масштабированием продукта.
  • Отсутствие единого источника правды усложняло онбординг новых участников команды.
  • Разрозненные стили снижали консистентность бренда.
Пользователей:
  • Не было централизованной документации по использованию элементов.
  • Отсутствовала токенизация (цвета, отступы, типографика), что затрудняло смену тем.
  • Требовалась ручная синхронизация макетов и кода.
Аудитория
  • Продуктовые дизайнеры
  • Frontend-разработчики
  • Продакт-менеджеры
  • Аналитики
  • Новые участники команды
Моя роль
  • Аудит существующего UI-kit
  • Определил архитектуру будущей дизайн-системы
  • Перевёл стили в систему дизайн-токенов
  • Пересобрал ключевые компоненты по атомарной модели
  • Настроил prop-based логику компонентов в Figma
  • Подготовил документацию
    и правила использования
  • Наладил процесс синхронизации
    с разработкой
  • Внедрил базовые DesignOps-практики
  • Поддержка и развитие системы
Цели Создать масштабируемую дизайн-систему, которая:
  • стандартизирует визуальные
    и поведенческие паттерны,
  • ускорит разработку,
  • снизит количество ошибок,
  • обеспечит единый пользовательский опыт во всех продуктах Всёсмарт.
Критерии успешности
Рост использования дизайн-системы внутри команды (Adoption).
Сокращение времени сборки новых экранов.
Снижение количества UI-ошибок
на этапе релиза.
Ускорение вывода продуктовых инициатив.
Консистентность интерфейсов
во всех каналах.
Цвета
Мобильная версия
в разработке Пожалуйста, откройте проект
с компьютера для полного
просмотра кейса
Дизайн-система
Vsesmart.ru Дизайн-система для eCommerce-продуктов
Проект был направлен на развитие и масштабирование существующего UI-кита в полноценную дизайн-систему для web и mobile.
На фоне роста eCommerce-платформы требовалась единая архитектура компонентов, токенизация стилей и формализация процессов, чтобы ускорить запуск продуктовых инициатив и обеспечить консистентность пользовательского опыта.

Моя роль:
Продуктовый дизайнер. Развитие дизайн-системы, проектирование и унификация компонентов, переход
от стилей к токенам, подготовка документации, внедрение DesignOps-практик и синхронизация с разработкой.

Домены:
Design System · E-commerce · B2C · Web & Mobile
внутрдсвс 1
image 156
Понимание задачи
Ситуация По мере роста продукта Vsesmart.ru команда столкнулась с фрагментированностью интерфейсов: компоненты создавались в разных задачах, стили дублировались, логика поведения элементов отличалась в мобильной и десктопной версиях.
UI-kit существовал, но не покрывал все сценарии и не обеспечивал единую систему правил, токенов и процессов поддержки.
Это замедляло разработку, усложняло масштабирование и влияло на консистентность пользовательского опыта.
Задача Привести существующий UI-kit к формату полноценной дизайн-системы, которая:
  • обеспечивает единые визуальные и поведенческие правила,
  • сокращает время проектирования и разработки новых фич,
  • упрощает коммуникацию между дизайнерами и разработчиками,
  • масштабируется вместе с продуктом (web + mobile).
Проблемы Бизнеса:
  • Увеличение Time To Market при запуске новых функциональностей.
  • Рост стоимости разработки из-за повторной реализации UI.
  • Сложности с масштабированием продукта.
  • Отсутствие единого источника правды усложняло онбординг новых участников команды.
  • Разрозненные стили снижали консистентность бренда.
Пользователей:
  • Не было централизованной документации по использованию элементов.
  • Отсутствовала токенизация (цвета, отступы, типографика), что затрудняло смену тем.
  • Требовалась ручная синхронизация макетов и кода.
Цели Создать масштабируемую дизайн-систему, которая:
  • стандартизирует визуальные и поведенческие паттерны,
  • ускорит разработку,
  • снизит количество ошибок,
  • обеспечит единый пользовательский опыт во всех продуктах Всёсмарт.
Аудитория
  • Продуктовые дизайнеры
  • Frontend-разработчики
  • Продакт-менеджеры
  • Аналитики
  • Новые участники команды
Моя роль
  • Аудит существующего UI-kit
  • Определил архитектуру будущей дизайн-системы
  • Перевёл стили в систему дизайн-токенов
  • Пересобрал ключевые компоненты по атомарной модели
  • Настроил prop-based логику компонентов в Figma
  • Подготовил документацию и правила использования
  • Наладил процесс синхронизации с разработкой
  • Внедрил базовые DesignOps-практики
  • Поддержка и развитие системы
Критерии успешности
Рост использования дизайн-системы внутри команды (Adoption).
Сокращение времени сборки новых экранов.
Снижение количества UI-ошибок на этапе релиза.
Ускорение вывода продуктовых инициатив.
Консистентность интерфейсов во всех каналах.
Цвета
vs-colors 1
Типографика
Texts-typography 1
text-styles 1
examples 1
Атомы
Grids
grids_tablets_mobile_desktop 1
Spacing Effects
spacings-vs-design 1
Иконки
iconset-vsesmart 1
Молекулы
Component-set-moleculs 1
Component-set-organismes 1
Организмы
Component-set-upper-organismes 1
image 157
Решение
Преобразование UI-кита Существующий UI-kit был переработан в структурированную основу дизайн-системы: элементы выделялись
и организовывались по атомарной архитектуре.
Токенизация Были введены визуальные токены — для цветов, типографики, отступов и состояний — что обеспечило единый визуальный язык и упростило передачу дизайна в код.
Унификация компонентов Компоненты были унифицированы для web и mobile, согласованы поведения элементов, настроены переиспользуемые инстансы для разных сценариев.
Документация Была создана документация, поясняющая когда, почему и как использовать компоненты, с примерами
и рекомендациями, понятными команде.
Процесс ревью и сопровождения Был выстроен процесс регулярной проверки и обновления компонентов, обеспечивавший стабильность системы и её развитие без препятствий для продуктной работы.
Интеграция в продуктовые процессы Дизайн-система была интегрирована в процессы проектирования новых экранов и фич, что упростило сборку макетов и снизило количество ручных правок.
Пример документации
Buttons
image 365
Экраны
maps-notebook-laptop-vs 1
KT Desktop товар в розницу 1
List Cards Desktop 1
Оформление Корзина Не авторизован 1
Карточка товара
Подкатегория
Корзина (неавторизован)
Призополия
Услуги_desktop-1 1
Услуги_desktop-2 1
Услуги_desktop-3 1
Услуги_desktop 1
screens-mobile-ds-vs 1
kartochka-tovara-vsesmart 1
image 159
Результат
Сокращение времени проектирования новых экранов — ~35%.

Снижение Time To Market продуктовых фич — до ~25%.

Снижение количества UI-несостыковок в релизах — ~30%.

Более 80% новых интерфейсов собирались на основе существующих компонентов.

Повышена консистентность интерфейсов web и mobile.