interface
UX
2025
RCM/FMEA для промышленной надёжности
FMEA
Failure Modes and Effects Analysis
Анализ возможных отказов и их последствий, чтобы предупредить риски.
RCM
Reliability-Centered Maintenance
Планирование обслуживания по критичности, чтобы снизить отказы и затраты.
Команда
  • UX/UI дизайнер
  • PM со стороны клиента,
  • эксперты по надёжности,
  • фронтенд/бэкенд,
Моя роль
UX/UI дизайнер:
аудит→прототипы→UI→дизайн-система →гайды
Срок
4 спринта
Задача
  • Свести продукт к единой дизайн-системе
  • Упростить ключевые действия
  • Дать правила для новых экранов, чтобы не «изобретать заново»
Контекст
Уровень 3 — Паттерны
Это поведенческие и композиционные правила, которых нет в Ant, но они из наших компонентов. Нужны, чтобы одно и то же поведение повторялось везде и не «переизобреталось»
Уровень 2 — Компоненты
Компоненты собираются на токенах, наследуют их правила и обеспечивают единый визуальный и поведенческий уровень.
Уровень 0 — База
Дизайн система Ant выбрана как фундамент, чтобы ускорить старт, не изобретая базовые компоненты с нуля
Уровень 1 — Токены
Цвета (включая error/success), типографика, отступы, радиусы, состояния. Смысл: меняем токен — обновляется весь продукт.
Дизайн-система
Типовые схемы экранов, собранные как шаблоны из компонентов и паттернов. Теперь новые экраны будут конструироваться по готовым правилам, а не «с нуля»
Ключевые экраны
Эффект
→ Доступ к просмотру большего количества данных позволило быстрее находить нужный анализ, меньше «слепого» скролла.
Стало
→ Вмещается больше данных благодаря: выезжающей правой фильтр-панели и сворачиваемого бокового меню.
→ Чистая шапка таблицы
→ Понятная пагинация
Было
→ Таблица на множестве страниц
→ Колонок было недостаточно
→ Фильтры раскиданы
Список ACA
Эффект
→ Портфель читается как дашборд — проще приоритизировать
→ Один экран даёт контекст и следующий шаг
Было
→ Плоская таблица без приоритетов
Стало
→ Шаблон карточки с блоками KPI, графиками, секцией «Анализы надёжности»
→ Чёткая визуальная иерархия
Стало
→ Добавление новых объектов происходит крайне редко, это дает возможность предоставить больше данных и нагляднее
→ Шаблон карточек объектов с KPI
→ Быстрые действия и фильтры
группа планирования
Эффект
→ Меньше ошибок интерпретации, быстрее выбрать корректный риск
Стало
→ Подрообная легенда и подсказки облегчают считывание матрицы
→ Введены два уровня таб-меню, это создает иерархию и облегчает навигацию
→ Режим просмотра принят за основной, а при редактирование окно матрицы сохраняет лейаут
Было
→ Активные ячейку трудно считать и различать между собой
→ Отсутствует режим просмотра для пользователей с ограниченными правами
→ Таб-меню усложняют навигацию
Матрица
Карточка актива
Элемент анализа RCM/FMEA
Эффект
Быстрое считвание данных при просмотре, меньше ошибок при редактировании
→ Чище флоу

→ Быстрее ввод данных
→ Предотвращение ошибки выхода без сохранения
Стало
→ Расширенные элементы ввода
→ Представление данных в разных форматах
Было
→ При объемных текстах получится «Простыня», метрики теряются
→ Свободный текст вместо контролируемого ввода
Финансовый анализ
Стало
→ Разделение полей на блоки (риски/убытки/ТО), карточки итогов, встроенный калькулятор, единые форматы ввода
Было
→ Поля «слипаются», рассчеты делать неудобно
Стало
→ 2 режима редактирование и просмотр, с сохранением пространственного контекста при переключении между ними
→ Дерево навигации легче считывается глазами
Было
→ Сложное распознование элементов и считываение уровней в дереве навигации
→ Режимы смешаны, легко случайно править или править некомпетентными сотрудниками
просмотр/редактирование
Для команды
  • Экраны собираются по шаблонам, без «переизобретения».
  • Ревью быстрее: проверяем соответствие паттернам и токенам.
  • Онбординг проще: есть гайды и примеры.
Для продукта
  • Единая визуальная и поведенческая логика.
  • Меньше уникальных исключений в верстке.
  • Понятные состояния и валидации.
Для процесса
  • Предсказуемый handoff: состояния/маски/ошибки описаны.
  • Повторное использование компонентов/паттернов.
  • Новые экраны = комбинация готовых схем.
* На основе внутренних замерах и отзывах команды
Что дало внедрение
1.аудит
Собрала все ключевые экраны, зафиксировала проблемы:
  • разнобой стилей,
  • дублирование компонентов,
  • слабая читаемость.
2.Выделение шаблонов
Определила 5 основных шаблонов экранов:
  • списки с фильтром,
  • карточки объктов
  • матрицы рисков,
  • финансовые формы
  • режимы просмотр/редактирование.
3.UI-систематизация
Выстроила:
  • сетку,
  • типографику,
  • правила цветовых статусов.
4.Дизайн-система
На базе Ant Design: токены → компоненты → паттерны → экраны.
5.Передача спецификаций
Передала команде спецификации и правила применения, описала сложные кейсы.
воркфлоу