Сделали лендинг услуги её примером и увеличили конверсию в 2,4 раза
Как правило, бизнес использует геймификацию для отдельных кампаний, которые длятся не так уж долго. Но интерактивные механики могут быть полезны и на постоянной основе — например, их можно добавить на сайт компании, чтобы удержать пользователя и в простой форме донести важную информацию.
Именно так мы поступили, когда переделывали ключевой раздел собственного сайта — страницу о спецпроектах. Расскажу, как с помощью списков, тигров и кое-чего ещё нам удалось представить сложную услугу и улучшить все основные метрики.
Задача
На маркетинговом рынке спецпроектами называют самые разные форматы. Мы объясняем свою специализацию на сайте, но тематическая страница устарела. Контент не погружал как следует в неочевидную услугу и уже не отражал актуальный опыт и возможности агентства.

Новая страница должна была подробно и при этом нескучно раскрывать услугу, вовлекать посетителя и подводить к целевому действию — заявке.
Решение
Помимо апдейта содержания мы решили добавить на страницу интерактивные элементы. Они облегчают восприятие информации и побуждают к взаимодействию. Интерактив помогает пользователям ориентироваться в обширном контенте и одновременно развлекает и демонстрирует наши навыки в игровых механиках.
Также я использовала иллюстрации, анимированные и статичные. Некоторые просто дают передышку от букв, но многие и сами несут информацию об услуге. К примеру, нам пригодились гифки из готовых спецпроектов и скриншоты рабочих документов.
Детали
Мне требовалось упорядочить большой объём информации, чётко разделить на смысловые блоки и сделать каждый понятным и интересным.
Основным приёмом стали раскрывающиеся списки и вкладки. Они позволили среди прочего компактно расположить 10 примеров механик с большими иллюстрациями и разбивкой на категории.
Этим же способом мы уместили на один экран 12 крупных карточек кейсов. Чтобы зацепить взгляд пользователей, добавили анимацию и эмодзи — ими выделили проекты, отмеченные наградами конкурсов.

Цены мы решили представить на флип-карточках. Это ещё один интерактивный элемент, который привлекает внимание к ключевой информации. Карточки по ассоциации с тематикой страницы я стилизовала под игральные карты. В мобильной версии их можно даже тасовать — так мы сразу и сэкономили место, и усилили погружение.
Сложнее всего оказалось оформить блок с подробным описанием того, как EMAILMATRIX работает над спецпроектами. Это важный, но длинный и скучный список. Я решила украсить его с помощью прогресс-бара, который отражал этапность, и наглядных артефактов из разных проектов.

Маскот
Своей главной находкой на проекте считаю тигра. Этот образ и показывает мощь наших лапищ, и развлекает пользователей, попадая в странные ситуации. То он работает стрелкой в часах, то прыгает за курсором, то его вообще можно разрезать ножницами. С помощью этих элементов мы ушли от стены текста в блоках, для которых нет содержательных иллюстраций.

Я поняла, что тигр отлично иллюстрирует любую мысль и даёт огромное пространство для интересного визуала. С тех пор он фактически стал нашим маскотом: тигров можно встретить на других обновлённых страницах, в емейл-рассылке, на мерче.

Результаты
конверсия в заявку
средняя длительность сеанса
доля сеансов с взаимодействием
сокращение доли отказов
Фактически у нас получилась одна из разновидностей спецпроектов — вовлекающий интерактивный лендинг. Он доступно раскрывает пользователям все аспекты сложной услуги, что помогает разобраться в ней без больших усилий и принять взвешенное решение. А интерактивные элементы цепляют внимание, упрощают восприятие контента и наглядно показывают наши возможности.
На проекте я убедилась, как ценны вовлечённость заказчика и творческая свобода исполнителя. Директор по маркетингу дала мне максимум информации для страницы и право работать с ней так, как посчитаю нужным, — даже переписывать тексты, если они покажутся слишком тяжеловесными. Именно это позволило обернуть содержание в понятную форму, благодаря которой заложенные смыслы считываются легче, а конверсия растёт.
КОМАНДА
ПРОЕКТА






