Разработка сайта для официального дилера EXEED

Интерактивный лендинг с функцией подбора авто

Получить бесплатный аудит

Поделиться кейсом

Задачи

Разработка мудборда и дизайна сайта

Перенос дизайна сайта на Tilda

О клиенте

Компания FRESH AUTO EXEED - официальный дилер авто в Воронеже. Задача с которой клиент пришел к нам: таргетироваться на автолюбителей европейских брендов. Так как мы сотрудничали с клиентом уже год, то знали, что стоимость лида в этой сфере достаточно большая и часто упирается в спрос. Поэтому, нам пришла идея сыграть на ситуации рынка и масштабироваться, чтобы получить дополнительный трафик. Так мы предложили клиенту несколько идей и заключительная, на которой остановились - это интерактивный сайт. Нашей целью на этот проект стала разработка интерактивной посадочной страницы для запуска контекстной рекламы на автолюбителей европейских брендов, который бы показывал преимущества покупки авто клиента и служил бы местом сбора заявок. В команду проекта вошли: аккаунт менеджер, дизайнер, разработчик.

Перед началом работы над сайтом, мы изучили: примеры страниц сравнения у сторонних площадок, фирменный стиль клиента и обговорили возможные варианты взаимодействия со страницей в команде. Нам необходимо было создать страницу с компактным выводом большого количества информации об авто и удобным выбором машин для сравнения. Кроме того, нужно было ограничить вывод подходящих моделей Exeed в зависимости от авто, которое пользователь выбрал для сравнения. Так, если на первой странице пользователь, например, выбирал BMW X3 то для сравнения выводились модели серии LX.

Этап 1

Разработка прототипа

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

Этап 2

Проработка блоков

В ходе работы мы создали:

блок со сравнением стоимости владения авто;
блок с формой обратной связи;
блок с преимуществами авто.

Далее, нами была создана адаптивная версия макета и страница 404.

Этап 3

Разработка квиза

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

1. Определили цели

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

2. Разработали формат квиза

Квиз мог быть представлен в разных вариантах:

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

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

3. Разработали дизайн пользовательского интерфейса

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

C какими трудностями мы столкнулись в процессе работ?

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