Omnica: Дизайн-система
Контекст
Когда я присоединился к проекту, мне достался очень простой UI-кит, который не соответствовал потребностям продукта. С планами по расширению команды дизайна я решил начать с нуля и разработать комплексную дизайн-систему. Этот фундамент обеспечил бы согласованность, масштабируемость и плавное сотрудничество по мере роста команды.
Миссия
Объединить принятие дизайн-решений, визуальный язык, UI/UX паттерны и рабочие процессы от дизайна к разработке в рамках одного масштабируемого фреймворка — Omnica.
Цели
Создать кросс-платформенную дизайн-систему, используемую всеми командами
Определить четкие UX-законы и принципы для принятия решений
Создать руководства по UX-копирайтингу для единого тона и микрокопий
Уменьшить трение между дизайном и разработкой и исправить UI-дефекты
Процесс
Основа и аудит
Мы начали с полного аудита интерфейса — картографирования каждого цвета, компонента и паттерна в использовании продукта. Это выявило массовую избыточность и пробелы в доступности.
Оттуда мы определили дизайн-токены для цвета, типографики, сетки и отступов — ДНК новой дизайн-системы.
Библиотека компонентов
Создал 100+ стандартизированных компонентов в Figma и синхронизировал их с кодом через Storybook.
Каждый включал правила использования, заметки о Best Practices и состояния для крайних случаев.
Интеграция UX-законов и принципов
Вместо того чтобы полагаться только на классические когнитивные правила (Fitts, Hick, Jakob и т.д.), мы приняли более широкую внутреннюю UX доктрину:
- Ясность прежде всего — определи реальную проблему перед рисованием.
- Согласованность и последовательность — удерживай пользователей сфокусированными на одной четкой цели на экране.
- Прогрессивное раскрытие — раскрывай сложность постепенно.
- Защита от ошибок — предотвращай состояния появления ошибок, а не объясняй их после.
- Человеческий тон — интерфейсы должны говорить на языке пользователя.
- Эстетическая эмпатия — визуальный комфорт строит доверие.
- Персонализация — интерфейсы должны адаптироваться к контексту пользователя, а не наоборот.
Эти законы стали частью каждого дизайн-ревью и запуска новых продуктов.
Руководства по UX-копирайтингу
Совместно разработали редакционную политику для всех текстов в продукте:
- Простой и прямой синтаксис: избегай сложных причастий, используй активный залог.
- Полезные сообщения: описывай, что произошло, кто виноват и что делать дальше.
- Человеческий тон: никакого жаргона или искусственной вежливости — используй повседневный язык.
- Сообщения об ошибках: четкая проблема + следующий шаг, никаких расплывчатых состояний "недоступно".
- Согласованность: метки кнопок всегда ориентированы на действие ("Создать заказ", "Отправить").
- Форматирование: правильное использование языковых символов, неразрывных пробелов, типографских правил для чисел и символов.
Это руководство стало частью портала документации наряду с UI-компонентами.
Управление и внедрение
Настроили версионирование, changelog и правила контрибьюции в дизайн-систему, чтобы обеспечить согласованные обновления и поддерживать стандарты качества.
Обучил всех дизайнеров и разработчиков использованию и поддержке библиотеки через онбординг-сессии и ритуалы code-review. Совместно создали комплексную документацию и руководства, которые сделали систему доступной как для новых членов команды, так и для существующих участников.
Модель управления включала четкое владение, процессы ревью и политики устаревания, обеспечивая систематическую эволюцию дизайн-системы при сохранении обратной совместимости, где это возможно.
Результаты
- UI-дефекты сократились на 95% во всех новых релизах.
- Время доставки функций сократилось примерно на 30%.
- Передача от дизайна к разработке стала предсказуемой и повторяемой.
- Общие UX-законы и принципы копирайтинга, направляли каждое новое продуктовое решение.
- Система стала визуальным и поведенческим фундаментом для всех будущих интерфейсов RetailCRM и Simla.com.
Ключевые выводы
Дизайн-система преуспевает, когда она определяет, почему и как принимаются решения — а не только как все выглядит. Продуманные принципы и правила делают масштабирование дизайна легким. Правильное управление и документация поддерживают качество по мере роста продукта.