Марс Автозапчасти

Марс Автозапчасти – один из лидеров в сфере розничной продажи автотоваров в Самарской области. Компания имеет сеть розничных магазинов в двух городах, а также осуществляет ремонт и обслуживание автомобилей на собственной сети СТО.

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

Среди множества поставленных перед нами задач можно выделить следующие:

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

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

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

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

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

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

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

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

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

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

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

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

Дополнительно реализовали компактный баннер для оповещения посетителей о маркетинговых событиях, который настраивается независимо для каждого конкретного раздела.

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

Справа от галереи находится основная информация по товару, такая как название, артикул, наличие и конверсионные кнопки покупки в 1 клик и добавления товара в корзину. Также реализован блок расчета стоимости и сроков доставки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для оповещений покупателей магазина о событиях связанных с компанией реализовали раздел с новостями, которые контент-менеджеры могут заполнять без каких-либо особенных навыков в HTML верстке - вся разметка применяется автоматически.

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

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

Первичная обработка заказов в магазине производится в CRM системе RetailCRM. Для автоматизации процесса обработки заказов настроили интеграцию через выгрузку ICML файла в систему, а также двухсторонний обмен заказами с помощью официального модуля.

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

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

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

В качестве результатов работы можно выделить: