Новый сайт KIA Motors Россия и СНГ

1. Вводная задача от заказчика, проблематика, цели

У Заказчика возникла необходимость разработать digital-платформу, которая бы учитывала множество пользовательских сценариев и способствовала формированию потребности в покупке автомобиля марки KIA.

В зависимости от задач посетителя, сайт должен отвечать запросам трех типов аудитории:

• 📌 тех, кто только знакомится с модельным рядом;
• 📌 тех, кто уже готов приобрести автомобиль;
• 📌 владельцев автомобилей KIA.

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

Цели проекта

• → 01 Стать современной digital-платформой, которая бы учитывала все этапы взаимодействия бренда с потребителем: see, think, do, care.
• → 02 Обеспечить цифровую трансформацию опыта пользователей: возможность забронировать автомобиль, получить онлайн-подтверждение кредита, записаться на тест-драйв.
• → 03 Предоставить посетителям возможность подобрать автомобиль, его модель, комплектацию и конфигурацию с учетом индивидуальных потребностей и финансовых возможностей.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Благодаря интеграции платформы с CRM-системой Заказчика, SMS-сервисом, системой MySales, где происходит хранение и изменение данных об авто в наличии у дилеров, а также с Русфинанс Банк для передачи данных на онлайн одобрение кредита, удалось наладить непрерывную коммуникацию с пользователем и обеспечить цифровую трансформацию клиентского сервиса.

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

🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵

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

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

✅ Заявка на тест-драйв

Большая часть пользователей заходит на сайт, чтобы познакомиться с продуктом и провести его тестирование. В компоненте «Заявка на тест-драйв» отображаются данные о моделях, доступных у дилеров в реальном времени. Для этого на сайте реализована интеграция с дилерским порталом KIA, где дилеры обновляют данную информацию. Совершив переход в раздел, посетитель выбирает понравившуюся модель и ближайший дилерский центр, в котором данный автомобиль доступен для тест-драйва. Дилерские центры представлены не только в виде списка, но и выводятся на карте. На следующем шаге клиент заполняет контактные данные для обратной связи и отправляет заявку дилеру.

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

На сайте реализован компонент «Конфигуратор». Он тесно интегрирован с компонентом «Кредитный калькулятор», поскольку результат расчета напрямую зависит от выбранной модели, комплектации, конфигурации и цвета. Конфигуратор дает возможность клиенту самостоятельно подобрать модель автомобиля под свои запросы. Функционал позволяет выбирать модель, тип двигателя, трансмиссию, год производства и привод. На следующем шаге конфигуратор показывает пользователю все комплектации модели с теми характеристиками, которые он выбрал ранее. У покупателя есть возможность ознакомиться со всеми опциями комплектации. При этом всегда можно вернуться на предыдущий шаг и изменить параметры. Если клиент не вносит изменений, то параметры сохраняются, и пользователь может перейти к следующему шагу. После выбора комплектации, в компоненте 360° начинают отображаться только те цвета экстерьера, которые доступны для конкретной модели. Если выбранный цвет подразумевает дополнительную плату, сумма автоматически добавляется к основной стоимости автомобиля. На финальном шаге пользователю показывается выбранная комплектация с перечислением технических характеристик и опций модели, а также ее стоимость с учетом всех параметров. Клиент может сразу отправить заявку дилеру на автомобиль.

✅ Кредитный калькулятор

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

На шаге «Расчет кредита» отображаются карточки различных кредитных программ с подробной информацией. Снизу от карточки располагается ползунок с расчетом кредита. Пользователь может самостоятельно вводить и менять такие параметры, как: сумма первоначального взноса, срок кредита, стоимость автомобиля по трейд-ин и размер остаточного платежа. Интерфейс страницы расчетов наглядно демонстрирует клиенту, какую долю в общем объеме кредита занимает сумма первого взноса.

На странице с результатами расчета реализована возможность отправки заявки в банк на предварительное одобрение кредита Русфинанс Банк.

✅ Каталог авто в наличии

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

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

✅ О технических решениях проекта

• 📌 Новый сайт kia.ru представляет собой масштабное архитектурное решение. Он содержит информацию о более 400 комплектациях автомобилей, которые в совокупности насчитывают более 800 уникальных опций.
• 📌 Технологический стек frontend'а сайта - это Single Page Application (SPA). В подходе SPA сборка страниц может осуществляться с использованием уже готовых компонентов, которые отображаются на сайте в разных местах.
• 📌 Критически значимый фактор — отказоустойчивость системы. Команда QSOFT разработала надежную и отказоустойчивую систему как в плане серверной, так и микросервисной архитектуры. Все микросервисы работают на микрофреймворке Lumen. Для разработки пользовательских интерфейсов используется фреймворк Vue.js. Он позволяет создавать сложные одностраничные приложения. Такой подход заметно ускоряет загрузку страниц, позволяет создавать обогащенные интерфейсы, повышает скорость отклика системы в целом.
• 📌 Еще одним важным требованием Заказчика стала скорость и стабильность работы ресурса. Во многом это обусловлено маркетинговой составляющей: на сайте постоянно запускаются масштабные промо-акции и кампании. Все рекламные кампании на сайте реализуются в связке медиа-контента и технологических возможностей. При каждом запуске новой кампании контент ресурса обновляется: на страницах сайта появляется информация о новых продуктах и спецпредложениях. У каждой модели автомобиля есть своя детальная страница, которая содержит актуальную информацию о новых опциях и возможностях.
• 📌 Кластер на базе Docker Swarm. В качестве платформы для запуска всей системы используется кластер на базе Docker Swarm. Всего в системе — 27 серверов.
• 📌 GitLab CI и скрипты для управления конфигурациями. Для управления конфигурациями и автоматическим deploy используется GitLab CI и несколько скриптов.
• 📌 Кластер из 6 узлов Redis. Весь контент сначала выгружается в кэш, и только потом отдается на сайт.
• 📌 Система управления конфигурациями базы данных. Мы протестировали и внедрили систему управления конфигурациями базы данных Stolon, которая дает возможность очень быстро добавлять новые узлы и масштабировать систему. Также она позволяет моментально выводить из эксплуатации нерабочие машины.
• 📌 Объединение сайтов на основе проксирования через Nginx. Уникальное решение, реализованное командой QSOFT, позволило «сшить» два сайта, размещенных на разных платформах, на основе проксирования через Nginx. При этом пользователи не замечают разницы при переходе с одного сайта на другой, а задержки по времени — минимальны.
• 📌 Nginx Unit в контейнерах для запуска микросервисов. Мы применили сервер приложений для веба Nginx Unit в контейнерах для запуска микросервисов. Это позволяет отдавать как статический, так и динамический контент, используя один и тот же сервис.
• 📌 Платформа Graylog. Сбор критически важных данных из логов сервера осуществляется через систему Graylog.
• 📌 Elasticsearch. Быстрая Smart-фильтрация каталога авто без перезагрузки страницы с группировкой карточек авто по набору параметров. Агрегация реального количества автомобилей в наличии с разбивкой по дилерским салонам.

✅ Интеграции

• 📌 CRM-система Заказчика — интеграция с CRM Заказчика позволила обеспечить непрерывную коммуникацию с пользователем и цифровую трансформацию клиентского сервиса.
• 📌 MySales — собственная система Kia, отвечает за онлайн-выгрузку информации о наличии автомобилей в реальном времени.
• 📌 Русфинанс Банк — пользователь может отправить с сайта онлайн-заявку на кредит.
• 📌 SMS Traffic - при отправке заявки пользователю приходит уведомление по SMS.

3. Результаты сотрудничества

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

Чтобы платформа соответствовала требованиям времени, командой QSOFT был разработан поэтапный переход от монолитной архитектуры ресурса к более гибким микросервисам. Такой подход повышает скорость разработки нового функционала и внесения изменений в текущий, обеспечивает стабильность работы сайта. Сегодня ресурс kia.ru работает как Single Page Application, что заметно улучшает опыт пользователей и повышает скорость отклика системы в целом.

• 📌 Платформа
• новая digital-платформа автомобильной корпорации
• 📌 200
• дилеров на сайте в 90 городах России
• 📌 >3800
• конфигураций на сайте
• 📌 4 интеграции
• с внутренними системами Заказчика и внешними системами
• 📌Жизненный путь
• клиента от идеи до покупки
• 📌Микросервисы
• архитектура для масштабирования и отказоустойчивости

4. Заключение

Всего за 4 месяца команде QSOFT удалось разработать полноценную платформу, где потенциальные покупатели могут не просто ознакомиться с модельным рядом KIA и сравнить цены, но и быстро подобрать конфигурацию конкретного автомобиля под свои потребности, рассчитать кредитное предложение, записаться на тест-драйв к определенному дилеру. Важно отметить, что этап непосредственной разработки нового сайта (без учета этапов аналитики и проектирования) занял всего 2 месяца. Это рекордный срок для столь масштабного проекта!