Проектирование и дизайн системы удалённого мониторинга энергоблоков на танкерах

Международная компания AYK Energy обратилась к нам с задачей разработать интерфейс BMS (Battery Management System). Это система, которая позволяет собирать и анализировать данные в режиме реального времени, чтобы оптимизировать безопасность батареи и ее жизненный цикл.

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

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

В рамках работы над проектом было решено:

— провести аналитику и определить ключевые функции системы, чтобы учесть их в интерфейсе BMS;

— реализовать дашборд с гибкой фильтрацией, чтобы инженеры могли работать с большим объёмом данных;

— разработать вложенную навигацию по всем клиентам и их батареям с выводом самой приоритетной информации в свёртнутом состоянии;

— разработать гибкую дизайн-систему и свободную сетку, чтобы обеспечить возможность легкого изменения или удаления блоков;

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

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

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

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

Для основного дашборда выделили три наиболее важные функции и отобразили их в прототипе:

1. Контроль стабильности батарей (All batteries)

2. Получение сообщений об ошибках (Alarm logs)

3. Быстрое действие создания запроса (Request Trace log) и его получение (Trace log)

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

Чтобы одновременно показывать разные метрики (например, вольтаж и температуру), мы перевели их процентные соотношения, где 0% — минимальное значение за период, а 100% — максимальное.

Для огромного массива данных, которое формирует Trace log, потребовалась удобная фильтрация по многоуровневой структуре.

В системе может располагаться около 2400 элементов, которые формируют десятки показателей каждую секунду. Для удобства мы разработали навигацию по всем уровням элементов на странице фильтров (Filters).

Все батареи вложены в проекты (Projects) и закреплены за клиентами (Customers). Инженеру нужна возможность быстрого поиска батарей по клиентам. Мы разработали его в виде таблицы с раскрывающимися списками и разместили на отдельной вкладке на экране с батареями. В свёрнутом состоянии мы видим общее количество проектов, батарей и самый проблемный статус для вложенных батарей.

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

В мудборд вошли примеры того, как можно оформить интерфейс в целом, а также предложения по основным элементам (таблицы, сложные фильтры и графики).

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

Далее мы отрисовали экраны всех 14 разделов системы. Проработали все состояния и сценарии для последующей разработки и отрисовали UI-kit с состояниями мелких элементов.

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

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

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

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