Кейс интерактивного лендинга. Как мы сделали сайт для платежного стикера MTС Pay
Карты на стол, а стикеры на телефон — рассказываем про весь дизайн-процесс от идеи и до релиза. Внутри красивые картинки и отзыв клиента, дизайн-директора МТС Алексея Чупина.
Подробнее про платежные стикеры от МТС, Тинькофф, Альфа-Банка рассказали в прошлой статье.
Идея интерактивного сайта
Перед Новым годом команда МТС обратилась к нам, дизайн-студии ЦЕХ, со срочной задачей — подготовить лендинг о новом продукте МTС Pay. Запуск планировали на начало февраля. Кажется, что не так уж и мало времени, но январские праздники прервали процесс.
У ребят уже было 2 варианта страницы со стандартным блочным повествованием: что за продукт, УТП, цена, фичи. Основная цель — сделать подачу интересной и вовлекающей.
Алексей Чупин предложил сделать лендинг интерактивным, нам идея очень понравилась. Это значит, что когда пользователь скроллит сайт, он видит анимацию с пошаговым и приближенным к реальности сценарием:
- Как выглядит карточка и как от нее открепляется стикер
- Как и где стикер устанавливается на телефон
- Как совершается бесконтактная оплата через терминал
На каждом этапе текст помогает понять продукт. Он описывает преимущества и важные детали. Например, сколько стоит стикер и какое количество карт к нему можно подключить.
Процесс создания по этапам
За 3 недели мы задизайнили и анимаривали чистый сайт с упором на продукт и основную проблему ЦА: невозможность бесконтактной оплаты на айфоне. Никаких ярких фонов, дизайн строго по делу :) Расскажем подробнее про этапы:
1. Получили задачу, созвонились с клиентом и обсудили детали. Далее проанализировали сроки и процесс работы. Прикинули, какие спецы нужны на проект, собрали команду из графиков и 3Dшников и подготовили коммерческое предложение для клиента.
2. Придумали идею, прописали сценарий анимации и сделали раскадровку. Чтобы клиент видел результат цельно, а не согласовывал каждый элемент, мы создали видеоинструкцию, где показан весь путь пользователя.
3. Когда клиент согласовал идею, мы приступили к основной части: нарезали видеоинструкцию на кадры, создали макет в Figma, подготовили 3D-объекты и анимацию. Часть сделали в Affter Effects, часть — в Blender. По секундам расписали, что и когда появляется и исчезает.
Это настройка материалов в Блендере. Тут мы задаём все свойства нашей карточки: от цвета до матовости.
4. После финального согласования отдали в разработку на стороне клиента с техническим документом. А еще специалисты ЦЕХа всегда был на связи. Когда появлялись вопросы у разрабов — консультировали, когда правки — быстро дорабатывали.
Сложности адаптации и разработки
У нас было 2 сложности: мобильная адаптация и реализация в коде.
В первом случае был вопрос, как показать движение телефона на мобильных устройствах. Если бы так же, как в десктопе, то получилась бы Матрица :) Поэтому мы соединили экран телефона пользователей и экран мобильного устройства в анимации.
Здесь вы видите, как мы адаптировали десктопную версию (справа) на мобильное устройство (слева)
Вторая сложность — реализация в разработке. Мы сделали подробную видеоинструкцию, как реализовать все наши идеи в коде и по возможности оптимизировали всё, что можно было. Например, мы конвертировали все png-файлы в JSON, так как при открытии сайта все кадры загружаются одновременно, хоть и показываются по скроллу. Так мы ускорили прогрузку сайта за счет сжатия в качестве до 0.8 от первоначального и уменьшения количества кадров.
Кстати, вот что сказал о лендинге клиент:
Кстати, недавно мы делали лендинг для фестиваля MTS Design Days. Переходите на наш сайт и узнайте, за сколько дней мы сделали сайт, разработали мерч и задизайнили рекламные креативы. Спойлер: меньше, чем количество пальцев на двух руках :)