Главное о кейсе
Совместно с ВТБ разработали промолендинг, посвященный Киберкарте в коллаборации с турниром Rush VTB Cup по Standoff 2. Раскрыли преимущества нового банковского продукта и прорекламировали грядущее соревнование для геймеров, использовав эмоциональный дизайн. Внедрили узнаваемые элементы из игры — 3D-фигуры персонажей, курсор, игровую валюту, — чтобы привлечь внимание пользователей.
Как проект изменил жизнь пользователей
— Собрали на лендинге полную информацию о преимуществах новой карты ВТБ и процессе ее оформления, чтобы пользователь получил все данные сразу.
— Продумали трансформирующийся хедер. При скролле страницы кнопка «Оформить карту» из первого блока перемещается наверх. Пользователь в любой момент может заказать карту.
— На дополнительной странице лендинга прописали правила активации баллов в игре Standoff 2. Пользователи могут найти ответы на вопросы, не обращаясь в службу поддержки.
— Для удобства адаптировали лендинг для мобильных устройств и планшетов.
Бизнес-задача и ее решение
Задача: рассказать о новой Киберкарте ВТБ, придуманной специально для геймеров в коллаборации с соревнованием по онлайн-игре Standoff 2, а также о преимуществах и условиях пользования банковским продуктом.
Решение: предложили решение, которое закрыло две главные потребности наших партнеров. Проработали на лендинге узнаваемые элементы Standoff 2, чтобы показать связь новой карты с игрой. Продумали блоки с важной информацией о Киберкарте ВТБ.
Крафт (мастерство), реализация, технические детали
Главная анимация раскрывает преимущества новой карты: 1000 игровой валюты в Standoff 2, оплата игр прямо в ВТБ Онлайн в разделе «Сервисы», повышенный кешбэк за покупки в онлайн-сервисах. Курсор на лендинге кастомный, в виде прицела из игры Standoff 2. При нажатии на экран курсор имитирует выстрелы, и монитор трескается. Для реалистичности мы проработали три варианта разбитого стекла. При наведении курсора на кликабельные элементы лендинга он меняет форму, как в онлайн-игре: подсказывает пользователю, что он может совершить какое-либо действие. Человек взаимодействует с интерфейсом лендинга, ощущая себя в Standoff 2. Построение эмоциональной связи между человеком и интерфейсом — основа дизайн-философии Студии Олега Чулакова.
Другая важная сторона этой концепции — удобство и функциональность сайтов, которые мы разрабатываем. Понимая, что промолендинг должен быстро загружаться, мы нашли технические решения, которые облегчили его вес, но позволили сохранить эмоциональный дизайн. Главная 3D-анимация была сделана в формате видео, а блок про новый дизайн Киберкарты — как анимация на верстке. Благодаря такому решению получилось показать, как будет выглядеть свечение глаз дракона в реальной жизни.
Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком
Во время создания проекта мы предложили ВТБ несколько дополнительных решений, которые сделали лендинг еще эмоциональнее и удобнее.
— Уделили больше внимания проработке футера. Помимо контактной информации, разместили в нем тематическую иллюстрацию: новая карта ВТБ с драконом со светящимися глазами лежит на фоне клавиатуры и мышки. Здесь мы вновь соединили банковскую и геймерскую тематики, подсвечивая коллаборацию ВТБ и кибертурнира по Standoff 2. Промолендинг продукта начинается с карты и ей заканчивается.
— Улучшили дизайн второй страницы лендинга с руководством по активации бонусов. Понимая, что пользователями сайта станут геймеры, привыкшие к впечатляющей компьютерной графике, мы вышли за рамки технического задания. Так, на второй странице появилась большая иллюстрация, а пошаговое руководство по получению баллов стало более креативным. Страницы стали соответствовать друг другу по стилистике.
Скриншоты