Optimal Flow Group

Роль

Product Designer

Команда

1 дизайнер, 2 frontend, 3 backend, аналитик, PM, PO

О компании

Инновационная компания, занимающаяся разработкой и внедрением передовых решений для крупного бизнеса.

О проекте

HMI/Scada интерфейс металлообрабатывающего предприятия, который позволяет обновлять данные в режиме реального времени, проводить анализ событий, оповещать оператора о поломке и дистанционно управлять оборудованием.

Задача

Спроектировать интерфейс редактора предназначеного для создания виртуальных копий производственных предприятий.

Ресерч

Самое популярное решение, которым пользовались до создания нашей “платформы” предоставляла компания Siemens и выглядело оно следующим образом:

Итак, первым делом я изучил все существующие решения на рынке разработки средств визуализации и управления технологическими процессами.

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

Поняв, что из существующих аналогов можно взять единичные ux-решения я расширил зону ресерча на более прикладные приложения и веб-сервисы. Здорово когда за референс можно взять саму фигму, spline, webflow и другие редакторы.

Проектирование

Еженедельно я проводил 2х-часовые встречи с главным инженером по автоматизированным системам управления технологическим процессом (АСУТП), в течение которых мы обсуждали технически тонкие вопросы + я демонстрировал свои решения и получал ценный фидбэк.

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

Раз в 4 дня я презентовал команде новую часть интерфейса, получал комментарии аналитиков, CTO и программистов и при необходимости вносил изменения.

Например вот так выглядит 2 итерации окна создания мультисостояния. Мультисостояние необходимо для настройки отображения элемента на мнемосхеме цеха в зависимости от того какое значение имеет тэг приходящий с физического датчика на производстве.

Несколько вариантов верхней панели инструментов. Так как сроки проекта были сжатые, а писалось это все на js, чтобы открывать это приложение в браузере, то пришлось отказаться от некоторых решений.

Результат

Через 2 месяца получился довольно мощный и при этом аккуратный интерфейс, соединивший в себе лучшие из существующих решений и имеющий ряд фич, о которых давно просили конечные пользователи:

Кроссреференс — используется для поиска используемых на мнемосхеме объектов и тегов.

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

С помощью встроенной библиотеки примитивов можно быстро создавать максимально приближенные к реальности мнемосхемы.