Разработка сайта-каталога для "Мультимоторс"

Вводные данные о клиенте

Автосервис «Мультимоторс» ‎– крупный игрок белорусского авторынка. Больше трёх лет компания занимается продажей электромобилей и гибридов. Машины везут под заказ напрямую из Китая. Также компания занимается обслуживанием электричек: плановое ТО, диагностика, ремонт.

Регион

Беларусь

Ниша/отрасль

Продажа авто

Тип проекта

Сайт под ключ

Над проектом работали

Дизайнер, Frontend-разработчик, Backend-разработчик, QA-инженер, Проектный менеджер, DevOps

сайт компании

https://multimotors.by

Проблема, с которой пришёл клиент

Электротранспорт – история о современном и технологичном. Но старый сайт Мультимоторс шёл вразрез с этими принципами. Ресурс был неактуальным, неудобным, не приносил желаемого количества заявок.

К нам клиент пришёл с чётким видением нового ресурса: сайт должен быть современным, минималистичным, простым и удобным.

Задачи

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

Сделать комфортную админ-панель

Система управления на старом ресурсе была малофункциональной и неудобной.

Сделать переход по SEO максимально безболезненным

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

Сделать всё быстро

Настолько быстро, насколько это вообще возможно.

Что сделали

Одним из главных пожеланий «Мультимоторс» была скорость разработки. Чтобы сайт заработал как можно быстрее, мы параллелили все этапы работы.

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

В итоге проект, начиная от разработки дизайн-концепции до релиза, мы сделали за 2,5 месяца.

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

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

Высокая продолжительность сделки

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

Высокий средний чек

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

Важна не только цена

По статистике, при поиске автомобиля диапазон цены указывают не более 10% пользователей. Всё потому что покупатель готов переплатить за эмоции и комфорт. Здесь решающую роль играет презентация авто.

Дизайн-концепция

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

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

Шрифт простой и легкочитаемый. Чёткая иерархия текста упрощает навигацию.
Все эти решения делают сайт простым для восприятия.

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

Первый экран или hero section – первое, что видит потенциальный клиент, когда попадает на сайт. Есть примерно три секунды, чтобы убедить человека остаться. В случае с Мультимоторс первый экран получился действительно круто: просто, удобно, динамично.

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

Главная идея сделать так, чтобы клиент мог выбрать электромобиль в несколько касаний.

Фильтр

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

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

Функция сравнения

В разрезе авто-каталога сравнение – одна из самых полезных функций. Для человека это инструмент, который делает сложный выбор чуть проще. Для бизнеса – это более высокий показатель Visit Duration. Пока потенциальный клиент изучает детали, взвешивает «за» и «против», он дольше остаётся на сайте и поднимает вашу страницу выше в выдаче.

Основной упор в проекте мы сделали на карточку авто.
В первый экран мы вынесли основное:

Цена

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

Изображение авто

Вместо фото мы используем 3d-визуализацию. Так пользователь может изучить машину со всех сторон.

Конфигуратор

В несколько касаний пользователь может выбрать комплектацию и цвет авто.

Здесь же кнопка «Оставить заявку». В целом в каталоге «Мультимоторс» мы использовали много разных точек контакта: call-to-action кнопки, формы для запроса допинформации, консультации, традиционные контакты в «шапке» и «подвале». Так мы без лишней навязчивости и давления на пользователя повышаем конверсию сайта.

Чуть ниже – блок с техническими данными, доступные конфигурации. Получилось информативно и при этом довольно ёмко. Но главное, карточки автомобилей всегда актуальны: на сайте работают парсеры, которые помогают мониторить китайские сайты и обновлять информацию в реальном времени.

Административная панель

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

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

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

SEO

Чтобы переход на новый сайт был безболезненным, оптимизацией ресурса мы занялись уже на этапе разработки. Подготовили SEO-friendly структуру сайта, добавили блок «Новости», гибкое управление метатегами, текстовыми блоками на страницах и разделах, настроили микроразметку.

Не забыли про адаптивную вёрстку. Изучать каталог Мультимоторс одинаково удобно на любых устройствах.

Что под капотом?

В разработке интерфейса мы применили JavaScript-фреймворк Nuxt.js

По нашему опыту, это решение лучше всего подходит для сайтов с большим количеством динамических данных. А ещё за счёт встроенной системы маршрутизации и автоматической генерации метатегов, Nuxt.js облегчает процесс SEO-продвижения.

Бэкенд сайта реализован на PHP-фреймворке Laravel

За счёт этого мы полностью персонализировали сайт и заложили фундамент для развития проекта. По мере роста бизнеса сайт на Laravel будет легко масштабироваться и дорабатываться. Ещё Laravel хорош с точки зрения безопасности. Кроме регулярного обновления кода, этот фреймворк использует защищенные кэшированные пароли, которые никогда не будут сохранены в базе данных в виде текста, встроенные функции безопасности, такие как защита от подделки межсайтовых запросов, предотвращение SQL-инъекций и защита от межсайтовых скриптов. Подробнее про этот фреймворк можно прочитать тут

Для админки мы использовали Laravel Orchid

Интеграция клиентской и серверной части сайта происходит по API (Application Programming Interface) — технологии, которая позволяет одной программе обмениваться данными с другой.

Что в итоге?

За 2,5 месяца работы заказчик получил всё, что хотел:

Удобный и современный сайт, который отвечает всем потребностям ЦА
Комфортная админка, которая сделала жизнь менеджеров проще
Сайт не просел в поисковой выдаче: уже через полгода ресурс вышел на старые позиции и начал подниматься ещё выше

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