Система удалённого мониторинга BMS

Система удалённого мониторинга BMS

B2B-сервис
UX-проектирование
UI-дизайн
Highload-сервис
Time & Material

О проекте

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

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

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

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

— Евгений Черниговский, Global Software Manager

Видео

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

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

case-page01
Прототипы MVP версии

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

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

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

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

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

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

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

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

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

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

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

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

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

— Евгений Черниговский, Global Software Manager

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

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

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

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

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

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

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

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

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

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

case-page01
Дашборд в дизайне

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

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

Заключение

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

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

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

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

— Евгений Черниговский, Global Software Manager


Над проектом работали

icon
Евгения
Аккаунт-менеджер
icon
Вадим
Руководитель отдела управления проектами
icon
Рома
UI-дизайнер

Другие кейсы

Редизайн антивирусного ПО PRO32

UX-проектирование
UI-дизайн
Редизайн
+ ещё 1

Цифровая экосистема для AI-управления финансами для Нескучных Финансов

B2B-сервис
UX-проектирование
Highload-сервис
+ ещё 4
Сервис онлайн-покупки билетов на мероприятия Quick Tickets

Сервис онлайн-покупки билетов на мероприятия Quick Tickets

UX-проектирование
UI-дизайн
B2C
+ ещё 2

Корпоративный сайт «Сибирской горно-металлургической компании»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 1
Дизайн личного кабинета и аналитика мобильного приложения Sminex

Дизайн личного кабинета и аналитика мобильного приложения Sminex

UX-проектирование
UI-дизайн
Личный кабинет
+ ещё 2

Новый сайт «Роскадастра»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 1
UX-аналитика и дизайн для «АО Медицина»

UX-аналитика и дизайн для «АО Медицина»

UX-проектирование
UI-дизайн
UX-аудит
+ ещё 1
Корпоративный сайт «Банк Эсхата»

Корпоративный сайт «Банк Эсхата»

UX-проектирование
UI-дизайн
Редизайн
+ ещё 1

Корпоративный сайт «Нового Втормета»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 1
Сервис поиска научных статей Litsystem для Медси

Сервис поиска научных статей Litsystem для Медси

UX-проектирование
UI-дизайн
B2C-сервис
Юзабилити-тестирование сайта «МойОфис»

Юзабилити-тестирование сайта «МойОфис»

Юзабилити-тестирование
UX-исследование
Корпоративный сайт

Сайт стоматологической клиники АГАМИ

UX-проектирование
UI-дизайн
Time & Material
+ ещё 4
Система управления умными счётчиками ЖКХ для Связь инжиниринг М
1 награда

Система управления умными счётчиками ЖКХ для Связь инжиниринг М

B2B-сервис
UX-проектирование
UI-дизайн
+ ещё 1
UX-тестирование и редизайн ключевых страниц интернет-магазина Faberlic

UX-тестирование и редизайн ключевых страниц интернет-магазина Faberlic

UX-проектирование
UI-дизайн
Интернет-магазин
+ ещё 3

Продуктовый листинг и товарный лендинг для «Ангстрема»

UX-проектирование
UI-дизайн
E-commerce
+ ещё 3
Личный кабинет клиента Scania
7 наград

Личный кабинет клиента Scania

UX-проектирование
UI-дизайн
Личный кабинет

Лендинг к 10-летию Российского научного фонда

UI-дизайн
Спецпроект
Анимации
+ ещё 2

Цифровая экосистема для интегратора образовательных услуг «Просвещение»

UX-проектирование
Цифровая экосистема
UX-исследование
+ ещё 1
Корпоративный сайт для РСХБ Лизинг
4 награды

Корпоративный сайт для РСХБ Лизинг

UX-проектирование
UI-дизайн
Бизнес-анализ
+ ещё 1
Корпоративный сайт Unigreen Energy
2 награды

Корпоративный сайт Unigreen Energy

UI-дизайн
Time & Material
Бизнес-анализ
+ ещё 1
Аналитика и проектирование b2b-портала для «Восток-Запад»

Аналитика и проектирование b2b-портала для «Восток-Запад»

B2B-сервис
UX-проектирование
Личный кабинет
Личный кабинет клиента Soax

Личный кабинет клиента Soax

B2B-сервис
UX-проектирование
UI-дизайн
+ ещё 2
Суперапп по контролю за здоровьем для фармацевтической компании Протек
3 награды

Суперапп по контролю за здоровьем для фармацевтической компании Протек

UX-проектирование
UI-дизайн
Бизнес-анализ
+ ещё 1
Новый сайт GMS Clinic
1 награда

Новый сайт GMS Clinic

UX-проектирование
UI-дизайн
Исследование пользователей
+ ещё 5
Личный кабинет и админ-панель для обучающей платформы Puzzle Brain

Личный кабинет и админ-панель для обучающей платформы Puzzle Brain

UX-проектирование
UI-дизайн
Личный кабинет
+ ещё 1

Редизайн корпоративного сайта Extyl

Редизайн
Корпоративный сайт
Личный кабинет для оплаты коммунальных платежей ТОСК
2 награды

Личный кабинет для оплаты коммунальных платежей ТОСК

UX-проектирование
UI-дизайн
Личный кабинет
Личный кабинет HR-партнёра Ингосстрах
2 награды

Личный кабинет HR-партнёра Ингосстрах

B2B-сервис
UX-проектирование
UI-дизайн
+ ещё 3
Мобильное приложение «Умный двор» для Lanta

Мобильное приложение «Умный двор» для Lanta

UX-проектирование
UI-дизайн
Мобильные приложения
Дизайн облачного сервиса TDCloud для Ресэнерго

Дизайн облачного сервиса TDCloud для Ресэнерго

B2B-сервис
UX-проектирование
UI-дизайн
UX-исследование и тестирование на респондентах для АО «Медицина»

UX-исследование и тестирование на респондентах для АО «Медицина»

Исследование пользователей
Юзабилити-тестирование
Мобильные приложения
+ ещё 1
Ювелирный маркетплейс GoldPrice

Ювелирный маркетплейс GoldPrice

UI-дизайн
Редизайн
Личный кабинет
+ ещё 1
Обсудить проект