Автосервис «Мультимоторс» – крупный игрок белорусского авторынка. Больше трёх лет компания занимается продажей электромобилей и гибридов. Машины везут под заказ напрямую из Китая. Также компания занимается обслуживанием электричек: плановое ТО, диагностика, ремонт.
Беларусь
Продажа авто
Сайт под ключ
Дизайнер, Frontend-разработчик, Backend-разработчик, QA-инженер, Проектный менеджер, DevOps
https://multimotors.by
Электротранспорт – история о современном и технологичном. Но старый сайт Мультимоторс шёл вразрез с этими принципами. Ресурс был неактуальным, неудобным, не приносил желаемого количества заявок.
К нам клиент пришёл с чётким видением нового ресурса: сайт должен быть современным, минималистичным, простым и удобным.
Глобально задача была одна: разработать приятный для пользователя и эффективный с точки зрения продаж сайт-каталог. Особенно важно для клиента было:
Сделать комфортную админ-панель
Сделать переход по SEO максимально безболезненным
Сделать всё быстро
Одним из главных пожеланий «Мультимоторс» была скорость разработки. Чтобы сайт заработал как можно быстрее, мы параллелили все этапы работы.
Параллельно с отрисовкой одних страниц мы реализовывали на фронтэнде UI страниц, для которых мы уже сделали дизайн, закладывали логику API, административную панель. Все решения согласовывали «пачками».
В итоге проект, начиная от разработки дизайн-концепции до релиза, мы сделали за 2,5 месяца.
Несмотря на сжатые сроки ни один этап не пострадал. Поэтому разработка началась с анализа рынка электромобилей, изучения специфики сферы.
Для себя мы выделили три ключевых фактора, которые влияют на продажу электромобилей. Эти факторы стали для нас ключевым ориентиром в подготовке структуры и наполнения сайта:
Высокая продолжительность сделки
Высокий средний чек
Важна не только цена
Дизайн-концепция
Технологии, скорость, стиль – эти ассоциации первыми приходят в голову в разговоре про электромобили. Эти принципы мы и взяли за основу дизайн-концепции сайта.
Отсюда – строгий, функциональный дизайн. Основные цвета сайта – нейтральные. На их фоне яркие, акцентные кнопки выделяются и помогают пользователю сконцентрироваться на ключевых элементах.
Шрифт простой и легкочитаемый. Чёткая иерархия текста упрощает навигацию. Все эти решения делают сайт простым для восприятия.
Главная страница
Первый экран или hero section – первое, что видит потенциальный клиент, когда попадает на сайт. Есть примерно три секунды, чтобы убедить человека остаться. В случае с Мультимоторс первый экран получился действительно круто: просто, удобно, динамично.
После первого экрана следует функциональный слайдер с брендами автомобилей и доступными моделями. Карточки – небольшие, но информативные. Микроанимация выполняет практическую функцию: помогает пользователю лучше ориентироваться в интерфейсе, но не отвлекает от знакомства с контентом.
Главная идея сделать так, чтобы клиент мог выбрать электромобиль в несколько касаний.
Фильтр
Для сайта-каталога автомобилей фильтр – один из ключевых инструментов. Процесс выбора электромобиля может занимать от нескольких дней до пары месяцев. Чем он проще и понятнее, тем выше вероятность целевого действия.
В нашем случае фильтр получился интуитивно понятным, удобным. Для ввода данных человек может использовать ползунок или ввести цифры вручную. Типы кузова оформлены в виде иллюстраций. Кроме того, мы решили не делать обязательных параметров: так человек может выбрать авто без лишних сложностей.
Функция сравнения
В разрезе авто-каталога сравнение – одна из самых полезных функций. Для человека это инструмент, который делает сложный выбор чуть проще. Для бизнеса – это более высокий показатель Visit Duration. Пока потенциальный клиент изучает детали, взвешивает «за» и «против», он дольше остаётся на сайте и поднимает вашу страницу выше в выдаче.
Основной упор в проекте мы сделали на карточку авто. В первый экран мы вынесли основное:
Цена
Изображение авто
Конфигуратор
Здесь же кнопка «Оставить заявку». В целом в каталоге «Мультимоторс» мы использовали много разных точек контакта: call-to-action кнопки, формы для запроса допинформации, консультации, традиционные контакты в «шапке» и «подвале». Так мы без лишней навязчивости и давления на пользователя повышаем конверсию сайта.
Чуть ниже – блок с техническими данными, доступные конфигурации. Получилось информативно и при этом довольно ёмко. Но главное, карточки автомобилей всегда актуальны: на сайте работают парсеры, которые помогают мониторить китайские сайты и обновлять информацию в реальном времени.
Административная панель
Малофункциональная административная панель – одна из главных проблем, с которыми к нам пришел клиент. В старой версии администраторам было сложно вносить и редактировать данные, SEO-специалисты не могли продвигать страницы, не обновлялась информация по автомобилям.
Когда мы общались с заказчиком стало понятно: в компании много специфических процессов. Для комфортной работы специалистам нужна мощная панель с конфигуратором формул, обработкой заказов, доступом к редактированию и обновлению контента, метатегам.
Готовым решением закрыть все эти потребности было невозможно, так что мы разработали для проекта персонализированную админ-панель на фреймворке.
SEO
Чтобы переход на новый сайт был безболезненным, оптимизацией ресурса мы занялись уже на этапе разработки. Подготовили SEO-friendly структуру сайта, добавили блок «Новости», гибкое управление метатегами, текстовыми блоками на страницах и разделах, настроили микроразметку.
Не забыли про адаптивную вёрстку. Изучать каталог Мультимоторс одинаково удобно на любых устройствах.
В разработке интерфейса мы применили JavaScript-фреймворк Nuxt.js
Бэкенд сайта реализован на PHP-фреймворке Laravel
Для админки мы использовали Laravel Orchid
Интеграция клиентской и серверной части сайта происходит по API (Application Programming Interface) — технологии, которая позволяет одной программе обмениваться данными с другой.
За 2,5 месяца работы заказчик получил всё, что хотел:
Если говорить в целом, то продукт получился живым и масштабируемым. За счёт того, что проект полностью разработан на фреймворках, его легко растить и дорабатывать. Сейчас мы продолжаем работать с клиентом над другими идеями. Следите за следующими кейсами ;)
