x2,4 Conversion Rate: интерактивный лендинг ключевой услуги

Главное о кейсе

Переработали страницу спецпроектов на сайте агентства. Задачи — подробно и при этом нескучно рассказать о ключевой услуге и вовлечь пользователей во взаимодействие.

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

Ключевые результаты:
• х1,47 средняя длительность сеанса;
• х2,4 коэффициент конверсии в заявку на услугу.

Как проект изменил жизнь пользователей

Обновлённая страница в доступной форме раскрывает все аспекты сложной услуги. Это помогает пользователям разобраться в сложной теме без больших усилий и принять взвешенное решение.

Бизнес-задача и ее решение

На маркетинговом рынке спецпроектами называют самые разные форматы. Нашу специализацию объясняет отдельная страница сайта. В 2023 году мы решили обновить её, так как контент не погружал как следует в неочевидную услугу и уже не отражал актуальный опыт и возможности агентства: https://myemx.ru/WfOnD_

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

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

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

Фактически у нас получилась одна из разновидностей спецпроектов — вовлекающий интерактивный лендинг. Вот его результаты за 9 месяцев относительно предыдущего периода:

• в 1,38 раза увеличилось количество сеансов;
• в 1,47 раза увеличилась средняя длительность сеанса;
• в 1,43 раза увеличилась доля сеансов с взаимодействием;
• в 2,07 раза уменьшилась доля отказов;
• в 2,4 раза увеличился коэффициент конверсии в заявку.

Крафт (мастерство), реализация, технические детали

Основным приёмом стали раскрывающиеся списки и вкладки. Они позволили, к примеру, компактно разместить 10 примеров механик с большими иллюстрациями и разбивкой на категории: https://myemx.ru/WfOnry

Аналогично мы уместили на один экран 12 крупных карточек кейсов. Чтобы зацепить взгляд пользователей, также использовали анимацию и с помощью эмодзи выделили проекты, отмеченные наградами: https://myemx.ru/WfOoBF

Цены мы представили на флип-карточках. Это ещё один интерактивный элемент, который привлекает внимание к ключевой информации. Карточки по ассоциации с тематикой страницы стилизованы под игральные карты: https://myemx.ru/WfOoXJ

В мобильной версии карты можно даже тасовать — так мы сразу и сэкономили место, и усилили погружение: https://myemx.ru/WfOosU

Также мы активно использовали образ тигра. Он показывает мощь наших лапищ и развлекает пользователей, попадая в странные ситуации. Так, в разделе о сроках работ тигр играет роль стрелки в часах, в разделе о ценах прыгает по тумбам вслед за курсором, а ещё в одном месте его вообще можно разрезать ножницами: https://myemx.ru/WfOpAM С помощью этих элементов мы ушли от «стены текста» в блоках, для которых нет содержательных иллюстраций.

Сложнее всего оказалось оформить блок с подробным описанием процесса нашей работы. Это важный, но длинный и скучный список. Мы украсили его с помощью отражающего этапность прогресс-бара и наглядных артефактов из разных проектов: https://myemx.ru/CPtjoz

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Проект подтвердил важность совместной работы разных специалистов на примере сотрудничества руководителя проекта — опытного маркетолога — и дизайнера. Первый дал богатое содержание, второй — понятную форму, благодаря которой заложенные смыслы считываются легче. У дизайнера даже было право переписывать тексты, если те казались слишком тяжеловесными.

Прочая информация о кейсе

В этом проекте мы впервые широко использовали тигров — и выяснили, что они очень хорошо иллюстрируют любую мысль и дают огромное пространство для интересного визуала. С тех пор мы активно применяем образ. В частности, тигры есть:

• на других обновлённых страницах: https://myemx.ru/WfOp1Q и https://myemx.ru/WfOqRO
• в емейл-рассылке: https://myemx.ru/CPtjvi
• на мерче для сотрудников: https://myemx.ru/WfOqyp

Скриншоты