Назад RWB · Russ Online

CRM из нулевых, в которой кампания запускается за минуты

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

Роль
Ведущий продуктовый дизайнер
Команда
~50 человек, 3 команды, 2 дизайнера
Домен
AdTech + FinTech, B2B
Платформы
Web + мобильный адаптив
Результаты · 2025–2026
−40%

время создания кампании у менеджеров

−53%

ошибок при настройке кампании у внешних клиентов

−45%

технических обращений в поддержку

−35%

времени на распределение бюджетов

Группа Russ — крупнейший в России оператор наружной рекламы. Щиты, цифровые экраны и медиафасады в 150+ городах, аэропорты, вокзалы, метро, МЦК, МЦД и пункты выдачи Wildberries.

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

AdTechКампании на десятках тысяч поверхностей, модерация, programmatic и RTB
FinTechКошелёк, предоплата и постоплата, плательщики, счета, доверительное управление
МасштабДесятки тысяч экранов по всей стране и миллиарды выходов рекламы в месяц

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

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

  • Стратегия и приоритеты. Вместе с продактами решал, что и в каком порядке делаем, оценивая стоимость внедрения каждой фичи
  • Дизайн-система. Выстроил систему Russ поверх Тайги и синхронизировал её с фронтендом
  • Спецификации. Состояния, крайние случаи, валидация и поведение компонентов для разработки и QA
  • Исследования. Интервью с менеджерами, разбор обращений в поддержку, наблюдение за работой в системе
  • Процесс. Дизайн-ревью, дизайн-демо для бизнеса, приёмка вёрстки

Продукт собирали в начале 2000-х, и за 20 лет он оброс костылями. Остановить его и переписать было нельзя: бизнес рос и приносил новые задачи.

  • Дизайн-системы почти нет. Макеты собирали поверх скриншотов, из старых компонентов вперемешку с сырыми новыми
  • Легаси диктует дизайн. Любое изменение могло задеть финансовую логику
  • Ручные операции через поддержку. Смена плательщика — до часа ожидания, повторная модерация креатива — несколько часов
  • Жёсткий запуск. Без всех креативов кампанию не запустить, для правки её нужно остановить
  • Дорогая разработка. Каждая фича делалась с нуля, вопросы всплывали уже в вёрстке
Гипотеза

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

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

БрейкпоинтыЕдиная сетка от широких мониторов до телефона
Базовый лейаутОдна структура навигации и рабочей области для всех разделов
ТаблицыФильтры, поиск, массовые действия, экспорт, пустые состояния
КарточкиАльтернатива таблице для мобильных и обзорных экранов
Flow-результатыЭкраны успеха, ошибки и ожидания после финансовых действий
ТипографикаИ десятки компонентов с состояниями и правилами

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

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

Главная проверка для системы случилась, когда компания вышла за пределы наружной рекламы: аэропорты, вокзалы, метро, МЦК и МЦД.

Внутри мы звали эту задачу «зоопарк экранов»: десятки форматов поверхностей со своими правилами. Работа заняла 5 месяцев от исследования до релиза.

  • Новый сценарий создания кампании, который выдерживает наружку, транзит и будущие типы поверхностей
  • Новая логика добавления территорий размещения — обращений в поддержку стало меньше
  • Разделы «Клиенты» и «Отчёты»: менеджер видит цикл клиент → кампания → эфир → деньги

Без дизайн-системы транзит пришлось бы делать отдельным продуктом. С ней он стал расширением существующего.

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

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

Транзит принёс десятки новых параметров: терминалы, направления рейсов, зоны, форматы экранов, дневные и ночные ставки. Старая форма создания кампании их не вмещала, и я спроектировал новый мастер — пошаговый сценарий с картой и живой статистикой.

Паттерны я искал у сервисов, где человек выбирает из тысяч объектов на карте и сразу видит, во что обойдётся выбор.

Референс: Авито
АвитоФильтры в боковой панели поверх карты: результат обновляется сразу, без перехода на другую страницу.Панель «Фильтры» на шаге выбора поверхностей
Референс: Циан
ЦианКарта и список работают вместе, а тысячи объектов собираются в кластеры с числом внутри.Карта с кластерами и синхронный список поверхностей
Референс: Домклик
ДомкликКарточка в списке: фото, главные параметры и метки видны без открытия объекта.Карточка поверхности: фото, GID, зона, число экранов, часы работы
Референс: Ипотечные калькуляторы
Ипотечные калькуляторыДомклик, Банки.ру, Циан, Дом.ру: итог пересчитывается справа на лету, рядом подсказано рекомендуемое значение.Панель статистики и рекомендуемая стоимость выхода

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

  1. 1Основные параметры
  2. 2Размещение
  3. 3Выбор поверхностей
  4. 4Бюджет
