22 Октября 2021
Назад в блог

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

Проектирование и дизайн системы для инженеров.
О проекте

BMS (Battery Management System) — это стартап с производством в Китае системы управления крупными аккумуляторными батареями, которые располагаются на танкерах и стационарных точках по всему миру.

AYK Cloud System — это веб-система, которая состоит из базы данных, API для связи BMS и позволяет инженерам отслеживать состояние настроек аккумуляторных батарей, поставляемых пользователям.

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

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

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

Eugene Chernigovskiy, Global Software Manager

Видео
Интервью и проектирование

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

Прототипы MVP версии

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

  • Получение и обработка сообщений об ошибках (Alarm logs)
  • Создание запроса на получение данных за конкретный период (до 10 минут) с батареи (Request Trace Log)
  • Фильтрация и обработка данных Trace log (Filters)
  • Скрин батареи за час и более (Continiuos log A1)
  • Скрин батареи за сутки (Continious log A2)
  • Поиск батарей по проектам и их владельцам (Batteries)
  • Добавление батареи в систему и просмотр информации о ней (Add battery & Battery screen)

Схема передачи данных с BMS на вэб интерфейс через AYK

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

  1. Контроль стабильности батарей (All batteries)
  2. Получение сообщений об ошибках (Alarm logs)
  3. Быстрое действие создания запроса (Request Trace log) и его получение (Trace log)

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

Экран дэшборда и отфильтрованный график Trace log

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

Многоуровневая архитектура элементов BMS

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

Страница выбранных фильтров Trace log

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

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

Eugene Chernigovskiy, Global Software Manager

Страница всех батарей по владельцам

Дизайн и разработка

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

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

Мудборд по категориям

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

Все экраны дизайна для первой версии продукта

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

Фрагмент UI-кита

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

Дэшборд в дизайне

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

График Trace log с настроенными оффсетами

Заключение

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

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

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

«После отработки MVP на практике с реальными батареями планируется расширить инструменты контроля безопасности батарей, добавить доступ для конечных пользователей систем BMS, чтобы они могли контролировать свои батареи удаленно.»

Eugene Chernigovskiy, Global Software Manager

Благодарим клиента за возможность поучаствовать в столь масштабном проекте!

Контакты
Пишите
Звоните
Москва
Пресненская набережная, 8с1, башня «Москва», 58 этаж, офис 581
Тамбов
Кавалерийская, 7А