Масштабируемая дизайн-система для промышленных цифровых продуктов

IndustrialTech

UX/UI

Design System

Для кого

Gazprom Neft и Zyfra — ключевые игроки в области цифровизации промышленности. Их цифровая индустриальная платформа объединяет десятки продуктов, направленных на автоматизацию производств, контроль процессов и принятие решений в реальном времени.

Проблематика

До запуска проекта компании сталкивались с рядом системных проблем:
‍

Отсутствие унифицированного визуального языка между продуктами
Затруднённая интеграция модулей внутри цифровой экосистемы
Избыточные бюджеты: +100–120% на дизайн и разработку
Высокая стоимость поддержки:
+30–40% на доработки и обновления
Несоответствие стандартам HMI и ГОСТ по эргономике и доступности

Цель и задачи

Создать масштабируемую и единую индустриальную дизайн-систему, учитывающую специфику промышленных решений, и внедрить её в экосистему продуктов
‍

Проанализировать UX/UI решений всех ключевых цифровых продуктов
Привести визуал и функциональность к стандартам ГОСТ и HMI
Создать единую библиотеку компонентов в дизайне и коде
Снизить стоимость и время разработки новых интерфейсов
Поддерживать масштабируемость и качество в растущей экосистеме

Подход

Этапы реализации:

Стратегия и принципы
‍
Определили цели, философию и принципы будущей системы.

Исследование и аудит
‍
1. Совещания с дизайнерами, разработчиками и продуктовыми командами
‍
2. Сбор референсов и анализ текущих решений
‍
3. Изучение HMI, ГОСТ, ISO-стандартов по визуализации и UX

Планирование
‍
1. Составление списка компонентов и UX-паттернов
‍
2. Приоритизация по важности для бизнеса
‍
3. Согласование дорожной карты с руководством

Формирование команды
‍
Создана специальная продуктовая команда, объединившая дизайнеров, фронтендеров, архитекторов и аналитиков.

Дизайн и разработка

Основные шаги:
‍

Выбран и утверждён единый frontend-стек и способ визуализации данных
Согласованы грид-системы, отступы, типографика, цветовая палитра
Разработаны атомарные компоненты и базовые контролы

Далее по приоритету:
‍

Часто используемые UX-паттерны
Календарные элементы, сортировки, фильтры
Разнообразные модули визуализации данных

Техническая реализация:
‍

Внедрена песочница и витрина компонентов
Реализована документация и гайдлайны
Протестированы существующие продукты на базе новой системы (в Figma)

После создания MVP руководство компаний приняло решение:
‍

Доработать систему до целевого состояния (ещё 2 этапа)
Постепенно внедрять её в все новые цифровые продукты
Интегрировать частично в уже действующие решения, сохраняя backward-совместимость

Процесс потребовал глубокой синхронизации IT-команд и даже затронул реструктуризацию ролей внутри некоторых подразделений.

Результаты

📉 Экономия бюджета:

65%

Экономия на
UX/UI дизайне

35%

Экономия на
frontend-разработку

Удвоение скорости создания MVP и других на PRIZM

⚙️Технический эффект:

💸

Поддержка продуктов стала дешевле

на ~30–40%

💎

Существенно улучшилась

масштабируемость решений

🖥

Избавились от фрагментации
(«зоопарка решений»)

в дизайне и коде

🚀 Стратегический эффект:

⏱️

Повышена скорость реализации цифровых продуктов

и цифровой трансформаци

🤝

Обеспечена визуальная и техническая согласованность

80+ цифровых решений

💼

Повысилось доверие к продуктам внутри корпорации

и качество пользовательского опыта

Особенности

Дизайн-система открыта по лицензии MIT
Представлена на ключевых индустриальных и dev-конференциях в России
Стала эталоном проектирования в рамках корпоративных цифровых решений

Вывод

Мы не просто объединили дизайн и код — мы создали фундаментальную систему для масштабной цифровизации промышленности.

Prizm стала ключевым активом, ускоряющим разработку, упрощающим поддержку и задающим стандарты на годы вперёд.