Экспериментальная веб-версия письма с игрой обогнала обычное по кликам в 2 раза
Геймификация в емейл-рассылке делает взаимодействие с брендом интереснее и повышает вовлечённость аудитории. Но как решиться на новый формат впервые, когда и обычный вроде неплохо работает? Порой для этого нужен просто знак 🌟
Надеемся, для вас им станет этот кейс, а фитнес-сервис FitStars получил его на нашем вебинаре по креативным механикам. Забегая вперёд, скажу, что проект оправдал ожидания клиента на уровне процесса и результата. А теперь всё по порядку.
Знакомство
В августе 2025 года тимлид копирайтеров Аделина и старший дизайнер Кирилл провели вебинар о том, как искать и генерировать креативные идеи. На нём мы разыграли бесплатную разработку креативной концепции для емейл-рассылки, которую выиграл фитнес-сервис FitStars. Коллеги так вдохновились творческим подходом Кирилла и его работами, что захотели создать экспериментальный визуал именно с ним.
Клиент и задача
FitStars — это онлайн-платформа для домашних тренировок. Кроме подписок на занятия, компания продаёт фитнес-марафоны и медитации. Бренд привлекает клиентов через инфлюенс-маркетинг и прогревает через «FitStars Журнал» — блог о фитнесе и ЗОЖе. Емейл-рассылка — не основной канал коммуникации, но он хорошо работает на догрев.
В базу рассылки клиенты попадают через журнал. Далее им приходят полезные контентные письма, которые также стимулируют к покупке подписки, и проморассылки, которые побуждают к повторным покупкам.
В приоритете бренда были продажи безлимитной подписки, поэтому в веб-версии письма решили продвигать именно эту услугу и протестировать, как формат влияет на вовлечённость аудитории.
Подготовка
Шаг 1. Выяснили детали
На первом созвоне с командой бренда мы договорились создать промописьмо в двух форматах: веб-версию с геймификацией и стандартное письмо в почтовом клиенте, чтобы провести A/B-тест и сравнить реакцию пользователей.
Письмо планировали отправить подписчикам, которые пока ничего не покупали, и тем, кто покупал всё, кроме безлимита. У новичков оно должно было снять возражения перед покупкой подписки, а действующих клиентов — подтолкнуть к покупке безлимита.
Шаг 2. Подготовили идеи
Мы подготовили на выбор пять идей. Больше всего клиенту понравилось скролл-письмо с уличной беговой дорожкой, на которой пользователь должен преодолеть разные препятствия, чтобы добраться до промокода.
Чтобы создать эффект полного погружения, Кирилл предложил сделать скроллинг снизу вверх вместо обычного пролистывания сверху вниз. Когда конечная точка наверху, динамичная картинка воспринимается легче. К тому же это добавило разнообразия привычным действиям пользователей.
Шаг 3. Выбрали технический формат
Основное пожелание клиента — сделать письмо, которое быстро прогрузится на любом устройстве. У нас был вариант создать AMP-письмо, но команда бренда хотела начать с технически более простого варианта. К тому же возможности почтовиков не дали бы нам реализовать механику обратного скролла. Поэтому интерактивную часть мы решили сделать в веб-версии.
Разработка
После согласования концепции мы перешли к основным этапам реализации проекта:
1. Подготовили дизайн письма и веб-версии.
Текст для проекта готовила команда FitStars. На этапе дизайна его ещё не было, но это не помешало нам создать драфт письма в инбокс- и веб-версии. Для наглядности покажу результат с готовым текстом.
Так как скролл был обратным, клиент попросил сделать пояснение с указателем, чтобы игроки не запутались в навигации.
На пути к финишу с промокодом Кирилл добавил 4 препятствия, которые отвлекают от пробежки: уютная кровать, сладости, сериал и плохая погода.
Так как мы запускали спецпроект в сентябре, цвета и элементы игры мы сделали осенними. Клиент захотел усилить этот эффект и на препятствии с сериалом добавить кадр из «Сумерек». Чтобы не нарушать авторских прав, Кирилл сгенерировал картинку, которая очень похожа на оригинал. Фанаты, согласны?
2. Доработали текст.
Наш копирайтер Алина проверила, насколько текст подходит дизайну, и внесла небольшие корректировки, с которыми согласился клиент.
3. Сверстали письмо.
Чтобы сделать обратный скролл, страница должна открываться не в верхней части экрана, как мы привыкли, а в нижней. Такую механику мы реализовывали впервые, но сложностей это не вызвало.
Чтобы страница открывалась снизу, она должна полностью прогрузиться. Если у подписчика медленный интернет, между загрузкой и отображением контента может произойти задержка. На этот случай наш технический специалист Оксана перед запуском веб-версии поставила экран-заглушку с индикатором загрузки.
Также она настроила принудительную прокрутку в нижнюю точку страницы после полной загрузки через метод scroll() объекта window:
window.scroll(0, document.documentElement.scrollHeight)
Прокрутка доходит от координаты 0 до значения высоты документа, которую браузер вычисляет автоматически:
document.documentElement.scrollHeight.
Благодаря этому, даже если наполнение страницы изменится, стартовая прокрутка всё равно будет работать корректно. Как только страница будет прокручена вниз, пользователь может листать её только вверх. Таким образом, получается обратный скролл.
Градиент на фоне подобрали дизайнеры, а Оксана прописала его кодом так, чтобы он подстраивался под реальную высоту страницы, заполняя её полностью:
background: linear-gradient(180deg, #FDB686 0%, #F1D14E 50%, #D2FDA1 100%);
Значения в нём индивидуальны для каждого цвета.
Результаты
Мы разработали проект за 15 рабочих дней — за три итерации, оговорённые на старте работ.
В A/B-тесте с обычным письмом спецпроект выиграл по кликам в 2 раза. Это говорит о том, что игровая механика эффективна для вовлечения клиентов.
Отзыв клиента
С ребятами из EMAILMATRIX очень комфортно работать. Они самостоятельно провели работу по оценке аудитории, предложили свежую механику, закрыли дизайнерские и технические задачи. Никаких лишних созвонов и согласований ради согласований — всё чётко, красиво и в срок.
В итоге получилось крутое письмо, которое порадовало подписчиков. И спасибо EMAILMATRIX за это!
Дмитрий Грибок
Тимлид CRM-отдела FitStars
КОМАНДА
ПРОЕКТА
