кейс Mail: как мы смогли объединить пять gif-анимаций и элементы геймификации в одном AMP-письме

цель

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

на старте

Летом 2024 года Mail представила масштабный ребрендинг продуктов — обновился дизайн и появился маскот по имени Байт. Для привлечения внимания пользователей к обновлениям Mail выбрали AMP-рассылку. Это классный формат, который позволяет использовать интерактивные механики, чтобы запомниться надолго.

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

• на первом экране письма пользователя встречает Байт и предлагает подружиться. Для этого необходимо сделать «‎буп» по носу Байта, кликнув по нему. Но это не так просто! Байт — постоянно передвигается по экрану. Каждый слайд — новая попытка;
• после успешного «‎бупа» читатель видит экран, который рассказывает, что у Mail есть классная новость и кнопка, ведущая на лендинг с подробностями.

От нашей команды ожидали полноценную реализацию такой сложной визуальной задумки с анимацией и интерактивом.

задачи

Для реализации проекта команда сосредоточилась на следующих задачах:

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

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

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

Целых 5 gif-анимаций в письме — редкость для индустрии. Главная сложность такого проекта в том, что gif-анимации слишком тяжелые и долго загружаются, а ещё у них всегда есть фон, который нельзя сделать прозрачным без существенного снижения качества. Чтобы решить проблему с долгой загрузкой, мы максимально ужали вес анимаций без потери качества изображения и подставили под гифки дублирующую статичную картинку. Пользователь видит ее, пока gif не загрузилась, а после она плавно перекрывает подложку. Это помогло добиться цельного результата — письмо отображается плавно, без пауз и пустот.

Большую часть логики работы анимаций и визуальных эффектов (например, «всплеск» при клике на Байта, его движения) заранее продумали дизайнеры. Задача верстки — реализовать идеи как можно точнее, незаметнее и максимально естественно и приятно для пользователя. Всю механику продумывали с учетом пользовательского поведения: где именно человек будет кликать, что должно произойти в ответ и какую анимацию ожидает увидеть подписчик. Это позволило сделать взаимодействие интуитивным и вовлекающим.

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

Мы быстро адаптировали механику под разные задачи и сделали еще два AMP-письма для Mail на основе логики первого.

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

В итоге мы реализовали три креативных AMP-письма для Mail. Письма корректно и стабильно работают на всех устройствах без потери качества анимаций и структуры. Все анимации, включая сложные кликабельные сцены с участием Байта мы реализовали в формате gif, а за счёт использования статичных подложек письма загружаются быстро, без «пустых» экранов. Механика переходов между слайдами работает без сбоев, что позволило сделать взаимодействие внутри писем плавным и естественным.

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

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