Кейс интерактивного лендинга. Как мы сделали сайт для платежного стикера MTС Pay

Карты на стол, а стикеры на телефон — рассказываем про весь дизайн-процесс от идеи и до релиза. Внутри красивые картинки и отзыв клиента, дизайн-директора МТС Алексея Чупина.

Подробнее про платежные стикеры от МТС, Тинькофф, Альфа-Банка рассказали в прошлой статье.

Идея интерактивного сайта

Перед Новым годом команда МТС обратилась к нам, дизайн-студии ЦЕХ, со срочной задачей — подготовить лендинг о новом продукте МTС Pay. Запуск планировали на начало февраля. Кажется, что не так уж и мало времени, но январские праздники прервали процесс.

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

Наши дизайнеры сделали 3D-модели стикера, карты, телефона и терминала
Наши дизайнеры сделали 3D-модели стикера, карты, телефона и терминала

Алексей Чупин предложил сделать лендинг интерактивным, нам идея очень понравилась. Это значит, что когда пользователь скроллит сайт, он видит анимацию с пошаговым и приближенным к реальности сценарием:

  • Как выглядит карточка и как от нее открепляется стикер
  • Как и где стикер устанавливается на телефон
  • Как совершается бесконтактная оплата через терминал

На каждом этапе текст помогает понять продукт. Он описывает преимущества и важные детали. Например, сколько стоит стикер и какое количество карт к нему можно подключить.

Мы обещали красивые картинки, вот одна из них :)
Мы обещали красивые картинки, вот одна из них :)

Процесс создания по этапам

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

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

2. Придумали идею, прописали сценарий анимации и сделали раскадровку. Чтобы клиент видел результат цельно, а не согласовывал каждый элемент, мы создали видеоинструкцию, где показан весь путь пользователя.

Вот так выглядит раскадровка анимации с экрана-прелоудера
Вот так выглядит раскадровка анимации с экрана-прелоудера

3. Когда клиент согласовал идею, мы приступили к основной части: нарезали видеоинструкцию на кадры, создали макет в Figma, подготовили 3D-объекты и анимацию. Часть сделали в Affter Effects, часть — в Blender. По секундам расписали, что и когда появляется и исчезает.

<p>Это настройка материалов в Блендере. Тут мы задаём все свойства нашей карточки: от цвета до матовости.</p>

Это настройка материалов в Блендере. Тут мы задаём все свойства нашей карточки: от цвета до матовости.

4. После финального согласования отдали в разработку на стороне клиента с техническим документом. А еще специалисты ЦЕХа всегда был на связи. Когда появлялись вопросы у разрабов — консультировали, когда правки — быстро дорабатывали.

Сложности адаптации и разработки

У нас было 2 сложности: мобильная адаптация и реализация в коде.

В первом случае был вопрос, как показать движение телефона на мобильных устройствах. Если бы так же, как в десктопе, то получилась бы Матрица :) Поэтому мы соединили экран телефона пользователей и экран мобильного устройства в анимации.

Здесь вы видите, как мы адаптировали десктопную версию (справа) на мобильное устройство (слева)

Вторая сложность — реализация в разработке. Мы сделали подробную видеоинструкцию, как реализовать все наши идеи в коде и по возможности оптимизировали всё, что можно было. Например, мы конвертировали все png-файлы в JSON, так как при открытии сайта все кадры загружаются одновременно, хоть и показываются по скроллу. Так мы ускорили прогрузку сайта за счет сжатия в качестве до 0.8 от первоначального и уменьшения количества кадров.

Кстати, вот что сказал о лендинге клиент:

Кейс интерактивного лендинга. Как мы сделали сайт для платежного стикера MTС Pay

Кстати, недавно мы делали лендинг для фестиваля MTS Design Days. Переходите на наш сайт и узнайте, за сколько дней мы сделали сайт, разработали мерч и задизайнили рекламные креативы. Спойлер: меньше, чем количество пальцев на двух руках :)

3030
19 комментариев

Чехол ребята, сделайте просто чехол или ремешок для часов. Все эти стикеры не практичные.

4
Ответить

Идея с чехлом, конечно, супер. Оставляйте заявку на сайте и разработаем с вами платежный чехол)

1
Ответить

Чехлы трутся, ломаются, откалываются, рассыпаются и, иногда, время от времени, их надо менять. Да и всем по стилю и материалам не угодишь, кто-то хочет кожу, кто-то силикон и тд. Дешевле делать такие заплатки. Но другой кейс возникает, что делать людям у которых 2 и более карты, а так хочется стикер) получается придется клеить в разные места. Короче костыль жесткий

Ответить

Как мы сделалиКак мы скопировали Apple Wallet 1в1, вы хотели сказать, но поскромничали.

1
Ответить

Дык они пишут что сайт сделали для системы, а не саму систему. Поэтому ничо не тырили

1
Ответить

То есть МТС все банки собрал в свою карту?

Ответить

Да, в одном стикере все карты можно запихнуть

Ответить