кейс Mindbox: дизайн и верстка 10 pop-up шаблонов для CDP-платформы

о клиенте

Mindbox — крупнейшая российская облачная платформа для автоматизации прямого маркетинга. Сервис помогает бизнесу в одном окне собирать и сегментировать данные о пользователях и запускать персонализированные омниканальные коммуникации:: email-рассылки, SMS, мессенджеры, мобильные пуши и In-App, программы лояльности, рекламу, рекомендации, виджеты и Pop-Up (поп-апы).

цель

Создать стильные, удобные и функциональные pop-up шаблоны, которые закроют широкий спектр маркетинговых задач: сбор лидов, повышение конверсии, улучшение вовлеченности и взаимодействия с пользователями. Шаблоны должны легко адаптироваться к фирменному стилю разных брендов и при этом эстетично отображаться на различных типах и размерах устройств, в светлой и темной теме.
Основной задачей было создать продукт, который улучшит пользовательский опыт и визуальную составляющую интерфейса сайтов клиентов Mindbox и повлияет на рост конверсий.

на старте

Летом 2024 года у компании Mindbox возникла необходимость создать новую серию pop-up шаблонов (шаблонов всплывающих форм на сайте) для своих клиентов. Прежние решения уже не соответствовали современным требованиям к UX-дизайну pop-up и пользовательскому опыту.

Для достижения сформулированной цели мы обозначили следующие опорные пункты:

задачи

Провести исследование рынка.
Определить типологию популярных pop-up, их основные функции.
Собрать мудборд с визуальными трендами.
Разработать адаптивные pop-up шаблоны, которые быстро верстаются.
Сохранить баланс между визуальной привлекательностью и простотой восприятия.
Внедрить игровые элементы (рулетка, колесо фортуны, слот-машина) и интерактивные механики.
Учесть требования к адаптации под разные экраны и устройства, темную и светлую тему.

наше решение

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

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

провели исследование и собрали мудборд

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

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

Каждый pop-up шаблон создавался с учетом:

разработали визуальную концепцию и дизайн

Подписной pop-up для сбора email — классические формы с акцентом на визуальный контент и удобство взаимодействия. Один вариант «простой», а во втором использовали яркий креативный образ для привлечения внимания и увеличения конверсии.

Мы разработали несколько типов всплывающих форм:

«Колесо фортуны» — игровая механика с вращающимся колесом стимулирует пользователей к подписке за счет интерактивного взаимодействия. Повышает шансы на сбор контактных данных за счет элемента выигрыша.
«Слот-машина» (однорукий бандит) — игровой pop-up с визуалом в стиле слот-машины, предлагающий пользователю оставить email и получить бонус. Привлекает внимание благодаря анимации и эффекту неожиданности.
«Секретный сюрприз» (выбор из трех подарков) — игровой pop-up предлагает пользователю выбрать один из трёх подарков и оставить контакты для получения бонуса. Добавляет элемент геймификации с визуально привлекательным оформлением. Пользователь вовлекается в процесс выбора и с большей вероятностью оставляет данные.

Игровые pop-up:

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

Pop-up подписка на товар — форма подписки на уведомление о поступлении товара, собирает email-адреса пользователей, которые хотят получить уведомление, когда товар снова появится в наличии. Такая всплывающая форма повышает шансы на последующую покупку товара и снижает потерю интереса.

Pop-up с обратной связью — различные сценарии на сбор отзывов, оценок удовлетворенности (CSAT) и контактных данных для последующей коммуникации и улучшения клиентского опыта. Лаконичный дизайн с акцентом на простоту заполнения формы.

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

Pop-up с товарной коллекцией — например, напоминание о товарах, оставленных в корзине. Такая форма создаёт эффект срочности и повышает конверсию в покупки, мотивируя пользователя вернуться в корзину и оформить заказ.

Финальный вариант мы сверстали по всем требованиям документов к разработке pop-up на платформе, загрузили на тестовый стенд и протестировали.

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

Mindbox даёт возможность всем пользователям верстать свои pop-up внутри платформы, используя встроенные механики. Нам нужно было изучить документацию и максимально использовать уже существующие элементы, чтобы облегчить встраивание новых pop-up шаблонов в существующий редактор. И у нас всё получилось.

технические решения и реализация

Могу смело рекомендовать тем, кому нужен веб-дизайн, особенно если речь идет о поп-апах.»

В-третьих, уже после старта всё сделали в срок, отдали чистую, аккуратную Figma с макетами, как ожидалось. И — что важно — за разумные деньги. Мы сравнивали с другими агентствами, и Inbox Marketing дали лучшее соотношение цены и качества.

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

Во-первых, быстрая и внятная коммуникация в Telegram без лишней бюрократии.

Почему?

Филипп Вольнов,
Ex-руководитель марком в Mindbox

Игровые pop-up стали особенно популярными, так как интерактивные механики и геймификация увеличивали вовлеченность. Подписные оказались удобными благодаря возможности открывать их в углу экрана. Это свело к минимуму визуальное давление на пользователя. Общий результат — рост конверсий, увеличение лояльности и положительная обратная связь от пользователей.

Мы разработали 10 pop-up шаблонов, среди которых были подписные, с таймером, с обратной связью и игровые (колесо фортуны, слот-машина, выбор подарка). Все разработанные pop-up шаблоны соответствовали высоким требованиям по дизайну и функциональности. Клиент остался доволен результатом, отметил продуманный UX-дизайн, креативный подход к визуализации и высокую адаптивность решений под разные задачи и бренды.

«Нам нужно было заказать 10 поп-апов для модуля персонализации сайта — красивые шаблоны, которые можно кастомизировать под себя, но при этом чтобы исходный дизайн уже выглядел достойно. Мы обратились к нескольким агентствам, и в итоге выбрали Inbox Marketing.

отзыв

результаты

Хотите быстрый ответ? Напишите нам в Telegram! Обсудим вашу задачу прямо сейчас

закажите разработку стильных и вовлекающих pop-up для вашего сайта

Оставьте заявку и мы свяжемся с вами в течение 1 часа в рабочее время.