«Ну, оплати!»: разработали промо-сайт с квизом для СберКарты и Союзмультфильма
Привет! Мы диджитал-продакшен Далее и недавно мы всем офисом пересматривали «Бременских музыкантов» и «Жил-был пес». Не ради развлечения, а по работе — для того чтобы запустить промо-сайт для СберКарты с персонажами Союзмультфильма.
Предыстория
Летом 2023 года мы уже создавали промо-сайт для коллаборации Сбера и Союзмультфильма. Тогда банк выпустил платежный стикер с Винни Пухом, Кешей и Карлсоном.
Проект завоевал две награды — золото на Tagline Awards и бронзу на Рейтинге Рунета — и в целом «зашел» аудитории. Пруфы со статистикой и фактами — в статье ниже.
После успеха платежного стикера банк снова объединился с Союзмультфильмом и выпустил еще и лимитированную СберКарту. Она доступна в двух форматах — виртуальном и физическом. У пластиковой СберКарты три варианта дизайна: с Зайцем, Кешей и Винни-пухом.
У виртуальной СберКарты список дизайнов шире — добавились Бременские музыканты, Волк, Карлсон. Пользователь бесплатно устанавливает «скин» с героем и может поменять его в любой момент. Для SberPay есть интересная фишка — при оплате на весь экран смартфона появляется кадр из мультфильма, чтобы вы улыбнулись и поймали немного ностальгии.
Нашей задачей было разработать промо-сайт для СберКарты: презентовать продукт, передать настроение коллаборации и подробно объяснить условия оформления. Мы придумали креативную концепцию, сделали дизайн и выпустили сайт в продакшен.
Продумали структуру и логику
Мы начали с текстовых прототипов: разбили лендинг на логические блоки и написали контент. Параллельно практически сразу начали разрабатывать дизайн. Поскольку концепция проекта сама по себе колоритная и яркая, сделали структуру максимально простой — так, чтобы ничего не мешало пользователю погрузиться в атмосферу советских мультфильмов.
СберКарта — уже знакомый для аудитории продукт, поэтому мы не стали дублировать ее описание. Главный акцент сделали на том, как получить «лимитку» и установить «скины» с персонажами в СБОЛЕ. В центре внимания всегда остается коллаборация
Какой нарратив выстроили в итоге:
- В первом блоке показали виртуальную и физическую СберКарту.
- Рассказали, как оформить пластиковую СберКарту и дали инструкции.
- Объяснили, как установить дизайн с героями Союзмультфильма в приложении Сбербанк Онлайн. Продемонстрировали интерфейс оплаты по SberPay.
- Разработали геймификацию — шуточную викторину о том, как персонажи могли бы использовать СберКарту.
Прежде чем утвердить финальный прототип, мы прошли через несколько итераций. Корректировали текст, меняли логику и тестировали результат, чтобы добиться логичной и интуитивной структуры.
Сохранили преемственность и вайб советского детства
Креативная концепция сайта СберКарты перекликается с проектом платежного стикера. Мы придерживались того же tone of voice, использовали похожие приемы в дизайне и контенте. Это намеренный ход, чтобы сохранить преемственность интерфейсов. Кажется, как будто это вторая серия мультфильма о Сбере и Союзмультфильме.
После запуска промо-сайта платежного стикера у коллабы появился особенный вайб. Мы перенесли его и на проект СберКарты. Здесь то же настроение ностальгии по временам, когда бежишь к телевизору смотреть «Ну, Погоди!» или подпеваешь песням Бременских музыкантов
В тексте мы использовали крылатые фразы персонажей киностудии, которые адаптированы под контекст СберКарты. Когда пользователь листает сайт, его встречают герои, которые весело описывают свой «опыт» использования продукта.
Промо-сайт и сам напоминает мультфильм: в главной роли «снимается» СберКарта, а сюжет посвящен условиям ее оформления. Такой эффект создает анимация — при прокрутке объекты движутся и картинка плавно меняется, появляются 3D-модели СберКарты и смартфона. Ты как будто крутишь их в собственных руках и пробуешь оплатить покупки.
Анимация — главный дизайн-прием промо-сайта, поэтому ее важно было сделать максимально естественной. Для этого разработчик использовал JavaScript библиотеку GSAP и комбинацию ScrollSmoother/ScrollTrigger. Мы оптимизировали производительность и скорость загрузки так, чтобы кадровая частота на всех устройствах была 60+. В результате объекты на лендинге двигаются плавно и красиво.
Придумали геймификацию
Главное отличие промо-сайта — геймификация. Требования к ней были минимальными: нужно было придумать игру, которая связывает Сбер и Союзмультфильм. Такую, которая развлечет аудиторию, вызовет улыбку и приятные ассоциации с продуктом. Концепция и механика были полностью на нашей стороне.
Мы предложили клиенту несколько идей и в итоге остановились на викторине, где нужно угадать, как герои киностудии могли бы использовать СберКарту.
Викторина логически продолжает концепцию лендинга. Ведь если герои уже говорят о СберКарте, почему бы не пофантазировать, как Кеша или Винни Пух тратят деньги?
В викторине «приняли участие» персонажи из 15 лент Союзмультфильма. Всего мы придумали почти 40 вопросов. Механика геймификации простая — пользователь получает описание ситуации и выбирает героя. Квиз состоит из 10 вопросов, в конце появляется экран с количеством верных ответов.
Через месяц после запуска промо-сайта мы подсчитали число участников викторины. Оказалось, что на вопросы ответили больше 2300 пользователей.
Результаты
Лендинг был готов через месяц после старта проекта. Мы работали итерациями и за счет этого оперативно синхронизировались с требованиями Сбера.
За месяц промо-сайт СберКарты с героями Союзмультфильма посетили 211 000 человек, из которых 195 000 — уникальные пользователи.
Продукты коллаборации Сбера и Союзмультфильма имеют неповторимый ламповый вайб детства. Работать с такими проектами — круто и приятно. А если делать это еще и под мультики — вдвойне.
Команда проекта
от Далее:
Елена Хохлова
Ольга Корзун
Марина Царькова
Команда div.
Где нас найти
Наш тг-канал: @daleedigital. Тут бывают новости, полезности для работы, вакансии и другой диджитал-движ.
Сайт: dalee.ru