Управление промокодами

Время прочтения ~6 минут

Отрасль

B2B Saas / IoT

Роль

Product Designer

Команда

1 PM, 1 Frontend, 2 Backend

Дата

2025

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

Проблема

Старая телеметрия тормозила контракты с крупными сетями. Клиентам не хватало рычагов для роста продаж и возврата покупателей.

Проблема

Старая телеметрия тормозила контракты с крупными сетями. Клиентам не хватало рычагов для роста продаж и возврата покупателей.

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

Защитить прибыль бизнеса

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

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

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

Ускорить запуск акций

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

Превратить софт в драйвер выручки

Дать сетям инструмент для управления спросом. Внедрить гибкое расписание скидок для привлечения трафика в «мертвые часы».

Аудит текущего решения

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

Ключевые проблемы

Ограничения для крупных сетей

Система не готова к задачам крупных сетей. Без фильтров, группировки по кампаниям и экспорта в Excel аналитика данных превращается в ручной труд. Отсутствие масок (например, SALE-XXXX) при генерации лишает маркетологов контроля над брендами и каналами трафика.

Сложный процесс создания промокода

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

Плохая считываемость данных

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

Отсутствие обратной связи

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

Исследование целевой аудитории

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

к системе.


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

Текущий опыт

Расскажите, как вы планировали и запускали последнюю акцию. Какие условия и ограничения

вы для неё закладывали?

Опишите по шагам процесс решения проблемы, когда клиент жалуется на сбой в автомате. Как вы передаете компенсацию?

Вспомните последнюю успешную (или провальную) акцию. Как именно вы поняли, что она сработала
или нет? На какие метрики смотрели?

Вспомните последнюю успешную (или провальную) акцию. Как именно вы поняли, что она сработала
или нет? На какие метрики смотрели?

Боли

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

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

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

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

Работа с текущей версией

Как вы проверяете, какие промокоды сейчас активны
в сети, а какие уже завершились?

Как вы проверяете, какие промокоды сейчас активны
в сети, а какие уже завершились?

Вспомните, как вы искали конкретный промокод в базе в последний раз. Как был устроен этот процесс шаг за шагом?

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

Расскажите о случае, когда в настройки запущенного промокода закралась ошибка. На каком этапе она обнаружилась и к чему это привело?

Ожидания

Как вы сейчас сводите данные по акциям для отчетов бухгалтерии или маркетингу? Какую информацию приходится собирать и переносить вручную?

Какую регулярную задачу, связанную с акциями, вы бы с радостью полностью делегировали сотруднику, чтобы больше никогда не делать её самому?

Как вы сейчас ориентируетесь в большом массиве акций? Какую логику сортировки вы пытаетесь выстроить в уме или с помощью сторонних таблиц?

Какую регулярную задачу, связанную с акциями, вы бы с радостью полностью делегировали сотруднику, чтобы больше никогда не делать её самому?

Список Job stories

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

Маркетинг и продажи

Экспресс-поддержка

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

Управление спросом

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

Оптимизация остатков

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

Брендирование и трафик

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

Локальный старт

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

Тестирование гипотез

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

Управление и эффективность

Снижение ошибок

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

Защита от убытков

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

Сверка и отчетность

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

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

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

Офлайн-уверенность

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

Масштабирование

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

Анализ конкурентов

Я проанализировал Briskly как стандарт в микромаркетах и Shopify как эталон в управлении скидками и Bitrix
как пример работы с быстрыми сценариями, чтобы найти баланс между технической спецификой IoT-устройств и мощной логикой настройки промокодов.

Выводы из анализа

Контроль ошибок (Shopify)

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

Быстрые сценарии (Bitrix)

Сокращаем путь пользователя. Компактные модальные окна позволяют создавать промокоды компенсации за один клик в экстренных ситуациях.

Создание промокода (Shopify)

Фокусируем на главном. Разбивка процесса на логические этапы без визуального шума упрощает настройку сложных акций.

Подбор ассортимента (Briskly)

Ускоряем запуск кампаний. Гибкие фильтры позволяют применять скидки к целым категориям товаров (например, «Все напитки») за пару секунд.

Расписание (Briskly)

Управляем спросом. Визуальный конструктор «счастливых часов» помогает эффективно распределять нагрузку на автоматы в течение суток.

Система статусов (Shopify)

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

Гипотезы решений

Я сформулировал дизайн-гипотезы на основе исследований. Чтобы в будущем оценивать результат не вслепую, мы с продакт-менеджером сразу закрепили за каждой гипотезой метрики успешности.

Динамическое превью (защита от ошибок)

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

🔍 Основание: Job Story «Защита от убытков», опыт Shopify.
🎯 Целевая метрика: –50% Error Rate (ошибки при создании).

Снижение когнитивной нагрузки при создании промокода

💡 Гипотеза: Разбивка формы на логические шаги уберет визуальный шум и поможет вводить данные без ошибок.
🔍 Основание: Job Story «Снижение ошибок», опыт Shopify.
🎯 Целевая метрика: 90–95% Task Completion Rate (сессии без возвратов для исправлений).

Визуальный контроль и масштабирование

💡 Гипотеза: Цветовая индикация статусов в таблице позволит мгновенно считывать информацию и ускорит навигацию. 🔍 Основание: Job Stories «Масштабирование» и «Контроль состояния», опыт Shopify.
🎯 Целевая метрика: -20% Search Time (снижение времени на поиск)

Быстрое создание промокода

💡 Гипотеза: Компактное модальное окно с автозаполнением радикально сократит время выдачи скидки клиенту.
🔍 Основание: Job Story «Эффективность поддержки», опыт Bitrix.
🎯 Целевая метрика: 40–45 сек Time on Task (время создания одной акции).

