B2B-портал для дистрибьютора экопосуды EcoCups

О клиенте

EcoCups — эксклюзивные дистрибьюторы экопосуды американского производства Stojo. Компания обратилась в Вебфлай после прочтения нашего кейса про личный кабинет и CRM для «Колибри Кофе». EcoCups тоже понадобился портал для b2b-торговли.

Основные оптовые продажи компания вела через запрещённую соцсеть НельзяГрам, а розничные — через Ozon и Wildberries. Но маркетплейсы не подходили для реализации больших партий товара, так как не позволяли дать скидку оптовым покупателям. 

Проблемы клиента

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

До сотрудничества с Вебфлай у EcoCups была копия официального сайта производителя, но без возможности оформления заказа, без автоматизации и с некорректной русификацией. Кроме того, копия американского сайта не позволяла продавать другие торговые марки и расширять ассортимент. Из-за этого EcoCups не могли масштабировать бизнес.

Поэтому компания работала по старинке: оптовый клиент запрашивал у EcoCups прайс, ему на e-mail отправляли каталог в Excel, покупатель отмечал количество нужных позиций и пересылал файл менеджеру, тот проверял остаток на складе и, если товар есть в наличии и заявка составлена без ошибок, то оформлял заказ, выписывал счёт и высылал клиенту. А если на складе изменился остаток товара или клиент допустил опечатку в заявке, то менеджер возвращал файл покупателю. И цепочка повторялась с начала. Из-за этого сделка могла растянуться на несколько часов, а то и дней.

Цели EcoCups

• Автоматизировать заказы для оптовых B2B-клиентов через личный кабинет.
• Освободить сотрудников от рутинной обработки заявок.
• Создать гибкий B2B-кабинет, в который можно самостоятельно добавлять разделы и позиции.
• В перспективе масштабировать бизнес и расширять ассортимент экопосуды.

Чем Вебфлай помогли

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

Проектирование и подготовка

Провели предпроектный анализ для разработки b2b-кабинета

Проанализировали каталог товаров и распределили ассортимент по разделам. Составили mind-карту, на основании которой собрали и визуализировали структуру будущего b2b-сайта.

Составили карту поведения клиента на сайте (Customer Jorney Map)

Разработали Customer Journey Map (CJM) — путь пользователя на портале. Продумали поведение 2 типов покупателей: нового, который пришёл на сайт впервые, и повторного, который уже приобретал товар.

CJM-карта позволяет понять, как человек ведёт себя на портале: сначала у него появляется потребность в покупке, потом происходит первый контакт с EcoCups, он регистрируется, выбирает товар, оформляет и оплачивает заказ, то есть совершает целевые действия.

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

Одна из задач CJM-карты предположить, что это за препятствия и придумать, как их устранить. Также CJM описывает, как вернуть на портал новых и вторичных клиентов. Например, одним напомнить о повторной покупке, другим — о неоплаченном товаре в корзине.

Создали интерактивный прототип b2b-кабинета

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

Подготовили техническое задание

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

Дизайн b2b-кабинета

Разработали дизайн-систему (U-kit) b2b-кабинета

Составили набор правил и рекомендаций по визуальному оформлению b2b-кабинета. Это цвета, шрифты, элементы интерфейса, а также правила вёрстки новых страниц (сетки, отступы). Этот документ нужен для создания дополнительных разделов по шаблону.

Выполнили дизайн b2b-кабинета

На основе прототипа выполнили дизайн внутренних страниц сайта для отображения на ПК и мобильных устройствах. Даже страницу с ошибкой оформили в общем стиле b2b-сайта.

Поменяли дизайн сайта

На этапе отрисовки дизайн-макета EcoCups провели внутренний ребрендинг и решили изменить цветовую гамму портала с голубых оттенков на зелёные.

Вебфлай выполнили пожелания заказчика за несколько часов. Сделали это за счёт правильно составленной дизайн-системы и работы с компонентами: шрифты, тона, и элементы зашиты в блоки интерфейса. И если поменять оттенок в одном элементе дизайна, то он поменяется на всём сайте.

Вёрстка b2b-кабинета

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

Программирование функционала b2b-сайта

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

Запрограммировали функционал b2b-сайта и интернет-магазина

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

Визуализировали скидку от объёма

У EcoCups 4 категории оптовых цен, в зависимости от количества позиций в заказе. Чтобы покупатель видел скидку от объёма, в каталог товаров и корзину мы внедрили шкалу, которая подсказывает, сколько ещё единиц добавить, чтобы скидка выросла. 

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

Настроили корзину, личный кабинет и процесс оформления заказа

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

Подключение внешних систем к b2b-кабинету

Синхронизация b2b-кабинета с 1С

Выполнили интеграцию b2b-портала с базой 1С: УНФ. Теперь выгрузка каталога или товаров, обмен ценами и остатками, загрузка заказов и обновление статусов между системами происходят автоматически в течение от 1 до 10 минут максимум.

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

Обучение заказчика работе с CMS-системой сайта

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