анализ 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, чтобы собирать заявки.
Раздел “О компании” – галерея шоурума, история создания, слово от собственника, карта проезда, награды, членство если есть. В этом разделе мы должны собрать информацию, которая повысит степень доверия к бренду.
Отсортировать автомобили в каталоге так, чтобы Пользователь видел сначала реальные фотографии из шоурума, а потом уже другие автомобили от продавцов, которые не смогли пригнать авто в шоурум, авто с фотками из сети, отфотошопленные и т.д. и т.п..