Расписание промокода

💡 Гипотеза: Настройка скидок по часам позволит привлекать трафик и выравнивать выручку в часы простоя.
🔍 Основание: Job Story «Управление спросом», опыт Briskly.
🎯 Целевая метрика: +10–15% Revenue per Hour (рост выручки в «мертвые часы»).

Проработка сценариев

Я перевел Job Stories в User Flow, чтобы визуализировать работу с промокодами. Спроектировал сценарии:
создание (массовых, одиночных, быстрых) промокодов, редактирования, удаления и экспорта (в Excel или QR). Схемы помогли оценить количество шагов, найти возможные ошибки и отсечь лишнее перед переходом к дизайну интерфейса.

Приоритизация сценариев

Модуль запускался с нуля. Чтобы быстрее дать бизнесу рабочий инструмент, мы с продактом и разработкой приоритизировали фичи по матрице «Ценность / Сложность» и разбили релиз на два этапа:

Этап 1 (MVP)

Этап 1
(MVP)

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

Этап 2 (масштабирование)

Быстрое создание, массовая генерация, расписание и экспорт QR. Защита от ошибок и запуск сложных кампаний без обращений в техподдержку.

Дизайн первой версии создания промокода

Я спроектировал базовый флоу MVP: от таблицы управления до настройки условий и выбора вендинговых автоматов.

UX-тестирование создания промокода

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

Легенда: Это прототип системы телеметрии для управления сетью вендинговых автоматов. Представьте, что в преддверии сезона вам нужно запустить маркетинговую акцию на новые вкусы. Используйте интерфейс системы, чтобы создать новый промокод «SUMMER25» со скидкой 20% и лимитом в 100 активаций. Промокод должен действовать только для аппаратов модели Milk Shaker S и распространяться на три конкретных вкуса молочных коктейлей: Banana, Blueberry и Cherry.

Ключевые наблюдения

Динамическое превью спасает от ошибок

Участники постоянно сверялись с блоком «Итого» перед сохранением формы. Это подтвердило главную гипотезу: чек-лист в реальном времени снимает страх совершить ошибку и потерять деньги.

Линейность вместо хаоса

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

100% успешных прохождений

8 из 8 респондентов успешно запустили сложную акцию (с лимитами и привязкой к конкретным аппаратам) с первого раза без подсказок модератора.

Работа с массивами данных

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

Управление жизненным циклом промокода

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


Основной фокус сделан на информативности и предотвращении ошибок. Я спроектировал систему боковых панелей (Side Sheets), чтобы менеджеры могли в два клика получить любую сводку (от базовых условий до истории активаций), не рискуя случайно изменить настройки или удалить активную кампанию.

Массовое управление и валидация статусов

Система блокирует удаление активных промокодов. Чтобы убрать акцию, оператор должен сначала перевести её в статус «Завершен», остановив списания. Любое из этих критических действий требует осознанного подтверждения, обеспечивая «второй слой» защиты от случайной потери дохода.

Быстрое создание промокода

Для 80% типовых задач менеджерам не нужны сложные фильтры по автоматам или расписание. Я вынес базовые настройки в компактное модальное окно. Это позволяет запустить стандартную акцию за 30 секунд прямо поверх таблицы, не уводя пользователя в полную форму.

Расписание промокода

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

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

Легенда: Маркетологу нужно запустить акцию «Счастливые часы» для фитнес-баров: — Будни (ПН–ПТ): утро (07:00–10:00) и вечер (19:00–22:00). — Выходные (СБ–ВС): день (10:00–16:00).

Итоги тестов

Ускорение пути в 2 раза

Ускорение пути
в 2 раза

Время на создание мульти-интервального расписания сократилось за счет снижения Interaction Cost (количества взаимодействий).

Качественный фитбек

Качественный
фитбек

Респонденты отметили, что форма «перестала пугать» объемом настроек.

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

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

  1. Токены

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

  1. Атомы

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

  1. Молекулы

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

  1. Организмы

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

  1. Шаблоны

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

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

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

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

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

2

4

8

12

16

20

24

32

40

48

64

80

96

Цвета

В условиях ограниченных ресурсов мы отказались от тяжелых палитр с оттенками. Цвета привязаны напрямую к функциям (например, 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 и вложенных вариантов позволяет собирать новые экраны как конструктор, ускоряя работу дизайна и фронтенда.

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

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

  1. Токены

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

  1. Атомы

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

  1. Молекулы

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

  1. Организмы

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

  1. Шаблоны

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

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

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

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

Отступы, скругления и размеры контейнеров зашиты в 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+ иконок и набор иллюстраций для пустых экранов и ошибок. Для масштабирования библиотеки я внедрил правила отрисовки: строгая пиксельная сетка, фиксированная толщина линий и единый шейп.

Компоненты

Я спроектировал библиотеку из 300+ адаптивных компонентов. Благодаря Auto Layout и Variants, сборка нового сценария теперь занимает минуты, а риск расхождения дизайна с кодом сведен к нулю.

Результат

Через месяц после внедрения обновленного модуля «Промокоды» команда Shaker замерила показатели продуктивности пользователей. Переход от перегруженных таблиц к системе с умной фильтрацией и защитой
от ошибок дал ощутимый бизнес-эффект.

< 30 сек

Time on Task

Запуск стандартной акции теперь занимает секунды. Мы убрали визуальный шум и вынесли базовые настройки в окно быстрого создания.

- 85%

Error Rate

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

- 35%

Search Time

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

+ 12%

Revenue per Hour

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

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

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

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

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

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

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

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

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

Create a free website with Framer, the website builder loved by startups, designers and agencies.