Flow Station

Отрасль

Design

Роль

Competarios

Команда

1 Product Manager
1 Frontend
2 Backend

Дата

March 2025

In the realm of visual arts, the term 'shape' pertains to a defined, two-dimensional space portrayed using lines, hues, or tangible textures, or an area delineated by other geometric figures like trapezoids, rectangles, and spheres.

Отрасль

Design

Роль

Competarios

Команда

Illustration

1 Product Manager
1 Frontend
2 Backend

Дата

March 2025

Проблема

Старая версия телеметрии стала блокером для крупных сделок. Интерфейс был рассчитан на малый бизнес: он не выдерживал масштабирования. Техподдержка тонула в однотипных тикетах

Проблема

Ограничения

Сложный B2B-продукт с интеграциями и IoT-спецификой нужно было спроектировать и запустить в условиях жесткого дефицита ресурсов

Ограничения

Задачи от бизнеса

Снизить нагрузку на техподдержку

Перепроектировать интерфейс, чтобы пользователи могли решать типовые задачи сами, не обращаясь в саппорт

Обеспечить полный контроль над сетью

Дать клиентам дашборд с мониторингом 24/7. Связать телеметрию с «Вендистой» (эквайринг) и «МоимСкладом» (учет товаров), а сервисные алерты выводить в Telegram для моментальной реакции техников

Ускорить запуск новых функций

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

Выпустить инструменты для роста выручки

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

Запустить мобильную версию

Адаптировать платформу под смартфоны (на них приходится 67% сессий), чтобы пользователи могли управлять сетью на ходу, без привязки к компьютеру

Почему старая система не работала

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

Персоны

Переход от штучных продаж к Enterprise-сетям изменил парадигму продукта. Если в малом бизнесе автоматом управляет один человек, то в крупных сетях систему делят люди с разными задачами.

Малая сеть

Средняя сеть

Крупная сеть

Техник

Техподдержка

Стратегия: софт как драйвер продаж оборудования

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

Анализ рынка

Shaker

0 ₽/мес

Модем: уже в автомате

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

Telemetron

400 ₽/мес

Модем: 12 000 ₽

Крупнейший игрок в СНГ. Бизнес-модель строится на стартовой продаже универсальных модемов (высокий порог входа) и обязательной абонентской плате за доступ к статистике каждой точки

KitVending

350 ₽/мес

Модем: 7 000 ₽

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

Televend

500-1200 ₽/мес

Модем: 30 000 ₽

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

Матрица функционала

Функция

Shaker

Shaker (old)

Telemetron

KitVending

Televend

Автоматы

Поддерживаемые
автоматы

Только Shaker

Любые

Подключение
автомата

Легко

Много полей

Сложно

Добавление
новой модели

Легко

Сложно

Мульти-вендинг

Да

Нет

Эргономика

Визуальная
чистота (UI)

Фокус на главном

Устаревший

Перегружен

Устаревший

Когнитивная
нагрузка

Логичные блоки

Высокая

Линейный список

Мобильная
версия

Полный адаптив

Нет

Базовая

Тёмная тема

Да

Нет

Управление

Шаблоны
торговых матриц

Да

Нет

Сложно

Да

Массовое
изменение

В 1 клик

Нет

Задержки

Ограничено

Да

Синхронизация

цен

Мгновенно

Задержки

Да

Интеграции

Учёт товаров

Да

Нет

Сложно

Уведомления

в Telegram

Интеракти-вные

Нет

Текстовые логи

Маркетинг

Промокоды

Гибкая настройка

Базовая версия

Нет

Сложный запуск

Да

База клиентов

Да

Нет

Да

Онбординг оборудования за 30 секунд

Раньше подключение нового автомата было «узким горлышком». Клиентам приходилось вручную вбивать серийные номера, ID контроллеров и настройки сети. Из-за перегруженности процесса ~60% новых подключений заканчивались звонком в техподдержку.

ШАГ 1

Сервисное меню

Откройте сервисное меню
и перейдите в раздел авторизации

Открываем сервисное меню и переходим
в раздел авторизации

ШАГ 2

REG-ключ

Поднесите REG-ключ
со смартфона к сканеру автомата

Открываем сервисное меню и переходим
в раздел авторизации

ШАГ 3

Синхронизация

Автомат считает REG-ключ
и мгновенно подключится
к системе телеметрии

Открываем сервисное меню и переходим
в раздел авторизации

Результат

Время подключения сократилось до 30 секунд. Нагрузка на саппорт по вопросам настройки упала в разы

Результат

Время подключения сократилось до 30 секунд. Нагрузка на саппорт по вопросам настройки упала в разы

Результат

Время подключения сократилось до 30 секунд. Нагрузка на саппорт по вопросам настройки упала в разы

