Современный B2B e-commerce требует особого подхода к разработке интернет-магазинов. Клиенты ожидают функциональность и удобство на уровне лучших B2C маркетплейсов, но с учетом специфики оптовых продаж. В этой статье мы расскажем о разработке интернет-магазина для компании Groster — проекте, который стал примером успешной цифровой трансформации в сфере оптовой торговли.
О клиенте
Groster — это интернет-магазин, работающий на рынке более 20 лет. Компания предлагает оптовым покупателям товары для сферы общественного питания (рестораны, кафе, фастфуд и пр.), упаковку для разных сфер бизнеса, спорттовары, праздничные аксессуары, предметы для дачи, бытовую химию, продукты питания и многое другое.
За два десятилетия работы Groster сформировал обширную клиентскую базу и глубокое понимание потребностей оптовых покупателей
Задача
Разработать интернет-магазин, чтобы пользователи быстро и удобно совершали оптовые заказы. Сайт ориентирован на B2B, но с точки зрения UX/UI он должен соответствовать лучшим торговым площадкам в B2C.
Целевая аудитория
Владельцы и сотрудники ресторанов, фастфуда, представители гостиничного бизнеса, собственники магазинов и другие представители коммерческого сектора, работающие с оптовыми закупками.
Решение
Предыдущая версия сайта клиента перестала соответствовать его требованиям и устарела функционально. Мы реализовали современный интернет-магазин для оптовиков, внешне и по функционалу похожий на маркетплейсы. Работа шла двухнедельными спринтами. Быстро адаптировались к требованиям заказчика и реализовывали фичи с учетом приоритетов.
Что мы сделали в процессе работы
- Сделали сложный функционал каталога товаров
- Разработали удобный личный кабинет
- Обеспечили информативную карточку товара
- Позаботились об удобстве оформления заказов
- Реализовали BI-аналитику для сайта
1. Проработали сложный функционал каталога товаров
Реализована выдача товаров с учетом разных параметров. Категории товаров наглядно представлены на сайте.
Использован сервис поиска товаров, работающий по частичному вводу (например, кода, артикула или названия). Это обеспечено за счет интеграции с сервисом поиска Diginetica.
Даже не выбирая фильтры, пользователь видит релевантные категории. Алгоритмы предлагают связанные по смыслу товары. Еще до открытия товарной карточки видна цена за единицу и количество товара. Можно получить информацию о наличии товара, учитывая местоположение пользователя.
Ключевые особенности каталога:
- Разработаны индивидуальные фильтры сортировки с максимальной точностью и глубиной. Они быстро подгружаются
- Проведена работа с десятками свойств товаров, обеспечена широкая вариативность выбора
- Можно поделиться товаром, отправить ссылку, добавить в избранное
- Реализован сложный функционал сравнения товаров на сайте
- Перед покупкой большой партии товара можно заказать его видеопрезентацию в zoom или skype либо в мессенджерах
- Многоуровневая структура каталога предполагает бесконечную вложенность категорий
2. Сделали удобный личный кабинет
Пользователь может войти в личный кабинет через почту или номер телефона. Сайт позволяет завести корпоративный профиль и привязать аккаунты сотрудников с учетом роли в компании. Можно указать юридическое лицо плательщиков.
В личном кабинете пользователь получает оповещения на товары, на которые подписан. Можно изучить прошлую историю заказов, посмотрев заказы по номеру, коду.
Система сохраняет адреса предыдущих доставок и предоставляет пользователю выбор, куда заказать. Она напоминает про регулярные заказы и позволяет в один клик повторить заказ целиком
А чтобы клиентам было удобнее вбивать номера и адреса, сделали интеграцию с DaData. Сервис проверит, правильно ли все написано.
3. Обеспечили информативную карточку товара
Карточка товара отображает максимум информации даже до клика по ней. Покупателю видно, сколько интересующих его товаров в наличии, и сколько они стоят. Сделано детальное текстовое описание товара и проработана мета-разметка для улучшения SEO.
4. Позаботились об удобном и быстром оформлении заказов
Пользователи могут использовать фильтры по адресу доставки и самовывоза. Можно выбрать объем товара, рассчитанный на основе стандартных объемов покупок. Приведены типовые значения.
Покупатели заказывают товары как штучно, так и комплектами (товар плюс тара). Расчет оптовой продукции заранее проводится сотнями и тысячами, что облегчает выбор для пользователей.
Удобства корзины и оформления:
- Можно начать делать заказ с телефона в удобной мобильной версии сайта, сохранить его и продолжить с компьютера
- В корзине у каждого товара виден срок доставки. Товары визуально разбиты по категориям
- Доступны рекомендации по товарам. Можно выбрать в корзине аналог, чтоб сразу заменить
- Пользователю предлагают то, что покупатели часто выбирают, также то, чем они интересовались, и что соответствует по смыслу
- Список товаров в корзине можно напечатать в формате коммерческого предложения и поделиться с пользователями
- Можно в один клик завершить заказ в корзине и оплатить его онлайн
Сделана интеграция сайта с Leadhit и Ю.Кассой. Клиентам доступны промокоды и скидки. Если что-то пошло не так, с формы обратной связи идет заявка в Telegram-канал службы поддержки. Это ускоряет общение с клиентами.
5. Реализовали BI-аналитику для сайта
Заказчик поручил нам визуализировать данные по заказам, клиентам и товарам интернет-магазина. Применить группы фильтров и учесть разные периоды времени. Мы сделали дашборды на Yandex DataLens, на которых информация в интернет-магазине отображается онлайн.
Проведенная работа открыла и нам, и бизнесу ключевые метрики по клиентам, заказам и товарам. Выявили наиболее проблемные места и точки роста, определили ядро целевой аудитории, зависимость продаж товаров определенных групп от форматов рекламы и пр.
BI-аналитика стала поводом для клиента пересмотреть бизнес-стратегию и маркетинговые активности
Технологический стек
Для реализации проекта мы использовали современные технологии:
- Frontend: React.js, Next.js, Redux Toolkit
- Backend: Symphony, PHP
- Аналитика: Yandex DataLens
- Интеграции: Diginetica, DaData, Leadhit, Ю.Касса
Результат
Интернет-магазин Groster стал лидером в регионе по функционалу и продажам. Он обеспечивает улучшенный пользовательский опыт. Покупателям доступны новые функциональности, а сервисы позволяют удобнее совершать покупки. Внешний вид и функционал сайта ориентированы на оптовиков с учетом лучших практик маркетплейсов в B2C.
Контент-менеджерам стало проще редактировать контент в админпанели. Можно развивать сайт, добавляя любые модули. Прошлая версия сайта поддерживалась на Bitrix, и ее доработка и поддержка упирались в ограничения.
Ключевые преимущества нового решения: Сайт стал более устойчивым, масштабируемым и поддерживаемым. Обеспечена гибкость в работе и быстрая адаптация к требованиям
Проект Groster демонстрирует, как грамотный подход к разработке B2B e-commerce решений может кардинально изменить бизнес-процессы компании и вывести ее на новый уровень эффективности. Современные технологии, продуманный UX и глубокая аналитика — основа успешного цифрового преобразования в сфере оптовой торговли.