анализ UX vip-car.com.ua

анализ UX
vip-car.com.ua

рекламно-
маркетинговое
агентство

Страница автомобиля

https://www.figma.com/file/4wms24TZOxFerG6XpJiPaT/VIPCAR?node-id=0%3A1 — полное превью страницы

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

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

Кнопка “Узнать цену” — при нажатии на кнопку открывается модальное окно с названием автомобиля и полем для ввода контактного номера телефона. На поле с номером телефона должна быть валидация.

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

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

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

Блок ключевых характеристик — в виде таблицы выведены ключевые характеристики автомобиля на которые пользователь обращает внимание при выборе. При верстке можно добавить анимацию на каждую строку, чтобы таблица появлялась плавно, построчно. Блок с хар-ми закрывает кнопка “Купить автомобиль” — перенаправление на страницу “Покупка машины”.

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

Вместо блоков “Еще новые Range-Rover”, “Еще БУ Range-Rover” выводить блок похожих моделей. Наполнять этот блок новыми или БУ автомобилями нужно исходя из того, какую модель в данный момент просматривает пользователь.

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

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

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

Страница “Покупка машины”

https://www.figma.com/file/4wms24TZOxFerG6XpJiPaT/VIPCAR?node-id=17%3A226

Проблема на текущем сайта заключается в том, что при переходе на страницу оформления заказа пользователь должен вручную вводить название марки https://vip-car.com.ua/online/buy

Переименовываем кнопку “Найти автомобиль” на “Подобрать авто” и помещаем внутрь формы обратной связи. Тут важно проконсультироваться с разработчиком и согласовать логику таким образом, чтобы отфильтрованные автомобили могли сразу попадать в форму обратной связи. В таком случае Пользователь сможет сразу выбрать авто, а не вводить название руками.

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

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

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

Страница “Предложение продажи”

https://www.figma.com/file/4wms24TZOxFerG6XpJiPaT/VIPCAR?node-id=58%3A2

Можно сделать поле “АВТОМОБИЛЬ” не обязательным для тех Пользователей, которые не желают заполнять форму, а просто хотят оставить контакты и дождаться обратного звонка от менеджера. Если сделать поле обязательным — мы получим четко сформированные заявки, которые можно передавать* в БД и на их основании создавать автомобили для продажи в каталоге сайта.

*для подобной автоматизации требуется back-end доработка. В результате администратор будет только подтверждать публикацию и добавлять при необходимости фотографии из шоурума.

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

Страница “Сообщить о проблеме”

https://www.figma.com/file/4wms24TZOxFerG6XpJiPaT/VIPCAR?node-id=86%3A48

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

Страница Категории

https://www.figma.com/file/4wms24TZOxFerG6XpJiPaT/VIPCAR?node-id=63%3A150

Следует добавить SEO-описание в каждую категорию для индексации поисковыми системами. На изображении сео-текст находится справа от логотипа, если нажать на + блок раскроется и отобразиться весь текст.

Этот шаблон можно использовать под все возможные категории. Если это год, то вместо логотипа выводить дату, если это статус, выводить статус и т.д. Главное добавлять SEO-текст, чтобы категории индексировались. Чем больше будет категорий, тем лучше.

Карточка автомобиля в выдаче выглядит следующим образом (схематично).

Галерея превьюшки должна свайпиться (нужно добавить стрелки навигации). Заголовок каждой публикации состоит из марки, модели и года и формируется автоматически. Две наиболее важные характеристики, чтобы зацепить внимание пользователя. Цена или кнопка со звонком. Редирект с кнопки для ПК должен вести в телеграмм (сейчас никуда не ведёт).

Убрать пагинацию и сделать автоподгружение других страниц, чтобы пользователь мог скролить бесконечно 🙂

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

Страница “ТрейдИН”

Цель этой страницы получить заявку от посетителя. На данный момент на странице отображаются только автомобили доступные к “трейд-ин”. Возможно, будет логично (нужно учтонить по бизнес-процессу) после заполнения формы на оценку автомобиля, отобразить пользователю вторую форму на выбор автомобиля, на который он может обменять свой автомобиль с доплатой.

Поле “Марка авто” после заполнения раскрывается дополнительными полями: модель, объем, пробег, тип топлива, трансмиссия, год выпуска, мощность.

Страница “Лизинг” имеет аналогичную форму обратной связи с выпадающими хар-ми автомобиля как на странице оформления заказа.

Главная страница

https://www.figma.com/file/4wms24TZOxFerG6XpJiPaT/VIPCAR?node-id=98%3A88

Мобильное меню

https://www.figma.com/file/4wms24TZOxFerG6XpJiPaT/VIPCAR?node-id=33%3A204

Мобильное меню должно содержать в себе ключевые точки для входа пользователя. Обязательные ссылки на покупку и продажу автомобиля. Отдельно сделать страницу с возможностью забронировать автомобиль на тест-драйв (использовать фильтр из формы покупки автомобиля + время удобное для посещения или доступное). Выпадающим списком сделать пункт “Наши услуги”, где перечислить: Лизинг, трейд-ин и т.д.

Предложения

Создать страницу (вывести доп.кнопку на странице авто) ТЕСТ-ДРАЙВ для того, чтобы собирать заявки от тех, кто желает посетить салон и протестировать автомобиль. На странице можем использовать аналогичный фильтр как на странице “Покупка машины”

Вывести отзывы на сайт из аккаунта Google My Business — можно добавить в футер сайта блок, где будут отображаться последние комментарии пользователей + кнопка-переход на форму добавления комментария в ГМБ.

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

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

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