Ежегодная конференция TEAMLY | 17 апреля Конференция TEAMLY про управление знаниями и эффективную совместную работу | 17 апреля
Все проекты

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

Сайт: www.kia.ru
Ключевые участники: Солохина Татьяна, Кадебская Любовь, Потапов Максим, Кулеба Виталий, Щукин Андрей, Манеров Дмитрий, Магомедов Ахмед, Ежов Владислав
Технологии: Lumen, Vue.js, GitLab CI, Nginx, Elasticsearch, Docker Swarm, PostgreSQL, php

О Заказчике

ООО «Киа Моторс Россия и СНГ» — официальный дистрибьютор автомобилей KIA на территории Российской Федерации, лидер среди иностранных брендов по объемам продаж. За 10 лет деятельности компании бренд KIA вышел в лидеры российского рынка. Все модели KIA для российского рынка производятся локально. К началу 2019 года на территории России действовало 196 официальных дилерских центров KIA в 100 городах.

О Ситуации

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

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

picture-1

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

Цели проекта

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

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

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

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

picture-1

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

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

picture-1

Совершив переход в раздел, посетитель выбирает понравившуюся модель и ближайший дилерский центр, в котором данный автомобиль доступен для тест-драйва. Дилерские центры представлены не только в виде списка, но и выводятся на карте:

picture-1

На следующем шаге клиент заполняет контактные данные для обратной связи и отправляет заявку дилеру.

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

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

adaptive-picture-1

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

adaptive-picture-1

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

adaptive-picture-2

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

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

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

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

adaptive-picture-2

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

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

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

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

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

adaptive-picture-2

О ключевых решениях проекта

Новый сайт kia.ru представляет собой масштабное архитектурное решение. Он содержит информацию о более 400 комплектациях автомобилей, которые в совокупности насчитывают более 800 уникальных опций. Кроме того, у каждой комплектации есть свой набор цветов, который может варьироваться от двух до 16. Для каждого цвета на сайте реализован обзор 360°. Пользователь может ознакомиться не только с экстерьером автомобиля, но и оценить панорамный вид интерьера салона. Этот контент дополнительно отображается в специальном компоненте, который выводится на разных страницах.

picture-1

Технологический стек frontend части сайта является Single Page Application (SPA). В подходе SPA сборка страниц может осуществляться с использованием уже готовых компонентов, которые отображаются на сайте в разных местах.

Еще одним важным требованием Заказчика стала скорость и стабильность работы ресурса. Во многом это обусловлено маркетинговой составляющей: на сайте постоянно запускаются масштабные промо-акции и кампании.

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

picture-1

Критически значимый фактор — отказоустойчивость системы. Команда 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.

О ближайших планах

Команда QSOFT продолжает развивать digital-платформу kia.ru. В планах Заказчика — дальнейшая реализация уникального для российского автомобильного рынка digital-продукта. Запуск полной версии сайта и внедрение всех технологических решений произойдет поэтапно до конца 2020 года.

Уже сегодня ресурс ознаменовал собой новый этап цифровой трансформации автомобильного рынка. Сайт kia.ru призван стать единой платформой, которая обеспечивает эффективное взаимодействие между автопроизводителем, дилерскими центрами и клиентами. Это эффективная площадка для омниканального маркетинга, которая не просто помогает осуществлять продажи, но и активно способствует формированию потребности в покупке автомобиля марки KIA.

О результате

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

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

Преимущества нового сайта Kia.ru

01
Отказоустойчивость.
02
Масштабируемость: к системе можно с легкостью подключать другие платформы; дублировать сервисы, на которые увеличивается нагрузка.
03
Полная модульность: при необходимости на любые страницы можно добавлять имеющиеся компоненты.
Платформа
новая digital-платформа автомобильной корпорации
200
дилеров на сайте в 90 городах России
>3800
конфигураций на сайте
4 интеграции
с внутренними системами Заказчика и внешними системами
Жизненный путь
клиента от идеи до покупки
Микросервисы
архитектура для масштабирования и отказоустойчивости
ООО «Киа Моторс Россия и СНГ» — официальный дистрибьютор автомобилей KIA на территории Российской Федерации, лидер среди иностранных брендов по объемам продаж. За 10 лет деятельности компании бренд KIA вышел в лидеры российского рынка. Все модели KIA для российского рынка производятся локально. К началу 2019 года на территории России действовало 196 официальных дилерских центров KIA в 100 городах.

Похожие проекты

Начать сотрудничество
Добавить документ
Офис
101000, Россия, Москва, Покровский бульвар, 4/17, стр.1 +7 (495) 771-7363
info@qsoft.ru