Создали и разработали масштабируемую дизайн-систему для сложного инженерного ПО от «Монитор Электрик»

Главное о кейсе

Монитор Электрик — российская компания, создающая критически важные IT-решения для энергетической отрасли: платформы для автоматизации диспетчерского, технологического, ситуационного и коммерческого управления объектами.

Команда Red Collar разработала дизайн-систему, которая помогла заказчику создавать консистентные цифровые продукты для конечных пользователей — операторов энергообъектов. Система стандартизирует интерфейсы, ускоряет их проектирование и делает взаимодействие с большими массивами данных интуитивно понятным для конечных пользователей ПО.

Каждый элемент — от сетки и модулей до шрифтов и иконок — продуман до мельчайших деталей, чтобы конечные пользователи могли моментально считывать статусы и изменения даже в условиях высокой нагрузки и стрессовых ситуаций, когда на принятие решения есть только доли секунды.

Результат — гибкий инструмент, обеспечивающий визуальную целостность, модульность и эргономичность интерфейсов.

Как проект изменил жизнь пользователей

Внедрение системы повысило эффективность и снизило когнитивную нагрузку операторов, работающих с промышленными интерфейсами. Стандартизированные, интуитивно понятные паттерны позволили сократить время на принятие решений в критических ситуациях, минимизировать риски человеческой ошибки и обеспечить комфортную многочасовую работу со сложными данными.

Бизнес-задача и ее решение

Команда Монитор Электрик столкнулась с ростом числа продуктов, требующих единого подхода и ускорения процессов: отсутствие системы отступов и стандартизированных размеров элементов стало «техническим долгом», приводило к сложности восприятия информации, вызывая визуальную перегруженность и затрудняя навигацию.

Продукты заказчика используются в ежедневной работе операторов, поэтому дизайн интерфейса не должен раздражать, а паттерны должны быть типичны и понятны на интуитивном уровне. Так у заказчика возник запрос на создание дизайн-системы.

Мы привели к единой структуре существующие компоненты и разработали новую дизайн-систему, выдержав ее в строгом, функциональном стиле — без лишней декоративности, с акцентом на точность, нейтральность и комфорт при многочасовой работе с телеметрией и технологическими данными.

Создали 4 библиотеки, которые включают в себя цвета, шрифты, иконки и сетки. Приложили подробное руководство для разработчиков ПО, в котором объяснили, как использовать каждую из библиотек.

Результат внедрения: Система стандартизировала процесс разработки UI и сейчас используется более чем 15 командами заказчика, что подтверждает ее масштабируемость и внедряемость.

Крафт (мастерство), реализация, технические детали

→ Дизайн:

В рамках создания UI-кита отрисовали около 200 специализированных, семантически выверенных иконок для профессионального ПО, которое управляет сложными электроэнергетическими системами. Каждая пиктограмма создана по единому принципу построения, чтобы интерфейсы оставались целостными и читаемыми на любом масштабе.

→ Разработка:

Разработали компоненты на базе библиотеки Prizm с возможностью кастомизации, а также создали собственные компоненты. На базе этих решений собрали интерфейс для двух приложений.

В финале развернули новую дизайн-систему в рабочей среде заказчика, а также провели тестирование и дизайн-ревью на соответствие макетам.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

В сложной инженерной среде дизайн способен повысить эффективность восприятия информации. Мы сфокусировались на эргономике и нейтральной эстетике: минимализм, четкая типографика и сдержанная цветовая палитра, подобранная с учетом требований к контрастности — чтобы обеспечить комфортную работу с телеметрией, схемами и большими таблицами данных.

В процессе работы над проектом предложили заказчику работать месячными спринтами. Согласовывали список компонентов, которые будут сделаны в спринте — и в конце месяца сдавали оговоренный пул работ. Такой подход оказался удобным для обеих сторон — это помогало командам формировать правильные ожидания и делать более точные оценки.

Помимо дизайна и верстки полноценной дизайн-системы, помогли клиенту создать два комплексных проекта (NDA) в сфере электроэнергетики на ее компонентах.

Скриншоты