Kilo IoT

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

IOT / B2B / B2B2C / B2B2B / MVP
Роль
Product Designer / Product Analyst
Период
2024–2026
Команда
Product owner, разработчики, QA и дизайнеры
Ограничения
NDA: данные и часть визуальных деталей изменены
Коротко
Проблема

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

Решение

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

Результат

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

/ 001

Контекст

Kilo IoT — B2B-платформа, которая развивается в моделях B2B2C и B2B2B. Пользователь работает не с одним экраном, а с цепочкой зависимых сущностей: коннектор передаёт данные, устройство хранит метрики, виджет показывает их, а правило или аларм реагирует на изменения.

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

/ 002

Подключение устройств

У LoRaWAN, MQTT и трекеров разная техническая логика. Пользователь при этом хочет получить один понятный ответ: что подключать, какие данные понадобятся и что делать, если соединение не работает.

  • Разделили выбор подключения и его настройку.
  • Сделали отдельные ветки для облачного и внешнего MQTT.
  • Добавили состояния проверки и ошибки.
  • Связали коннекторы со списком устройств.
  • Мастер устройства разложили на шаги: описание, подключение, маппинг данных и команды.
Путь целиком: подключить коннектор, увидеть пришедшие с него устройства, описать устройство и отправить ему команду. Последний слайд — рабочая карта, из которой этот путь собирался.
/ 003

Дашборды и управление

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

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

Дашборд собирается из виджетов, у каждого — источник данных, пороги и внешний вид. Управляющие контролы проработаны во всех состояниях: их нажатие меняет состояние оборудования, а не картинку на экране.
/ 004

Алармы

Здесь важно было развести само событие и правило, которое его создаёт. Мы разделили входящие срабатывания, определения алармов и настройки, а сложные параметры собрали в последовательный сценарий.

Событие и правило разведены: во входящих видно, что случилось, в определениях — почему. Сложные параметры (важность, цепочка эскалации, расписание, подавление дублей) собраны в один последовательный сценарий.
/ 005

Правила

Алармы отвечают на вопрос «что случилось». Правила отвечают на вопрос «что с этим сделать». Мы сделали визуальный редактор на BPMN: пользователь собирает сценарий из нод прямо на холсте, не открывая код.

  • Ноды: старт по сообщению, шлюз с условием, вызов внешнего API, обогащение данными, скрипт, команда на устройство, создание аларма и обработка ошибки.
  • Холст: режимы просмотра и редактирования, drag & drop, автосохранение и история версий.
  • Деплой: правило собирается в контейнер, перед сборкой проверяется корректность схемы, есть реестр артефактов и остановка контейнера.
  • Отладка: точки останова, значения переменных, watch и пошаговый проход по схеме.
Пользователь собирает сценарий из нод на холсте, настраивает каждую в панели справа, собирает правило в версию и проходит его по шагам в отладке. Последний слайд — разбор всех нод: назначение, поля и переменные на входе и выходе.
/ 006

Дилерская модель

Следующим уровнем стала B2B2B-модель. Дилер управляет клиентами, сотрудниками, тарифами и white label, а иногда входит в организацию клиента для поддержки.

Нужно было не просто добавить новые страницы, а определить роли, границы доступа и различия между обычным пользователем, дилером и дистрибьютором.

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

AI-агент

Мы рассматривали AI не как отдельный чат, а как новый способ управлять платформой. Агент должен объяснять состояние системы и помогать выполнять действия: подключить устройство, создать аларм или собрать виджет.

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

Устройство подключается прямо в диалоге: агент отчитывается о каждом вызове и в конце показывает карточку результата. Модель можно подключить свою — тогда лимит запросов на тарифе перестаёт ограничивать работу.
/ 008

Дизайн-система

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

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

Стили: Alliance №2 в заголовках, тексте и кнопках, Simplon Mono в параграфах. Цветовые токены живут в двух темах — светлая в Кило по умолчанию.
Компоненты: атом с зафиксированными состояниями, из него молекула. У модалок описаны отступы и размеры текста — правило можно проверить, а не обсуждать.
/ 009

Результат

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

Главный результат моей работы на стадии MVP — согласованная модель продукта, проработанные сценарии и система, которую команда может дальше развивать.

Следующий кейсКреатор →