Интерактивный прототип мониторинга для распределённой генерации
Клиент: «Честная Генерация». Масштаб: система мониторинга электростанций.
О клиенте и задаче
«Честная Генерация» следит за распределёнными электростанциями и дизель-генераторами. Диспетчерам и инженерам нужны актуальные данные по объектам — без тяжёлых таблиц и устаревших экранов.
Задача — показать на карте нагрузку, моточасы, температуру и статус десятков станций так, чтобы за пару касаний дойти от общей картины до конкретного агрегата.
Проблема
Данные уже были, но ими было неудобно пользоваться. На карте несколько станций выглядели как «точки», без понятной связи со списком слева. Найти нужный объект и понять, что с ним происходит, занимало лишнее время.
На объекте открывать те же экраны со смартфона было ещё сложнее: интерфейс не был заточен под полевую работу диспетчера и оператора.
Нужен был единый стиль «Честной Генерации»: от карты — к станции — к агрегату за 1–2 шага, на любом устройстве.
Решение
Десктоп: карта → станция → агрегат
Собрали интерактивный прототип монитора: понятные сценарии для диспетчерской и выезда на объект. Цепочка простая — карта, станция, ДГУ, параметры и история.
На карте у каждой станции — свои подписи с ключевыми цифрами: мощность, моточасы, температура. Навели на объект в списке — подсветился и на карте. Диспетчер сразу видит, о какой станции речь.
У станций и генераторов — живые карточки: показатели обновляются сами, без ручного обновления страницы. Оператор видит состояние оборудования «здесь и сейчас».
Один и тот же продукт на трёх экранах: большой монитор в диспетчерской, планшет и смартфон на площадке. Одинаковая логика, разная плотность интерфейса.
Прототип работает на реальных данных заказчика — можно проверять сценарии до полной промышленной версии.
Результаты
Готовый прототип с живыми данными по четырём объектам. На карте сводка: установленная мощность 12+ МВт и средняя нагрузка около 59% — без перегруженных отчётов.
Один интерфейс для десктопа, планшета и телефона. От карты до проблемного агрегата — до двух шагов, меньше риск пропустить аварию.
Связка списка и карты снижает путаницу и ускоряет работу диспетчеров и операторов на местах.
«Честная Генерация» может обкатывать мониторинг на прототипе до запуска полноценной системы.
Как мы работали
-
1
Аудит текущей системы
Провели анализ существующего API и UX для выявления основных проблем.
-
2
Проектирование пользовательских сценариев
Разработали сценарии использования для различных типов пользователей.
-
3
Создание прототипа
Разработали интерактивный прототип на Vanilla JavaScript.
-
4
Интеграция с API
Подключили прототип к production API через nginx-прокси.
-
5
Адаптация под разные устройства
Создали адаптивные макеты для десктопа, планшетов и мобильных устройств.
-
6
Тестирование и доработка
Провели тестирование прототипа и внесли необходимые изменения.
Сомнения перед проектом
«Сложно ли будет обучать сотрудников?»
Интерфейс разработан с учетом простоты и интуитивности, что облегчит обучение.
«Как быстро мы увидим результаты?»
Рабочий прототип доступен уже в ходе разработки, что позволяет оперативно оценить эффективность.
«Что если API не будет работать?»
Встроен механизм fallback на демо-данные для обеспечения стабильной работы системы.
Итог проекта
Проект по созданию прототипа мониторинга для «Честная Генерация» продемонстрировал, как современный подход к разработке интерфейсов может существенно повысить эффективность работы в сфере энергетики. В результате был создан единый прототип, который успешно интегрируется с live API, обеспечивая доступ к критически важной информации в реальном времени.
Нас часто спрашивают