Дашборд инцидентов: проверка сети за 2 минуты

Раньше владельцам приходилось вручную проверять сотни строк в таблицах. Утренний мониторинг сети занимал до 15 минут. Я спроектировал дашборд по принципу Exception-Based Management: интерфейс скрывает исправное оборудование и фокусирует внимание владельца только на инцидентах.

Результат

Мониторинг сети из 50+ точек занимает 2 минуты вместо 15. Владелец видит проблему до того, как она превратится в убыток.

Результат

Контроль сети

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

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

Результат

Владельцы решают до 80% инцидентов самостоятельно без помощи первой линии поддержки. Время на диагностику конкретного автомата сократилось до пары кликов.

Результат

Точная аналитика продаж и возвраты в один клик

Раньше владельцам приходилось сводить отчеты вручную, сверяя данные телеметрии с банковскими выписками. Интеграция с API эквайринга объединила управление оборудованием и финансами: теперь вся экономика сети доступна в едином интерфейсе.

Если автомат не выдал напиток, оператору больше не нужно искать платеж в банковской системе. Вся история транзакций, типы оплат (NFC, QR, карта) и статусы находятся под рукой. Оформить возврат клиенту можно прямо из строки заказа за пару секунд.

Результат

Бизнес получил единую точку контроля над финансами и оборудованием. Время на возврат средств недовольному клиенту сократилось с 3 минут до 30 секунд — саппорту больше не нужно искать платеж в сторонних банковских кабинетах, транзакция отменяется в пару кликов.

Результат

Складской учет: контроль товаров и защита от «серых» потерь

Чтобы минимизировать «серые» потери, мы внедрили легкий складской учет. Каждый автомат стал виртуальным микро-складом. Система автоматически сверяет фактические остатки ингредиентов с выручкой и моментально подсвечивает аномалии.

Автомат как микро-склад

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

Автомат как микро-склад

Прозрачное перемещение

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

Прозрачное перемещение

Сверка

На складе автомата находятся товары которые лежат в тумбе. Система списывает остатки в момент обслуживания. Любое расхождение — это моментальный сигнал о махинациях персонала или сбое.

Сверка

Результат

Запуск базовой версии (MVP) позволил владельцам связать расход сырья с реальной выручкой. Слепые зоны закрыты: бизнес точно знает, где лежит каждый килограмм сырья, что позволяет оптимизировать закупки и пресекать воровство на корню.

Результат

Автоматизация диспетчерской: умные алерты в Telegram

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

Мониторинг

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

Открываем сервисное меню и переходим
в раздел авторизации

Аналитика

Бот сообщает об исправлении и фиксирует время решения для оценки эффективности команды

Открываем сервисное меню и переходим
в раздел авторизации

Результат для бизнеса

Мгновенная доставка уведомлений сократила время реакции на поломки в 3 раза. Снижение Downtime спасает до 10% дневной выручки на проблемных точках.

Результат для бизнеса

Промокоды для роста продаж и удержания клиентов

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

Быстрая генерация

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

Быстрая генерация

Точечная настройка

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

Точечная настройка

Результат

Гибкая настройка превратила промокоды в инструмент управления выручкой. Массовая генерация сократила время запуска акций до пары минут. Скидки по расписанию загружают «мертвые» часы, давая до 15% прироста утренней выручки, а быстрые Sorry-промокоды при сбоях автоматов помогают возвращать до 40% недовольных клиентов.

Результат

Удержание клиентов: CRM и экономика программы лояльности

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

Статистика

Дашборд экономики лояльности. На первый план выведен «виртуальный долг» сети. Интерактивный график с прогнозом (run-rate) помогает планировать кэшфлоу до конца месяца.

Статистика

Сегментация базы

Сортировка по последней транзакции сразу подсвечивает «горячих» клиентов. Фильтры позволяют в пару кликов собрать сегмент «спящих» пользователей для реактивации промокодами.

Сегментация базы

Результат

Бизнес взял под контроль экономику баллов. Маркетинг перешел от массовых скидок к точечным кампаниям: сегментация помогает возвращать «спящих» клиентов и растить LTV без потери маржи.

Результат

Массовое изменение: обновление меню и цен в пару кликов

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

Эталонная матрица

Собираем единый пресет: задаем ассортимент, цены и точные дозировки ингредиентов. Эта матрица становится стандартом для выбранной группы оборудования.

Эталонная матрица

Групповое управление

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

Групповое управление

Мгновенная раскатка

Шаблон применяется на выбранных автоматах в один клик. Система мгновенно обновляет цены и сразу формирует актуальные листы загрузки для техников.

Мгновенная раскатка

Результат

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

Результат

Мобильная версия