Концепт мастера: четыре шага от основных параметров до ставок за выход. Карта, фильтры и статистика — из референсов выше. Данные в демо вымышленные.

Что показало тестирование

Прототип я проверил на респондентах из числа менеджеров и агентств.

Что сработало

Карта со списком. Респонденты быстро находили нужные поверхности и понимали, что уже выбрано. Панель фильтров узнавали сразу: паттерн знаком по сервисам недвижимости.

Что мешало

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

Почему не выпустили

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

Что выпустили

Мы выбрали вариант для опытных менеджеров: одна страница вместо четырёх шагов. Слева форма с общей информацией, стратегией, географией, территориями и бюджетом, справа карта со статистикой. Этот сценарий показан на обложке кейса.

Концепт4 шага
  1. Основные параметры
  2. Настройки размещения
  3. Выбор поверхностей
  4. Бюджет и ставки
Релиз1 страница
  1. Форма и карта на одной странице

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

Как я веду задачу от идеи до второй версии — на примере калькулятора программатик-кампании.

С калькулятором клиент сам прикидывает объём и стоимость размещения на уличных экранах и в ПВЗ ещё до заявки: выбирает регион, тип конструкции, количество экранов, дни и часы показа — и сразу видит сумму.

Подготовка
  1. Референсы
  2. Локальные компоненты
Макеты
  1. Десктоп
  2. Телефон 375
  3. Планшет 800
  4. Все состояния
  5. Заметки для разработки
Релиз
  1. Версия 1.0 в проде
  2. Интервью и опрос менеджеров
Доработка
  1. Версия 2.0

Референсы

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

Референсы калькулятора
Доска референсов: калькуляторы Домклика, Сбера и банков, внизу первые наброски калькулятора Russ.

Макеты и заметки для разработки

По ходу работы собираю локальные компоненты — сетку часов показа, слайдеры с быстрыми значениями, карточку итога — и из них десктоп, телефон на 375 px и планшет на 800 px. На доске показываю все состояния: пустой расчёт, ошибки валидации, выпадающие списки, изменённую ставку, скопированную ссылку, PDF.

Десктоп: состояния и заметки для разработкиДесктоп: состояния и заметки для разработки
Телефон, 375 pxТелефон, 375 px
Планшет, 800 pxПланшет, 800 px
Доска версии 1.0 в Figma: каждый экран в нескольких состояниях, рядом жёлтые стикеры с логикой работы.

Логику работы и заметки для разработчиков пишу прямо на доске, в жёлтых стикерах. Это и есть спецификация: разработчик видит правило рядом с экраном, к которому оно относится.

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

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

Логика работы · Сделать новый

При создании нового расчёта открываем его на новой странице.

Логика работы · PDF

Ссылку на онлайн-версию расчёта в PDF нужно сделать кликабельной.

1.0 → фидбек → 2.0

Версию 1.0 выпустили в прод, после чего я провёл интервью и опрос менеджеров. Выводов было два:

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

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

Калькулятор: в 1.0 форма уходила под скролл, в 2.0 все параметры и итог помещаются на один экран.
Страница результата: список параметров в 1.0 и карточки с выделенной суммой в 2.0.
PDF расчёта в той же логике: карточки и сумма отдельным блоком.
Доска версии 2.0
Доска версии 2.0: десктоп, телефон и PDF.

Правила, которые работают в каждой задаче

  1. Спецификация к каждой фиче. Состояния, крайние случаи, валидация, тексты ошибок, правила расчётов
  2. Дизайн-демо до разработки. Бизнес даёт обратную связь на макетах, а не на готовом коде
  3. Рассылки перед релизом. Пользователи заранее знают, что поменяется
  4. Ревью вёрстки. Расхождения с дизайн-системой ловим до прода

Результат: ниже стоимость изменений, меньше нагрузки на поддержку, предсказуемые релизы.

Финансовая часть — самая чувствительная. Ошибка дизайна здесь превращается в неверный счёт или спор с клиентом.

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

Запуск→ Отчётный период→ Обращение в поддержку→ Ожидание замены→ Счёт

