Продающая страница сервиса аналитики

X5 Dialog

Страница аналитики продаж от X5 Group, которая объясняет, что дает продукт, сравнивает тарифы и ведет к заявке на бесплатный доступ

Роль

Концепция вместе с лидом, доработки, десктоп, планшет и мобильная версия, спецификация для разработки

Результаты

Страница запущена и больше года работала на этом дизайне
На странице появилось сравнение четырех тарифов по 11 параметрам
Лендинг выглядит частью обновленного сайта X5 Dialog

Ситуация

Страница у продукта была, но она не продавала и выбивалась из обновленного сайта

X5 Dialog Insights — аналитика продаж на данных X5 Group: чеках и картах лояльности Пятерочки, Перекрестка и Чижика, офлайн и онлайн. X5 продает ее компаниям, которым важно понимать свои продажи и покупателей. Сайт X5 Dialog к тому времени обновили, а страница Insights осталась в старом дизайне, и при переходе между разделами разница бросалась в глаза.

К тому же страница почти ничего не объясняла: в чем суть продукта, что входит в тарифы и сколько это стоит. Клиенту было непонятно, что он получит и с чего начать.

Задача

Сделать продающий лендинг продукта в стиле обновленного сайта

Продающая страница: объяснить ценность продукта, показать тарифы и привести клиента к заявке.

Единый стиль: взять основные элементы обновленной главной X5 Dialog, чтобы переход между разделами был незаметным.

Воронка: главная цель — заявка на бесплатный доступ. Так X5 собирает контакты и потом знакомит клиента с платными планами.

Моя роль: концепция вместе с лидом, все доработки, десктоп в двух размерах, планшет и мобильная версия, спецификация для разработки.

Первый экран на десктопе — Десктоп · 1440 px

Первый экран на планшете — Планшет · 834 px

Первый экран мобильной версии — Мобильная · 375 px

Лендинг в трех версиях. Каждый блок проработан отдельно для десктопа, планшета и телефона, со своими состояниями.

Процесс

Начали с ТЗ продукта, а дольше всего работали над тарифами

ТЗ от X5

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

Тексты

Продающие тексты писал копирайтер, которого мы привлекли отдельно.

2 итерации концепции

Сильнее всего между ними поменялась таблица тарифов: ее дорабатывали дольше остальных блоков.

Разработка

Страницу верстала команда X5. Я передала макеты для десктопа, планшета и телефона и описала поведение интерактивных элементов.

Решения

Пять решений, которые ведут клиента от ценности продукта к заявке

01Задачи клиента и график на первом экране

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

Прототип: вкладки меняют пример отчета, а при наведении на график появляется тултип с метриками, которые есть в отчете

02Таблица тарифов

Четыре тарифа по 11 параметрам: от описания и цены до формата отчетов и частоты обновления данных. Бесплатный тариф стоит первым и выделен зеленым: главная цель страницы — заявка на бесплатный доступ, а платные планы рядом, чтобы было с чем сравнить.

03Карточки тарифов на телефоне

Таблица на четыре колонки не помещается в телефон, поэтому на мобильном каждый тариф стал отдельной карточкой: название, описание, цена и кнопка. Все параметры раскрываются по «Подробнее о тарифе». Переключите вид и раскройте карточку.

04Карточки клиентов переворачиваются

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

Названия компаний и имена изменены, фото стоковые

05Мобильная версия со своими состояниями

Наведения на телефоне нет, поэтому тултип графика стал оборотом карточки: метрики открываются по тапу. А кнопка «Заявка на демо» появляется в шапке, когда основная кнопка первого экрана уходит из вида.

Первый экран мобильной версии: карточка графика перевернута и показывает доступные метрики — Метрики на обороте карточки графика

Мобильная версия после скролла: в шапке появилась кнопка «Заявка на демо» — После скролла в шапке появляется кнопка

Спецификация

Описала поведение интерактивных элементов для разработки

Тултипы графиков

Нарисовала тултипы для каждой вкладки и правила их положения: где появляется, как следует за курсором и что делать у края экрана.

Состояния и ссылки

Ховеры карточек и кнопок, выпадающее меню, перевороты карточек, слайдеры и ссылки каждого блока описала комментариями прямо в макетах.

Экран с тултипом в правом нижнем углу от курсора — Тултип появляется в правом нижнем углу от курсора и следует за ним. Крайнее правое положение — 30 px от края макета, а если тултип не помещается, он открывается слева от курсора

Результат

Страница объясняет продукт, сравнивает тарифы и ведет к заявке на бесплатный доступ, а выглядит частью сайта X5 Dialog

тарифа в сравнении по 11 параметрам

версии страницы: десктоп, планшет и телефон

итерации концепции

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

Следующий кейс