На главную
АдиДеск
О продукте
АдиДеск зарабатывает на агентской комиссии с рекламных площадок и возвращает часть этой комиссии пользователю. В системе три стороны:
Рекламодатель — клиент с бизнесом, который платит за рекламу
Таргетолог или агентство — ведёт кабинеты клиентов через платформу и зарабатывает на кэшбэке
Платформа — посредник между ними и рекламными площадками
Ключевая особенность рынка: весь оборот компании делают примерно 50 крупнейших таргетологов, а остальные пользователи приходят через них по рекомендации и по реферальным ссылкам. Продукт растёт не через маркетинг, а таргетологами.
Деньги, бонусы и реферальная программа это механика роста компании. Задачи в кейсе про то, кому какие деньги видно,
как они начисляются и что мотивирует привести сюда следующего человека.
Контекст и моя роль
Продуктовый дизайн фич — на мне: от разбора задачи с продактом до передачи в разработку. В команде был ещё один дизайнер: решения я приносил и защищал перед ним и продактом, спорные развилки разбирали на созвонах.
Спринты недельные, задачи и дедлайны в трекере. Дизайн-системы в продукте не было — собрал её сам, на базе Untitled UI, с двухуровневыми токенами в Figma.
Задачи:
Выставление счетов
Выставление счёта — самое частое действие в продукте: таргетолог создаёт ссылку, отправляет клиенту, клиент оплачивает, деньги падают на рекламный кабинет.
До редизайна это был плоский список ссылок с топорным управлением: редактирование и удаление торчали прямо в строке, ссылки всех площадок лежали вперемешку. У человека с двумя клиентами это работало. У агентства с десятком кабинетов — превращалось в нечитаемую ленту, где невозможно найти нужную ссылку.
Что сделал
Разбил список на группы по площадкам — ВКонтакте, Авито, Яндекс — с количеством ссылок в заголовке каждой группы. Сверху добавил фильтр по площадке, чтобы можно было сузить список до одной. Главное решение — два режима отображения, карточки и строки. Это прямой ответ на разницу между двумя типами пользователей: одному нужно видеть каждую ссылку крупно, другому — двадцать штук на одном экране. Переключатель в правом верхнем углу, состояние запоминается.
один и тот же экран в двух режимах. Карточки — для тех, у кого пара клиентов. Строки — для агентств, у которых кабинетов десяток и больше.
Разбил список на группы по площадкам — ВКонтакте, Авито, Яндекс — с количеством ссылок в заголовке каждой группы. Сверху добавил фильтр по площадке, чтобы можно было сузить список до одной. Главное решение — два режима отображения, карточки и строки. Это прямой ответ на разницу между двумя типами пользователей: одному нужно видеть каждую ссылку крупно, другому — двадцать штук на одном экране. Переключатель в правом верхнем углу, состояние запоминается.
Пустые состояния
Каждая группа имеет своё пустое состояние: если по площадке ещё нет ссылок, вместо списка стоит приглашение создать первую. Пустая группа не исчезает — иначе пользователь не поймёт, что площадка вообще подключена.
Форма создания ссылки
Форма собрана по принципу «сначала обязательное, потом необязательное». Кабинет выбирается из списка, где рядом с названием видны номер и текущий баланс — таргетолог часто не помнит номера наизусть, а по названию клиента ориентируется сразу.
Комментарий и сумма пополнения спрятаны за раскрывающиеся поля. Они нужны не всегда, и в свёрнутом виде форма умещается в один экран без прокрутки.
путь от пустой формы до заполненной. Необязательные поля раскрываются по клику, чтобы не удлинять форму тем, кому они не нужны.
Куда идут бонусы
Проблема
При пополнении кабинета начисляется бонус. Вопрос в том, кому он достаётся: таргетологу или его клиенту. Это зависит от того, как таргетолог договорился с клиентом, и меняется от сделки к сделке.
Значит, решение должно приниматься на уровне конкретной ссылки, а не один раз в настройках аккаунта.
Отдельная сложность: если бонус уходит таргетологу, клиент не должен видеть его на странице оплаты. Он видит только сумму к оплате.
Что сделал
Выбор — прямо в форме, двумя вариантами: «Бонусный счёт» или «Клиенту». Под ним две подписи, которые снимают оба риска:
«Клиент увидит только сумму пополнения» — прямо говорит, что увидит вторая сторона
«Начисление нельзя изменить после создания ссылки» — предупреждает о необратимости до того, как человек нажмёт кнопку
Второе важнее, чем кажется. Деньги уже начислены и распределены, откатить нельзя технически. Значит, единственное место, где об этом можно предупредить — до создания. В окне редактирования уже созданной ссылки это состояние показано явно: блок начисления заблокирован с пояснением «Для этого создайте новую ссылку».
Обычная ссылка и инкогнито
После создания ссылки пользователь выбирает, какую версию отправить клиенту: обычную или инкогнито. В режиме инкогнито клиент не видит, через какой сервис проходит оплата.
Это чистая агентская логика: часть таргетологов не хочет показывать клиенту, что работает через платформу-посредника. Решение сделано выбором в момент отправки, а не настройкой аккаунта — у одного и того же человека часть клиентов может знать про сервис, часть нет.
два варианта одной ссылки. Слева клиент увидит сервис, справа — нет.
Бонусный счет
Проблема
Кэшбэк — главная причина, по которой таргетологи вообще приходят на платформу: 15% с каждой открутки. Но до этой задачи бонусы были размазаны по системе, а у новичка на странице бонусов вообще пусто — начислений ещё нет, и понять, сколько он тут заработает, невозможно.
Отдельно нужно было развести две вещи, которые легко перепутать. Бонус начисляется за открутку — за фактический расход бюджета, а не за пополнение. Если бы он капал с пополнения, схема ломалась бы: пополнил кабинет, снял бонус, вывел деньги обратно.
Что сделал
Собрал одну страницу, где есть всё сразу.
Сверху — доступная сумма и кнопка вывода на основной баланс. Справа — история начислений с фильтром: все операции, начисления, выводы.
Строка истории несёт шесть параметров и при этом читается за секунду: заголовок, номер кабинета, площадка, сумма открутки, дата и сумма бонуса. Сумма открутки в строке нужна именно потому, что она объясняет, откуда взялась цифра справа.
Калькулятор
Главное решение страницы. У нового пользователя история пустая, и страница ничего ему не говорит. Поставил под hero калькулятор с ползунком: двигаешь бюджет кабинета — видишь, сколько получишь бонусами.
Ползунок, а не поле ввода, сознательно. Поле требует ввести число, то есть уже иметь его в голове. Ползунок показывает выгоду сразу, без единого действия, и провоцирует поиграть с суммой. Это единственный элемент на странице, который работает, когда у человека ещё ноль бонусов.
Бонусы в шапке
Вынес бонусный баланс в хедер, рядом с основным. С тултипом на наведении — потому что «бонусный счёт» не самоочевидная сущность, и объяснять её надо там, где человек впервые её встречает, а не в отдельном онбординге.
Вывод средств
Три состояния: пояснение механики, ввод суммы, подтверждение.
Реферальная программа
Отдельная механика, которую важно не путать с бонусным счётом. Бонусный счёт — процент за открутку собственных кабинетов. Реферальная программа — процент с пополнений приглашённого партнёра. Раз рост компании держится на том, что таргетологи приводят таргетологов, эта страница по сути и есть канал привлечения внутри продукта.
Что на ней есть: доход за месяц и количество партнёров, лента событий, объяснение механики в три шага, ссылка и промокод для приглашения, пьедестал топ-3 участников по доходу за прошлый месяц и блок частых вопросов.
Сгорающий бонус
Отдельная задача от продукта. Новый пользователь, пришедший по приглашению, получает 500 ₽ приветственного бонуса — и не знает об этом. Деньги лежат, срок горит, человек не пользуется продуктом.
Сделал полосу над всем содержимым страницы, в которой собрано четыре вещи: что это, откуда взялось, когда сгорит и что с этим делать. Полоса стоит выше hero сознательно — срочное должно перебивать постоянное.
По данным аналитики, которые приносил продакт, это положительно повлияло на использование продукта и первые пополнения.
Решение по метрике
Изначально вход в реферальную программу был в двух местах: пункт в сайдбаре и иконка подарка в шапке. По данным аналитики переходов из сайдбара было заметно больше — иконку из шапки убрал. Дублирующая точка входа, которой почти не пользуются, только засоряет шапку.
Дизайн-система
Дизайн-системы в продукте не было — собрал её сам, на базе Untitled UI.
Токены двухуровневые. Внизу примитивы: палитра, размеры шрифтов, радиусы, интерлиньяж. Сверху семантический слой — background, icon, text, status, border, radius — который ссылается на примитивы. UI собирается только из семантических переменных.
Практический смысл: акцентный цвет и шрифт меняются в одном месте и прокатываются по всем макетам сразу.
Компоненты собраны со всеми состояниями: default, hover, focus, disabled, ошибки.
Отдельно — компоненты, специфичные для продукта: шапка, страница мобильная по сайдбару и шапке вместе
В С Ё !
Буду рад работать с Вами!
Свяжитесь со мной удобным для Вас способом: