Разработка сайта для продажи авто

Разработка сайта

Кастомная CRM

Исходные данные

Наш клиент занимается продажей автомобилей из Кореи на рынках России, Европы и СНГ. Раньше бизнесу хватало одностраничного сайта, но с ростом проекта стало понятно: для новых масштабов и задач нужен полноценный сайт.

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

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

Стек

Backend

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

Frontend

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

Итог

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

Целевая аудитория

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

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

Мы сделали это главной идеей дизайна — максимально ориентированным на реальные потребности пользователей.

Дизайн, созданный для удобства пользователей

Цвет

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

Отзывы и реальный опыт

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

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

Оживляем бренд

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

Информация под рукой

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

Итоговый дизайн

Функционал сайта

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

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

Получение данных

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

Поиск решения

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

API

Вместо того чтобы продолжать искать обходные пути, мы нашли готовое решение — API, которое можно было интегрировать с сайтом. Вариант быстрый, надёжный и удобный. Теперь информация о каждом автомобиле (марка, модель, год выпуска, фото и технические характеристики) собирается и обновляется на сайте сразу же. Ещё добавили парсинг важных для клиентов данных: историю аварий и информацию о страховании автомобиля.

Одно «Но» все же было у этого решения — данные, которые поступали через API, были на английском и корейском языках. Основная аудитория проекта все‑таки русскоязычные пользователи, поэтому мы подключили Google Translate, который автоматически переводил всю информацию на русский язык.

Этот вариант, кстати, подбирали тоже методом проб и ошибок. Пробовали и Lesta AI, но перевод был неточным. А платные альтернативы вроде Deepl не подходили под бюджет проекта, поэтому Google Translate стал отличным решением.

А еще на корейских сайтах информация часто представлена в другом формате: данные «склеены» и объединяют несколько параметров в одно поле. Там не выделяют привычные для нас параметры отдельно, так как пользователи Кореи фильтруют автомобили по другим критериям. Поэтому мы не просто получали данные, но и дополнительно автоматически их обрабатывали.

Автоматическая конвертация цен

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

Поэтому через API мы подключили интеграцию с Центральным банком России, чтобы цены переводить в нужную валюту автоматически, быстро и точно.

Отдельные возможности и контент для каждой страны

Для нашего клиента по важности наравне с парсингом была настройка возможности выбора страны, особенно с учетом ограничений на доставку авто в Россию и Беларусь. По закону, для этих стран существуют строгие санкции: нельзя доставлять машины стоимостью более 50 000 долларов и с объёмом двигателя свыше 1900 см³. Достаточно одного нарушения для ареста всей компании, поэтому ответственность была большой.

Как в итоге работает система

Если пользователь выбирает Россию как страну доставки, то отображаться будут только те автомобили, которые не попадают под санкции, а стоимости автоматически конвертируется в рубли. Видны все подробные расчёты: пошлины, логистические и складские расходы.

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

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

Тонкости работы системы

Еще одна небольшая фишка для калькулятора – пока пользователь не ввел данные в текущее поле, выбор последующих параметров ему недоступен.

Таможенные нюансы

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

Например, доставка Tesla и BMW одного года с примерно одинаковыми характеристиками будет рассчитываться совершенно по-разному. Изучив основные законодательные акты, мы разработали формулу расчета, которая учитывает все параметры.

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

Заказали сайт, а получили еще и CRM

В админке сайта мы создали и кастомную CRM. Вот как она работает:

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

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

Также можно отметить заявку как «Обработано», и система зафиксирует, какой менеджер и когда это сделал

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

Финальный штрих

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

Инсайты кейса

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

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

Вверх