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