Китаяна — запчасти и сервис для китайских автомобилей

— разработать омниканальный интернет-магазин, который будет удобен пользователям

— выстроить доверительные отношения бренд-клиент, стать выбором №1 для покупателей

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

— сделать бренд запоминающимся, выделяющимся среди конкурентов направления

Это история трансформации ритейла в eCommerce.

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

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

Интернет-магазин отличается от сайтов-конкурентов сильным интерактивным брендингом (микроанимации и 3D-иллюстрации являются неотъемлемой частью дизайн-концепции).

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

При появлении новых подкатегорий добавлять новые 3D-объекты будет не сложно. 

Результат работы отлично выглядит как в сетке каталога, так и по отдельности. 

Провели два раунда серий интервью: с клиентами, и с внутренним заказчиком. Состыковали ожидания клиента и бизнеса, разработали основные сценарии.

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

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

Подготовив такой стилистический базис, мы сформировали стратегический задел на будущее – при появлении новых подкатегорий добавлять новые 3D-объекты будет не сложно.

Результат работы отлично выглядит как в сетке каталога, так и по отдельности.

Мы смоделировали и анимировали около ста 3D-объектов автомобильной тематики: запчасти и комплектующие, двигатели, расходные материалы и т.д.. Мы решили смоделировать основные автомобильные узлы и объекты ключевых товарных категорий без привязки к конкретным производителям. Все интерактивные иллюстрации выполнены в узнаваемой стилистике Китаяны, а при помощи моушн мы «поворачиваем» 3D-иконку под нужным углом и «подсвечиваем» конкретный узел. Это решение является одновременно функциональным и имиджевым, элегантно распространяя фирменную айдентику на важные блоки каталога, которыми посетители пользуются чаще.

Карточки товаров, корзина, разделы сравнения и избранного, модальные окна, поиск и фильтры — для каждого UX-компонента мы продумали сценарии появления, изменения, пересчёта, морфинга и закрытия. Пользование сайтом будет напоминать опыт пользования приложением — находить нужное, просматривать одновременно несколько вариантов без перезагрузки страниц, управлять корзиной и списками очень удобно.

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

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

Шина данных реализована на базе Kafka. Через шину происходит обмен данными и выгрузка позиций для сайта – это основной канал интеграции с внутренними и внешними системами.

Сложная многоскладовость – есть позиции на складах, в оффлайн-магазинах, на складах поставщиков.

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

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

Серверная часть и фронтенд (Vue.js) разнесены и взаимодействуют через REST API.

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

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

Омниканальный подход к работе бизнеса делает Customer Experience предсказуемым и удобным. При покупке как в оффлайн-магазинах Китаяны, так и онлайн, сработает единая программа лояльности, а в личном кабинете будет видна история всех покупок. 

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