Креативная концепция,
дизайн и продакшен
Задача
*Совместно с компанией div.
Нашей задачей было создать механику для промо,
разработать креативную концепцию, дизайн*
и продакшен для каждого из четырёх вариантов
оплаты SberPay: NFC, биометрии, кнопки и QR.
Запуск промо
По условиям акции пользователи Android могли выиграть
до 1 миллиона бонусов за использование бесконтактной оплаты SberPay
Первый этап
Мы начали работу со страницы для оплаты по NFC, поскольку промо запускалось именно
для неё. Для кампании наша команда придумала механику и креативную концепцию.
Креативная концепция
c вау-эффектом
Плавный переход между объектами
Непрерывное взаимодействие
Сценичность
Неспешный разгон
и торможение
Вызывают ощущение, будто 
о сервисе рассказывает хороший приятель
Эмоциональные
и дружелюбные формулировки
Динамичная
анимация
Создает вау-эффект и вызывает приятные чувства: пользователь как будто управляет страницей сам
Порционная
подача
Мотивирует дойти до конца 
и увеличивает глубину 
просмотров
Крупная типографика и контраст
Легко читается и не дает когнитивной нагрузки
В дизайне страниц промо-акций важно стимулировать пользователей принять участие через позитивные эмоции. Для этого мы использовали четыре приема.
В дизайне страниц промо-акций важно стимулировать пользователей принять участие через позитивные эмоции.
Для этого мы использовали четыре приема.
Страницы с другими
возможностями Sberpay
Технология QR
Оплата камерой телефона
Кнопка SberPay
при онлайн-оплате
Оплата одним кликом 
Биометрия
Оплата одной улыбкой 
Смартфоном
к терминалу 
Оплата одним касанием
SberPay
— удобный и быстрый способ оплаты. Держателям карт достаточно одного касания, взгляда в камеру, клика или движения для проведения транзакции.
Способы оплаты по SberPay
После публикации промо мы разработали страницы для биометрии, кнопки и QR.
Они все выдержаны в едином стиле с акцентом на то, что
После публикации промо мы разработали
страницы для биометрии, кнопки и QR.
Они все выдержаны
в едином стиле с акцентом на то, что
Рециркуляция
пользователей
Внизу каждой страницы мы добавили ссылки на остальные опции использования
SberPay Чтобы стимулировать посетителей задержаться
на сайте и изучить все варианты оплаты.
Платите
одним


движением
Платите
одним

нажатием
Платите
одним
касанием
Внизу каждой страницы мы добавили
ссылки на остальные опции использования
SberPay
Чтобы стимулировать посетителей
задержаться на сайте и изучить все варианты оплаты.
Продакшен
Так как в дизайне страниц все завязано на анимации, важно, чтобы она загружалась последовательно, с нормальной скоростью и без ошибок. Для этого мы использовали GSAP и комбинацию ScrollSmoother/ScrollTrigger, 
с их помощью создается эффект суперплавного движения.
Мы максимально оптимизировали скорость загрузки
и производительность анимации. На протяжении всей прокрутки кадровая частота не падает ниже 60 на большинстве устройств.
Анимация построена на прямой связи между движением объектов 
в зависимости от позиции скролла. Скролл естественный, работает стандартная прокрутка, с помощью клавиатуры или ползунка.
Результаты
5 897 000
3 555 000
пользовательских просмотров
уникальных просмотров