*Совместно с компанией div.

По условиям акции пользователи Android могли выиграть
до 1 миллиона бонусов за использование бесконтактной оплаты SberPay

Первый этап

Мы начали работу со страницы для оплаты по NFC, поскольку промо запускалось именно
для неё. Для кампании наша команда придумала механику и креативную концепцию.

Креативная концепция

Непрерывное взаимодействие

Плавный переход между объектами

Неспешный разгон
и торможение

Сценичность

Вызывают ощущение, будто 
о сервисе рассказывает хороший приятель

Эмоциональные
и дружелюбные формулировки

В дизайне страниц промо-акций важно стимулировать пользователей принять участие через позитивные эмоции. Для этого мы использовали четыре приема.

Динамичная
анимация

Создает вау-эффект и вызывает приятные чувства: пользователь как будто управляет страницей сам

Порционная
подача

Мотивирует дойти до конца 
и увеличивает глубину 
просмотров

Крупная типографика и контраст

Легко читается и не дает когнитивной нагрузки

В дизайне страниц промо-акций важно стимулировать пользователей принять участие через позитивные эмоции.
Для этого мы использовали четыре приема.

Страницы с другими

возможностями Sberpay

Смартфоном
к терминалу 

Оплата одним касанием

Биометрия

Оплата одной улыбкой 

Кнопка SberPay
при онлайн-оплате

Оплата одним кликом 

Технология QR

Оплата камерой телефона

Способы оплаты по SberPay

После публикации промо мы разработали страницы для биометрии, кнопки и QR.
Они все выдержаны в едином стиле с акцентом на то, что

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

SberPay

После публикации промо мы разработали
страницы для биометрии, кнопки и QR.
Они все выдержаны
в едином стиле с акцентом на то, что

Рециркуляция

Внизу каждой страницы мы добавили
ссылки на остальные опции использования

Внизу каждой страницы мы добавили ссылки на остальные опции использования
SberPay Чтобы стимулировать посетителей задержаться
на сайте и изучить все варианты оплаты.

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

касанием

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

нажатием

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

движением

Чтобы стимулировать посетителей

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

Так как в дизайне страниц все завязано на анимации, важно, чтобы она загружалась последовательно, с нормальной скоростью и без ошибок. Для этого мы использовали GSAP и комбинацию ScrollSmoother/ScrollTrigger, 
с их помощью создается эффект суперплавного движения.

Мы максимально оптимизировали скорость загрузки
и производительность анимации. На протяжении всей прокрутки кадровая частота не падает ниже 60 на большинстве устройств.

Анимация построена на прямой связи между движением объектов 
в зависимости от позиции скролла. Скролл естественный, работает стандартная прокрутка, с помощью клавиатуры или ползунка.

Результаты

3 555 000

уникальных просмотров