Кеша и Карлсон рекламируют Сбер: как мы разработали промо-лендинг платежного стикера

Привет! Мы в диджитал-агентстве ДАЛЕЕ уже несколько лет ведем разные проекты для Сбера. Сегодня рассказываем, как разрабатывали один из них — лендинг для платежного стикера.

Летом 2023 года Сбер запустил новый продукт — платежный стикер и пришел к нам за разработкой промо-сайта с героями Союзмультфильма. У Сбера с ними коллаб (с Союзмультфильмом, а не с персонажами 🙂).

Задача лендинга — объяснить, зачем нужен платежный стикер банка, привлечь пользователей к покупке, «подружив» при этом продукт и героев мультиков. В нашем распоряжении были всеми любимые Кеша, Карлсон и Винни-Пух.

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

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

Сначала сделали тестовый прототип: основные идеи разбили по экранам, подготовили контент.

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

Подачу информации на лендинге мы выстроили следующим образом:

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

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

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

Сайт полностью завязан на анимации — этот прием мы использовали сознательно, чтобы у пользователя сложилось впечатление, что он смотрит мультфильм.

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

В этом нам помогли анимированные 3D-изображения телефонов и стикеров. Мы активно использовали их на первых экранах лендинга.

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

Процесс оплаты с помощью стикера мы тоже анимировали.

От эффектной анимации зависит общее впечатление о продукте. Чтобы добиться динамики и плавного переключения между слайдами мы использовали GSAP и комбинацию ScrollSmoother/ScrollTrigger. Максимально оптимизировали скорость загрузки и производительность анимации. На протяжении всей прокрутки кадровая частота не падает ниже 60 на большинстве устройств. Результат — последовательное и эстетичное движение объектов.

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

Но еще интереснее другие цифры: среднее время просмотра страницы — 5 минут, показатель отказов меньше 7%. Это значит, что лендинг «цепляет» пользователей, его хочется рассматривать и изучать. А еще проект занял 1 место в номинации «Лучшая коллаборация компаний» Tagline Awards.

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

Команда проекта

от ДАЛЕЕ:

Елена Хохлова

Ольга Корзун

Марина Царькова

Команда div.

Где нас найти

Наш тг-канал: @daleedigital. Тут бывают новости, полезности для работы, вакансии и другой диджитал-движ.

Сайт: dalee.ru