ELVis

О чем продукт?

ELVis или Engineering Live Visualization System - приложение для мониторинга в реальном времени индустриальных объектов. Оно позволяет анализировать данные как в реальном времени, так и исторические данные, а также сравнивать и визуализировать их. В общем весь продукт про таблицы с данными и их визуализацию через графики с sharing knowledge составляющей.

Контекст

Для меня это история одного большого легаси, где приходилось проектировал сценарии для инженеров различной сложности и лавировать между сценариями, понимать нагрузки на фронт/бэк и желанием сделать “красиво”. Например, нужен новый график, а единственный способ его реализовать фронтам - это потратить целый месяц на его реализацию… Под “красиво” я имею ввиду оптимизацию процессов, UI-kit и мягкий редизайн продукта, который будет показан далее на макетах, а затем легаси фичи.

Какие проблемы и задачи решал?

Я что шутки шучу по вашему? Эх молодость, а у вас какой первый фотошоп? 😁

• Перенес все макеты “как есть” из Photoshop в Figma. Пришлось убеждать Siemens переходить на Figma и современные процессы взаимодействия команд (2018 год).
• Решив проблему выше, решилась проблема медленного обсуждения новых фичей.
• Проектировал все части продукта на всех стадиях: от требований до релиза.
• Презентовал продуктовые решения на демо заказчикам.
• Разработал UI-kit, работая с командой фронта, часть которого запустили в продакшен.
• Презентовал редизайн стейкхолдерам, озвучил проблемы и цели редизайна, показал роадмап работы над ним. До релиза, увы, не дошел, потому что я уже не работаю в Siemens, а Siemens нет в России.

Какой был процесс?

Одна из фичей ELVis. Да, скетчи от руки и на досках по классике были, но кому оно надо? 🌚

До меня ELVis уже был в продакшене какое-то время, то есть это не была работа с нуля. Моя основная работа заключалась в том, чтобы упрощать, ускорять и оптимизировать текущие сценарии инженеров в продукте. Помимо работы над существующими сценариями, я проектировал все новые фичи с 2018 по 2022. До последнего работал как с менеджерами, так и командами разработки, работая над очередным кейсом. Основным способом получения инсайтов - это интервью с клиентами и юзерами. Это был огромный плюс работы в Siemens. Кстати, слово клиент - это тоже условность, потому что Siemens всё делает для себя и клиенты это главы департаментов, которые сами иногда являются инженерами. Короче, у меня и команды буквально на расстоянии руки был доступ ко всем стейкхолдерам и инженерам. Это огромное преимущество, которое помогало очень быстро влиять на продуктовые решения и задавать вопросы во время очередного митинга. Это также помогало быстрее обсуждать прототипы или скетчи экранов по сценарию, чтобы понять что видит и понимает на них юзер, клиент и команда.

⚡ Ключевой вывод: интервью - сила.

Tab manager · Менеджер вкладок

В центральной части экрана инженеры смотрят, редактируют, делятся своими вкладками.

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

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

Tables · Таблица

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

Instrumentation overview · Обзор оборудования

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

Indicators · Индикаторы

Я ж обещал показать и легаси дизайн! 🫡

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

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

HMI Editor · Конструктор HMI-интерфейсов

Для одного из юзкейсов и клиента нужна была общая видимость оборудования и его мониторинга на огромных объединенных многоэкранных панелей. Как в фильмах про военных. А также для операторов оборудования, чтобы обеспечить прозрачность информации о текущем состоянии производственной линии. Конструктор HMI-интерфейсов позволяет визуально контролировать состояние отдельных частей оборудования, быстрее реагировать в случае аврийных ситуаций и получать статус по каждой детали в режиме реального времени.

В процессе работы люблю объяснять состояния для разработчиков и пояснять за сценарии.

Predictive analysys · Предиктивная (прогнозная) аналитика

Да, еще один легаси дизайн! 🫡

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

Calendar · Календарь

Это не версии, а отображение сценариев фильтрации данных за n-период: сегодня (today), вчера (yesterday), за этот месяц (this month), собственный диапазон (custom range), квартал (quarter).

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

Не всегда удобно управлять 10 датами в 10 графиках, поэтому у ELVis есть глобальный календарь, который можно к тому же открепить и переместить на удобное место, чтобы посмотреть как меняются данные на том или ином графике при смене того или иного диапазона дат.

Не прошедшие испытание огнем версии 🔥

ELVis огромный и вот почему его не запихнуть в 1 кейс…

ELVis большой продукт для решения мониторческих задач. Так, например, я не рассказал о кейсе “Manufactoring”, который также проектировал. Это когда есть 2 типа юзеров: оператор машины и инженер качества, который анализирует дефекты в деталях. Машины в данном случае это станки. Например, одна машина сверлит дырки, другая протаскивает что-то далее по конвееру. К машинам подключены несколько систем. К машинам подключены сенсоры как и к газовым турбинам. Тут же на таком заводе установлен наш ELVis, который получая живые данные с машины отображал старт и финиш производства деталей, которые также отображали события, которые помогут найти бракованные детали или даже вещи по типу “забыл закрыть дверь” или “пристегнуть такую-то штуку” или, например, произошел взрыв на тест-ране или “не заходи, убьет” 😀. Разумеется это плохой кейс, но элвис помогал инженерам понять какие детали бракованые, партию которых можно было по номеру проследить.

Выводы

✅ Теперь не страшны сложные предметные области

Это просто, когда объясняют просто, как я выше. На деле же нужно уметь отличать “мух от котлет”, то есть понимать что важно и не важно в контексте знаний для работы с интерфейсом, который решает задачи. Инженеры любят поговорить.

✅ Разработал единую структуру приложения

Я сделал основными идеями последовательность и предсказуемость. Это избавит инженеров от лишних нагрузок и времени на решение задач. Слева всегда область с данными и навигация. По справа всегда визуализация. Справа (опционально) появляется область для доп. настройки какого-то исключительного аспекта.

✅ Регулярно презентовал новые фич

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

✅ Умею приготовить вкусно графики

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

✅ Успешно защитил концепцию редизайна перед стейкхолдерами

Перед стартом проекта собрал концепцию и презентацию, защитил ее перед стейкхолдерами.