Было до 1 часа через поддержку, стало мгновенно — самим менеджером.

  • Кошелёк клиента. Баланс, резервы под кампании, списания и задолженность в одном месте
  • Финансы и счета. Единая табличная архитектура с понятными статусами
  • Доверительное управление. Передача управления бюджетом и кампаниями другому лицу с разграничением прав
  • Онлайн-калькулятор. Клиент сам прикидывает стоимость кампании до заявки
Смена КПП плательщика прямо в карточке пользователя: интерфейс сам просит подтверждающий документ, и данные сохраняются без обращения в поддержку.

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

Было
часы · повторная модерация
Стало
минуты
СценарийБылоСтало
Запуск кампанииНужны все креативыДостаточно одного согласованного
Правки креативовОстановка кампанииБез остановки
Удаление поверхностейПереход в другой разделПрямо в блоке креативов

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

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

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

Ключевой элемент — библиотека креативов. Материал из прошлого цикла подключается к новой кампании и сразу получает статус «Согласован», без повторной модерации. Именно так путь креатива из цикла сократился с часов до минут.

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

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

Куда мы пришли

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

Актуальная версия раздела «Креативы», к которой мы пришли командой.

Благодаря брейкпоинтам и карточкам адаптив не потребовал отдельного проекта.

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

  • ID и статус — в шапку. По ним менеджер находит нужную запись в списке.
  • Бюджет и число сторон — вниз, крупно. Это итог, ради которого карточку открывают.
  • Остальные поля — пары «подпись — значение». На планшете в две колонки, на телефоне в одну.
  • Детали креатива — во вкладку «Информация». Список кампаний остаётся под рукой, а параметры файла не мешают.
  1. 1Десктоп: таблица
  2. 2Планшет: карточка
  3. 3Телефон: карточка
Одна и та же кампания на трёх ширинах: строка таблицы на десктопе становится карточкой на планшете и телефоне. Данные вымышленные.

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

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

  • Фичи собираются из готовых компонентов — меньше вёрстки с нуля
  • Спецификации сняли цикл «вопрос → ожидание → переделка» внутри спринта
  • Правки переехали с этапа кода на этап макета
  • Транзит, RTB и мобилка добавляются как расширение системы

Эффект для команды и разработки

120+

компонентов в дизайн-системе на базе Тайги, ей пользуются 5 продуктовых команд

150+

экранов легаси переведено на новые компоненты, миграция в 2 раза быстрее

−40%

критичных багов на проде после внедрения дизайн-ревью

−35%

шагов при загрузке креативов

Живые примеры: было и стало

МетрикаБылоСталоДля бизнеса
Смена плательщикаДо 1 часаМгновенноСчета без задержек
Креатив из циклаЧасыМинутыДеньги в тот же день
Креативы для стартаВсеОдинРанний запуск
Правки креативовС остановкойБез остановкиРеклама не простаивает

Сложнее всего были не макеты, а споры о том, делать дешевле сейчас или дешевле на дистанции.

Аргумент «так удобнее» проигрывает. Аргумент «запуск за минуты вместо часов» — выигрывает.
  • В финтехе дизайн — управление риском. Хороший интерфейс счетов не даёт ошибиться
  • Дизайн-система — экономический инструмент. Её ценность видна в том, как быстро продукт принял транзит, RTB и мобилку
  • Спецификация экономит больше, чем занимает. Час на крайние случаи — это дни без переделок
Смотрите также

Другие кейсы

DevOpsEnterpriseДашборды

Купол. Контейнеры: уязвимости и кластеры в одном окне

Продукт с нуля: JTBD, прототипы, A/B-тесты и 250+ экранов.

−25% время обработки уязвимостей
RetailUX-исследованиеПлатежи

Korzinka: касса, с которой покупатель справится без кассира

Полевое исследование, два терминала оплаты и кешбэк по QR в одном сценарии.

8 касс изучено в поле за день
Web + MobileUI-китЛояльность

MGN: сайт из 2000‑х, пересобранный под задачи строителей

Аудит по Baymard, бонусная программа и оформление в три шага.

−35% время оформления заказа
NDAДизайн-системаWeb + Mobile

MON's: крипта без порога входа для обычных игроков

Лутбоксы, аналитика рынка и обучение новичков: год работы до закрытой беты.

180+ страниц в двух темах
FinTechMobileИсследования

Ozon Банк: с 9 до 29 млн пользователей за год

Онбординг, оформление карты в ПВЗ и QR-оплата вместо курьера как единственного канала.

40% новых карт — оформление в ПВЗ