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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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