Разработка B2B интернет-магазина на Oberton

Привет, это Creonit / digital production. С 2015 года разрабатываем цифровые продукты для бизнеса. Рассказываем, как перевели клиентов заказчика в онлайн и снизили нагрузку на менеджеров продаж.

О клиенте

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

Проблемы

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

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

Заказчик хотел быстро запустить новый интернет-магазин.

Задача

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

Решение

Для быстрого запуска интернет-магазина предложили использовать нашу платформу для low-code разработки Oberton. С её помощью можно создать веб-сервис для бизнеса за ~2 месяца без учёта интеграций.

Что такое Oberton 

Oberton — платформа для low-code разработки. He SaaS, не no-code, не коробочное решение.

Инструмент позволяет исключить этапы дизайна и frontend-разработки. За счёт этого уменьшаем сроки запуска и потерю контекста внутри команды при передаче с этапа на этап.

Разработку ведёт один python-специалист, для запуска проекта не нужны дизайнер и фронтендер. Это уменьшает фонд оплаты труда команды и стоимость запуска продукта. 

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

Демо-стенд

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

Панель администрирования

В административной панели сделали 4 модуля: 

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

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

Модуль "Пользователи"

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

Так выглядит добавление нового пользователя

На случай, если администраторов будет много, их можно фильтровать по email, имени и группе.

Модуль "Каталог"

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

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

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

Страница поделена на блоки, которые можно редактировать по частям

Модуль "Клиенты"

Реализовали в виде списка с нумерацией. Количество клиентов на одной странице можно редактировать, например, показывать 500 вместо 10. 

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

Модуль "Заказы"

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

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

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

Интерфейс для покупателя

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

Для демо-презентации мы разработали два модуля: каталог и заказы.

Модуль "Каталог"

Лучшая практика для B2B-магазинов — показывать товары в виде листинга. Без большого и сложного каталога, где нужно искать нужные категории и подкатегории. Настроить нужный раздел можно с помощью тегов над товарами. При нажатии на категорию список товаров сразу обновляется.

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

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

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

Корзина

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

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

Есть модуль заказов, где клиент сможет проверить свои прошлые покупки. 

Итого

Oberton позволил быстро запустить интернет-магазин, а демо-версия, которую мы показали на раннем этапе, — принять решение о выборе подрядчика. 

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