Дизайн-система Атом
Задача
Спроектировать и запустить дизайн‑систему для 4х платформ (Android-интерфейс автомобиля + AR-display + Mobile + Web), которая объединит разрозненные интерфейсы, ускорит выпуск фич и упростит поддержку продукта.
Контекст проблемы
Компания-стартап проектирует российский электромобиль и инфроструктуру к нему. В рамках этой работы развивается интерфейс автомобиля, AR-дисплей (Head Up Display), мобильное приложения водителя и пассажира, веб-сервисы для каршеринга и технического обслуживания. К апрелю 2024 года разные команды использовали собственные UI‑паттерны и визуальные решения, что привело к:
- Использованию разных стилей и компонентов в похожих сценариях (множество вариантов форм и кнопок).
- Долгому внедрению новых фич: каждый раз приходилось «изобретать» UI заново.
- Сложностям с поддержкой: любая правка стилей требовала изменений в большом числе экранов вручную.
Аналитика
На первом этапе проанализировал все интерфейсы на предмет имеющихся локальных компонентов, чтобы выявить основу для ДС. Классифицировал выявленные компоненты, выявил дубликаты и вариации.
На втором этапе провел интервью с каждой из команд на предмет желаний и болей.
Инсайты: Многие компоненты были визуально похожи, но отличались по мелочам (отступы, состояния, шрифты), из‑за чего их нельзя было переиспользовать без доработок. Часть диджитал-компонентов визуально повторяли размер и формы физических компонентов автомобиля. Документация отсутствовала — знания были «в головах» отдельных людей.
На третьем этапе проанализировал существующие дизайн-системы с упором на сферу Avtomotive.
На втором этапе провел интервью с каждой из команд на предмет желаний и болей.
Инсайты: Многие компоненты были визуально похожи, но отличались по мелочам (отступы, состояния, шрифты), из‑за чего их нельзя было переиспользовать без доработок. Часть диджитал-компонентов визуально повторяли размер и формы физических компонентов автомобиля. Документация отсутствовала — знания были «в головах» отдельных людей.
На третьем этапе проанализировал существующие дизайн-системы с упором на сферу Avtomotive.
Подход и принципы
На основе аудита были сформулированы принципы будущей системы:
- Молекулярность — разделение на уровни: токены, компоненты, паттерны, шаблоны;
- Единообразие: одна система сеток, типографики, состояний и отступов для всех продуктов внутри одной платформы;
- Совместное владение: дизайн‑система как продукт, за который отвечает кросс‑функциональная команда (дизайн + разработка).
Фундамент
Цветовые токены разделены на семантические роли (primary, secondary, success, warning, danger, background). Отделены токены для текста, иконок, границ. Собран набор топографических стилей. Закреплена система шагов и отступов, стандартизированы радиусы для разных типов компонентов. На основе фирменного шрифта разработан единый стиль иконографии, отрисован основной пак иконок для всех интерфейсов.
Компоненты и паттерны
- Введен единый нейминг и правила проектирования компонентов и состояний во всех библиотеках;
- На основе спроектированных флоу собраны паттерны интерфейсов, «перенесены на бумагу».
- Созданы принципы использования компонентов: когда использовать какую кнопку, какой паттерн, что использовать в тех или иных ситуациях.
- Best practices для типичных сценариев: фильтры и поиск, навигация между разделами, сложные формы;
- Примеры и анти‑паттерны: как делать не нужно;
Взаимодействие с разработкой
- Регулярные сессии с front‑end командой;
- Согласование API компонентов (props, состояния, ограничения);
- Тестирование компонентов через приложение-библиотеку;
- совместное ведение changelog’а: какие компоненты добавлены/изменены.
- Внедрение Storybook Web интерфейсов как витрины компонентов для разработчиков и тестирования.
Внедрение в продукты
Из-за сжатых сроков библиотеки внедрялись массово, по мере сборки компонентов.
- Разработаны и внедрены метрики покрытия интерфейсов компонентами, удовлетворённость продуктовых команд (CSI)
- Обновлены интерфейсы с использованием компонентов ДС и замерены эффекты: скорость разработки, количество багов, реакцию пользователей.
Поддержка команд
Проводились внутренние демо и воркшопы для продуктовых дизайнеров:
- Как подключать и переключать библиотеки;
- Как предлагать новые компоненты;
- Как не «ломать» систему локальными решениями.
Результаты
- Количество визуальных расхождений между продуктами резко снизилось: новые интерфейсы стали выглядеть и работать единообразно;
- Новые дизайнеры и разработчики быстрее проходят онбординг, так как им доступны понятные гайды и библиотеки;
- Появился единый канал коммуникации по интерфейсам: вместо отдельных «частных» решений команды опирались на общую систему.
- CSI на 2026 год на уровне 93%
- Adoption на 2026 год на уровне 97%