Разработка интернет-магазина смазочных материалов

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

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

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

ООО «Комтекс» — торгово-финансовая компания, которая более 30 лет работает на рынке поставок смазочных материалов, автохимии и сопутствующих товаров.

Компания поставляет:

• индустриальные масла;

• автомобильные масла;

• автохимию;

• смазочные материалы;

• фильтры;

• сопутствующую продукцию.

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

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

• Каталог с понятной структурой. Клиент быстрее находит нужную категорию.

• Карточки товаров с характеристиками. Покупатель видит параметры, описание, аналоги и технические документы без запроса менеджеру.

• Умный поиск по артикулу, бренду и применению. Это сокращает путь от потребности до товара.

• Личный кабинет для оптовых клиентов. B2B-клиенты видят персональные цены, историю заказов, документы и статусы.

• Личный кабинет для розничных клиентов. Покупателю удобно управлять заказами, корзиной и личными данными.

• Интеграция с CRM. Заказы и данные клиентов не теряются и быстрее попадают в работу.

• Интеграция с системой учета. Остатки и цены можно поддерживать в актуальном состоянии.

• Раздел с сертификатами и партнерскими программами. Это усиливает доверие и помогает принимать решение о покупке.

• Адаптивность под все устройства. Клиент может искать и заказывать товары с компьютера, планшета или телефона.

• Базовая SEO-оптимизация. Сайт получает техническую основу для роста органического трафика.

• Защита персональных данных. SSL, политика конфиденциальности и соответствие требованиям 152-ФЗ помогают безопасно работать с клиентскими данными.

Этап 1. Маркетинг

Собрали информацию по принципу трех «К»: Компания, Клиенты, Конкуренты.

• провели интервью с клиентом

• проанализировали ассортимент, ценовую политику, логистику

• составили карту пользовательских сценариев (например, «автосервис ищет масло по артикулу», «дистрибьютор оформляет оптовый заказ», «частник подбирает фильтр для своей машины»)

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

• создали «аватары клиента» для разных сегментов

• проанализировали боли и потребности (поиск аналогов, прозрачность цен, скорость обработки заказов, наличие сертификатов)

• изучили 12 сайтов конкурентов в сегменте поставок масел и автохимии

• выделили лучшие практики по презентации технических характеристик и работе с B2B‑клиентами

• исследование ЦА

• анализ компании

• обзор конкурентов

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

Этап 2. Проектирование

Спроектировали структуру интернет-магазина и ключевые пользовательские сценарии.

• Главная страница

• Каталог продукции

• Карточка товара

• Страница поиска

• Личный кабинет оптового клиента

• Личный кабинет розничного клиента

• Правила заказа для розничных и оптовых клиентов

• Доставка

• О компании

• О продукции

• Контакты

• фильтрация товаров по типу и применению

• поиск по артикулу, названию и бренду

• карточка товара с характеристиками, аналогами и похожими товарами

• технические паспорта и документы

• корзина

• оформление заказа

• персональные цены для оптовиков

• история заказов

• трекинг заказа

• интеграция с CRM

• обновление остатков и цен через систему учета

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

• прототипы страниц 

• техническое задание

• стало понятно, как пользователь будет искать товар, сравнивать характеристики, смотреть аналоги, добавлять продукцию в корзину и оформлять заказ

Этап 3. Дизайн сайта

Разработали дизайн в строгом деловом стиле с акцентом на функциональность и доверие.

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

• Продумали визуальную структуру каталога. Клиент быстрее ориентируется в ассортименте.

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

• Проработали поиск по артикулу и названию. Пользователь быстрее попадает к нужной позиции.

• Настроили понятную навигацию между категориями. Это важно для широкого ассортимента масел, автохимии и фильтров.

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

• Подобрали фотоконтент: продукция, сертификаты, производственные и товарные материалы.

• Согласовали визуальную концепцию: корпоративные цвета, четкая типографика, лаконичные иконки.

• Дизайн-макеты всех страниц были готовы к верстке. 

• Интерфейс получился удобным для B2B- и B2C-клиентов: каталог не перегружает, карточки помогают выбирать, а личный кабинет выглядит как понятный рабочий инструмент.

Этап 4. Верстка

Сверстали макеты с использованием HTML, CSS и JavaScript. Основной акцент сделали на стабильность, скорость и удобство на разных устройствах.

• адаптивную верстку для компьютеров, планшетов и смартфонов;

• корректное отображение в разных браузерах;

• оптимизацию скорости загрузки;

• сжатие изображений;

• кеширование;

• микроанимации для улучшения UX;

• проверку отображения на экранах с разным разрешением.

• готовые HTML-страницы интернет-магазина

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

Этап 5. Разработка back-end

Разработали сайт на платформе 1С-Битрикс, лицензия «Бизнес».

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

Подключили систему оплаты — ЮKassa.

Подключили систему учета «Мой склад»  для актуализации остатков и цен.

Результат: альфа-версия сайта.