Веб3 рекламная платформа

В рамках проекта были достигнуты следующие результаты:

• Осуществлен редизайн 3 крупных продуктов;
• Спроектирована масштабируемая дизайн-система с 90+ UI-компонентов и паттернов ;
• Реализована поддержка светлой и тёмной тем;
• 120+ экранов задизайнены и реструктурированы;
• Отрисовано 80+ кастомных иллюстраций, иконок и анимаций.

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

Примеры UI-компонентов и дизайн-паттернов, разработанных в рамках проекта:

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

Рекламная платформа существует на рынке более 10 лет и входит в число крупнейших рекламных платформ в сфере WEB3-рекламы. Продукт имеет стабильную пользовательскую базу и развитую систему из трех взаимосвязанных платформ, которые объединяют рекламодателей, владельцев трафика и внутренние команды в единую экосистему для запуска, управления и аналитики рекламных кампаний.

Проще говоря, проект представляет собой рекламную платформу для WEB3 и крипто-проектов: криптосервисы продвигаются внутри других крипто- и тематических площадок, поскольку крупные рекламные сети (например, Google Ads) ограничивают или не поддерживают подобный тип контента.

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

Платформа рекламодателя:

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

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

Платформа паблишера:

Задачи: Подключение и монетизация собственных сайтов или digital-площадок через размещение рекламы. Создание рекламных слотов (плейсментов), управление размещениями, контроль дохода и анализ трафика и эффективности.

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

Панель админа:

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

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

Были подготовлены персоны для каждой из ролей пользователей.

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

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

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

Вот пару скриншотов, как выглядела платформа до редизайна:

Для меня проект стал погружением в новую и достаточно сложные ниши — диджитал реклама, крипто и Веб3.

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

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

Ключевые цели:

• Обновить визуальный язык платформ;
• Разработать единую дизайн-систему;
• Клучшить ключевые пользовательские сценарии;
• Сократить количество ручных действий;
• Упростить онбординг и работу с платформой;
• Повысить скорость прохождения пользовательских флоу;
• Подготовить платформу к дальнейшему масштабированию.

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

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

Редизайн затронул всю продуктовую экосистему: от визуального стиля и компонентов до логики интерфейсов и пользовательских сценариев.

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

Дополнительно был проведён конкурентный анализ рекламных и Крипто/Веб3-платформ, чтобы определить актуальные UX-подходы, паттерны и ожидания пользователей рынка.

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

Ниже пару референсов флоу создания рекламной кампании от топовых рекламных площадок.

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

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

Вот пример одного из UX-аудитов:

На этой стадии было спроектировано много прототипов ключевых флоу.

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

Среди ключевых проблем были выявлегы:

• Сложный онбординг и высокий порог входа;
• Перегруженные интерфейсы;
• Неинтуитивная навигация;
• Сложный сценарий создания рекламных кампаний;
• Большое количество ручных действий;
• Отсутствие консистентности между продуктами;
• Слабая визуальная иерархия;
• Визуальный стиль, не соответствующий цветам бренда

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

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

В рамках дизайн-системы были полностью переработаны базовые UI-компоненты и паттерны взаимодействия.

Были созданы:

• Кнопки;
• Инпуты;
• Дропдауны;
• Модальные окна;
• Компоненты навигации;
• Фильтры;
• Табы;
• Карточки;
• Тултипы;
• Статусы;
• Компоненты форм;
• Визуальзация данных;
• И другие.

Здесь пару примеров спроектированных компонентов:

Для обеспечения консистентности интерфейсов была внедрена система дизайн-токенов.

Она включала:

• Цветовую систему;
• Систему размеров шрифтов;
• Систему отступов;
• Систему радиусов.

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

Ниже пример того, как компоненты ведут себя в светлой и темной темах:

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

Были переработаны:

• Структура таблиц;
• Карточный вид;
• Фильтрация и сортировка;
• Групповые действия;
• Состояния строк;
• Встроенные действия;
• Пагинация;
• Крайние состояния: пустой/ загрузка / ошибка.

Пример таблицы с фильтрами и заметками:

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

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

Основная задача заключалась в том, чтобы:

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

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

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

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

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

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

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

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

Маркетплейс — один из ключевых модулей экосистемы. Изначально он представлял собой простой каталог, в котором пользователи могли приобретать только отдельные рекламные размещения (Продукты) на конкретных сайтах.

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

• Продукты — отдельные рекламные размещения на конкретном сайте;
• Офферы — набор предложений от одного сайта со скидкой;
• Пакеты — объединённые пакеты размещений с нескольких сайтов со скидкой.

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

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

• Выбирать как отдельные размещения, так и готовые наборы;
• Экономить бюджет за счёт пакетов и офферов;
• Быстрее сравнивать предложения разных сайтов;
• Более эффективно планировать рекламные кампании.

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

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

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

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

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

Также удалось сократить количество ручных действий в ключевых сценариях.

Ниже приведены несколько экранов данного продукта:

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

Ниже приведены несколько экранов данного продукта:

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

Ниже приведены несколько экранов данного продукта:

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

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

В рамках проекта были достигнуты следующие результаты:

• Осуществлен редизайн 3 крупных продуктов;
• Спроектирована масштабируемая дизайн-система с 90+ UI-компонентов и паттернов ;
• Реализована поддержка светлой и тёмной тем;
• 120+ экранов задизайнены и реструктурированы;
• Отрисовано 80+ кастомных иллюстраций, иконок и анимаций.

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

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

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