Кейс: Разработка сайта для автодилера с конфигуратором комплектаций

Компания «ТЕХИНКОМ» — официальный дилер 11 автомобильных брендов с автосалонами и сервисными центрами в Москве и Липецке. Компания является партнером крупнейших заводов-изготовителей, среди которых «КАМАЗ», «Русские Автобусы», «УАЗ» и «АВТОВАЗ».

Одно из ключевых направлений — продажа автомобилей LADA, для этой марки только в Москве работает 6 автосалонов.

Дилер имел собственный сайт для продажи автомобилей — pro-lada.ru. Сайт был у нас на техподдержке. Клиент обратился с просьбой обновить дизайн страницы с модельным рядом.

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

Значительную часть трафика составляли мобильные пользователи, и, разумеется, они испытывали определенные неудобства, что сказывалось на коммерческой части — пользователи часто покидали сайт, отказывались от просмотра и редко отправляли заявки.

В то время «Автоваз» создал собственный портал и каждому официальному дилеру предоставил сайт на поддомене, который был полностью построен на визуальном стиле бренда. Но команду клиента этот сайт не устраивал — он абсолютно ничем не отличался от сотен таких же по всей стране, имел массу ограничений при работе с контентом, было невозможно оптимизировать скорость загрузки страниц и провести SEO-оптимизацию.

Руководство компании хотело получить сайт автодилера с современным дизайном, но при этом с элементами, указывающими на официальный статус дилера. Мы должны были использовать фирменные цвета головного сайта «Лада» и совместить пожелания заказчика с общим стилем сайта производителя.

Сформулировали следующие задачи:

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

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

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

То есть недостаточно было сделать сайт просто красивым и быстрым — важно было дать посетителям удобный инструмент для принятия решения на предварительном этапе.

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

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

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

Сайт был реализован на устаревшей табличной верстке и не был адаптирован под мобильные устройства.

С учетом того, что среди дилеров «Лада» существует достаточно сильная конкуренция, поскольку в каждом регионе их несколько, было очевидно, что необходимо выделиться и предоставить пользователям простой и удобный способ оставлять заявки.

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

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

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

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

Посетитель уже имеет какие-то предпочтения, но все равно рассматривает дополнительные варианты. Поэтому на этом этапе важна простота навигации.

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

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

В адаптивной версии при клике по пункту меню «Модельный ряд» происходит переход на список из пяти базовых моделей.

При клике по конкретной модели, например, LADA Vesta Седан, она остается на своем месте и никак не меняется, при этом пять кузовов «Весты» разворачиваются под седаном. При нажатии на другую модель, например, LADA XRAY предыдущий выбор сворачивается и разворачивается нужный пункт.

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

В верхнем меню реализовали пункт «Покупка» с выпадающими категориями, которые позволяют быстро перейти к процессу покупки тем пользователям, которые уже приняли решение.

Здесь мы собрали всю важную информацию. Чтобы мотивировать клиента на посещение салона, дополнительно в этом меню предусмотрели CTA на «Тест-драйв» и «Расчет кредита».

Форму расчета условий кредита реализовали в виде отдельной страницы, что более удобно для пользователей.

Онлайн-расчет кредита позволяет выбрать первоначальный взнос, срок кредита и рассчитать ежемесячный платеж. На последнем этапе вводятся финансовые данные и отправляется заявка на рассмотрение автокредита.

Для приема заявок с сайта создали модальные формы, которые учитывают UX и требования пользователей из ЦА. Важно было их сделать одновременно простыми к заполнению и удобными.

Тест-драйв — это важнейший этап пользовательского пути в офлайне, он позволяет снять сомнения в покупке. Поэтому также проработали форму «Запись на тест-драйв». Она позволяет выбрать модель автомобиля и список автосалонов, в которых доступна пробная поездка.

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

Шаблон формы «Бронирование автомобиля» повторяет шаблон модальной формы «Заказать звонок», за исключением того, что вводится полное наименование модели и комплектация.

Дизайн был динамичным и мог нагружать слабые устройства или работать с замедлениями. Чтобы этого не произошло, мы реализовали верстку модальных форм на Vue.js, что позволило часть функций реализовать через фронтенд, а не через бэкенд. Это позволило достичь быстрой работы интерактивных элементов и высокой производительности.

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

В конце страницы располагается форма для связи с продавцом-консультантом.

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

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

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

При нажатии на маркер пользователь получает краткое описание.

Во второй части блока сделаны акценты на отдельные преимущества.

Окончательный вариант выглядит следующим образом.

Все элементы динамические и интерактивные, что привлекает внимание пользователей.

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

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

Внедрили функционал прокрутки изображения 360°. При отсутствии подходящего изображения для выбранного цвета иконка «360» скрывается.

Блок «Цветовая гамма» занимает 100% ширины вне зависимости от разрешения экрана. Маркеры выбора цвета представляют собой бесконечный слайдер.

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

В блоке реализована логика от общего к частному с повышением уровня детализации и количества информации.

Блок «Комплектации и цены», состоит из следующих функциональных элементов:

Блок с информацией о комплектации состоит из следующих элементов:

Блоки 2 и 3 работают по принципу переключателя — выводится либо один, либо другой.

При клике по ссылке «Подробнее о комплектации» появляется блок с расширенной информацией, состоящий из двух частей:

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

Данный блок состоит:

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

Следующий блок — «Расчет стоимости владения». Функционал считает приблизительную стоимость годового владения автомобилем, помогая будущим автовладельцам заранее оценить дополнительные расходы.

Блок решает две задачи:

Предпоследний блок на странице — «Технологии безопасности». Здесь представлены ключевые моменты, которые обеспечивают безопасность автомобиля.

И дополнительно сделан акцент на отдельных элементах, описание которых раскрывается с помощью маркера.

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

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

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

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

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

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