Около 67% пользователей заходят в систему со смартфонов. Чтобы дать пользователям инструмент для работы «на ходу», я адаптировал ключевой функционал десктопа под мобильную версию.

Результат

Релиз мобильной версии полностью закрыл потребности аудитории. Весь функционал десктопной платформы теперь доступен в мобильном интерфейсе без ограничений и потери возможностей.

Результат

Дизайн-система: масштабируемость и скорость разработки

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

Токены

Базовые переменные: цвета, шрифты, отступы

Атомы

Неделимые элементы интерфейса: иконки, кнопки и поля ввода

Молекулы

Простые компоненты, собранные из нескольких атомов

Организмы

Сложные блоки, состоящие из атомов и молекул

Шаблоны

Структурный каркас экрана без реальных данных

Финальный экран

Готовый макет

Готовый макет с реальными данными для передачи в разработку

Системные константы

Отступы, скругления и размеры контейнеров зашиты в Variables. Это исключает «прыгающие» пиксели и гарантирует идеальный ритм на любом экране.

Системные константы

2 px

4 px

8 px

12 px

16 px

20 px

24 px

32 px

40 px

48 px

64 px

80 px

96 px

Цвета

В условиях ограниченных ресурсов мы отказались от тяжелых палитр с оттенками. Цвета привязаны напрямую к функциям (например, bg/primary). Такая плоская архитектура переменных позволила быстро и без костылей собрать Dark и Light темы.

Цвета

Типографика

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

Типографика

Montserrat

Regular

Medium

Semibold

2XS · 10/16

XS · 12/18

S · 14/20

M · 16/22

L · 18/24

XL · 20/26

2XL · 24/30

3XL · 32/38

4XL · 48/54

Графика

База из 300+ иконок и набор иллюстраций для пустых экранов и ошибок. Для масштабирования библиотеки я внедрил правила отрисовки: строгая пиксельная сетка, фиксированная толщина линий и единый шейп.

Графика

Компоненты

База из 200+ элементов с учетом всех состояний. Использование Auto Layout и вложенных вариантов позволяет собирать новые экраны как конструктор, ускоряя работу дизайна и фронтенда.

Компоненты

Результат

Внедрение системы ускорило сборку новых экранов на 30–40% и полностью избавило фронтенд от пиксель-хантинга. Единая архитектура смарт-компонентов сократила визуальные баги на этапе QA почти на 80%, позволив бизнесу дешево и предсказуемо масштабировать продукт.

Результат

Итоги: от хаоса к управляемой системе

Проект Shaker доказал, что дизайн в сложном B2B — это прежде всего инструмент операционной эффективности. Нам удалось решить все ключевые задачи, поставленные на старте.

–80%

Запросов в техподдержку. Пользователи решают типовые проблемы сами

67%

Трафика со смартфонов. Интерфейс полностью адаптирован под мобильные сценарии

100%

Контроль над сетью. Интеграция с Vendista и МойСклад, алерты в Telegram для мгновенной реакции

+40%

К скорости релизов. Дизайн-система сократила время сборки и исключила визуальные баги

+15%

К выручке в часы спада. Программа лояльности помогает управлять спросом и растить LTV

Чему меня научил этот кейс

Проект Shaker Telemetry стал для меня вызовом в проектировании сверхплотных интерфейсов. Главный вывод: в сложном B2B эстетика — это лишь производная от эффективности.

Дизайнер должен мыслить как архитектор данных

Работа над Shaker Telemetry научила меня проектировать не экраны, а состояния системы. Когда количество объектов растет с 5 до 100+, привычные паттерны (таблицы, списки) ломаются. Единственный способ сохранить контроль на масштабе — переход к модели управления по отклонениям

Техническая грамотность — это страховка продукта

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

Эстетика в B2B вторична

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

Планы по развитию

Новая телеметрия заложила фундамент для масштабирования Shaker из производителя оборудования в полноценную софтверную экосистему. Следующие шаги:

Логистика и карты

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

Логистика и карты

Приложение для техников

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

Приложение для техников

Маркетплейс расходников

Интеграция магазина ингредиентов с автоматическим формированием корзины на основе прогноза остатков на складах

Маркетплейс расходников

Создадим крутой

проект вместе?

Создадим крутой

проект вместе?

Создадим крутой

проект вместе?

Напиши мне — обсудим задачи и сотрудничество

Напиши мне — обсудим задачи
и сотрудничество

Написать в Telegram

Точная аналитика продаж и возвраты в один клик

Результат

Бизнес получил единую точку контроля над финансами и оборудованием. Время на возврат средств недовольному клиенту сократилось с 3 минут до 30 секунд — саппорту больше не нужно искать платеж в сторонних банковских кабинетах, транзакция отменяется в пару кликов.

Результат

RELATED PROJECTS

VIEW ALL PROJECTS