«Ну, оплати!»: разработали промо-сайт с квизом для СберКарты и Союзмультфильма

UI UX Кейсы

Привет! Мы диджитал-продакшен Далее и недавно мы всем офисом пересматривали «Бременских музыкантов» и «Жил-был пес». Не ради развлечения, а по работе — для того чтобы запустить промо-сайт для СберКарты с персонажами Союзмультфильма.

Предыстория

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

Проект завоевал две награды — золото на Tagline Awards и бронзу на Рейтинге Рунета — и в целом «зашел» аудитории. Пруфы со статистикой и фактами — в статье.

После успеха платежного стикера банк снова объединился с Союзмультфильмом и выпустил еще и лимитированную СберКарту. Она доступна в двух форматах — виртуальном и физическом. У пластиковой СберКарты три варианта дизайна: с Зайцем, Кешей и Винни-пухом.

Перед запуском Сбер провел исследование — оно показало, что эту троицу зрители любят больше всего

У виртуальной СберКарты список дизайнов шире — добавились Бременские музыканты, Волк, Карлсон. Пользователь бесплатно устанавливает «скин» с героем и может поменять его в любой момент. Для SberPay есть интересная фишка — при оплате на весь экран смартфона появляется кадр из мультфильма, чтобы вы улыбнулись и поймали немного ностальгии.

Так выглядит экран оплаты с Зайцем

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

Продумали структуру и логику

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

СберКарта — уже знакомый для аудитории продукт, поэтому мы не стали дублировать ее описание. Главный акцент сделали на том, как получить «лимитку» и установить «скины» с персонажами в СБОЛЕ. В центре внимания всегда остается коллаборация

Елена Хохлова, менеджер проекта

Какой нарратив выстроили в итоге:

В первом блоке показали виртуальную и физическую СберКарту.
Рассказали, как оформить пластиковую СберКарту и дали инструкции.
Объяснили, как установить дизайн с героями Союзмультфильма в приложении Сбербанк Онлайн. Продемонстрировали интерфейс оплаты по SberPay.
Разработали геймификацию — шуточную викторину о том, как персонажи могли бы использовать СберКарту.

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

Сохранили преемственность и вайб советского детства

Креативная концепция сайта СберКарты перекликается с проектом платежного стикера. Мы придерживались того же tone of voice, использовали похожие приемы в дизайне и контенте. Это намеренный ход, чтобы сохранить преемственность интерфейсов. Кажется, как будто это вторая серия мультфильма о Сбере и Союзмультфильме.

После запуска промо-сайта платежного стикера у коллабы появился особенный вайб. Мы перенесли его и на проект СберКарты. Здесь то же настроение ностальгии по временам, когда бежишь к телевизору смотреть «Ну, Погоди!» или подпеваешь песням Бременских музыкантов

Марина Царькова, копирайтер

В тексте мы использовали крылатые фразы персонажей киностудии, которые адаптированы под контекст СберКарты. Когда пользователь листает сайт, его встречают герои, которые весело описывают свой «опыт» использования продукта.

Дизайн карт тоже придумала наша команда — мы выбрали кадры из мультиков и перенесли их на СберКарту

Промо-сайт и сам напоминает мультфильм: в главной роли «снимается» СберКарта, а сюжет посвящен условиям ее оформления. Такой эффект создает анимация — при прокрутке объекты движутся и картинка плавно меняется, появляются 3D-модели СберКарты и смартфона. Ты как будто крутишь их в собственных руках и пробуешь оплатить покупки.

Анимация — главный дизайн-прием промо-сайта, поэтому ее важно было сделать максимально естественной. Для этого разработчик использовал JavaScript библиотеку GSAP и комбинацию ScrollSmoother/ScrollTrigger. Мы оптимизировали производительность и скорость загрузки так, чтобы кадровая частота на всех устройствах была 60+. В результате объекты на лендинге двигаются плавно и красиво.

Придумали геймификацию

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

Мы предложили клиенту несколько идей и в итоге остановились на викторине, где нужно угадать, как герои киностудии могли бы использовать СберКарту.

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

В викторине «приняли участие» персонажи из 15 лент Союзмультфильма. Всего мы придумали почти 40 вопросов. Механика геймификации простая — пользователь получает описание ситуации и выбирает героя. Квиз состоит из 10 вопросов, в конце появляется экран с количеством верных ответов.

В вопросах встречаются и главные, и второстепенные персонажи

Через месяц после запуска промо-сайта мы подсчитали число участников викторины. Оказалось, что на вопросы ответили больше 2300 пользователей.

Результаты

Лендинг был готов через месяц после старта проекта. Мы работали итерациями и за счет этого оперативно синхронизировались с требованиями Сбера.

За месяц промо-сайт СберКарты с героями Союзмультфильма посетили 211 000 человек, из которых 195 000 — уникальные пользователи.

Продукты коллаборации Сбера и Союзмультфильма имеют неповторимый ламповый вайб детства. Работать с такими проектами — круто и приятно. А если делать это еще и под мультики — вдвойне.