Beecolor

Beecolor — крупнейший за Уралом поставщик профессиональной косметики для салонов красоты и розничных покупателей, который работает на рынке уже 28 лет.

Особенности проекта на старте

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

— Неудобный процесс оформления заказов, сложившийся в компании: раньше клиентам приходилось отправлять список товаров торговому представителю в мессенджере, чтобы тот сделал заказ через 1С. У каждого торгового представителя по 50−70 клиентов, которые регулярно делают заказы. Плюс есть возвраты, претензии и брак, постоплаты. В итоге работе торгового представителя не позавидуешь. Поэтому нужен удобный функционал внутри сайта, который упростит процесс заказа и ускорит работу сотрудников Beecolor.

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

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

На вид — обычный e-commerce, внутри — космический корабль. Именно таким получился проект со сложнейшей бизнес-логикой, огромной номенклатурой товаров, разными типами пользователей и двумя личными кабинетами, который мы создали для Beecolor.

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

В каталоге Beecolor есть красители с десятками оттенков и средства в разной фасовке — поэтому и товары в каталоге у нас трех типов: с маркировкой по объему, по оттенкам и все остальные (например, фены и салфетки, у которых нет таких свойств). Для пользователя первые две группы в каталоге отображаются по-разному.

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

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

На проекте мы учитывали интересы сразу трех групп пользователей: торговых представителей, их клиентов и потенциальных розничных покупателей. Для каждой группы своя роль на сайте. И самые интересные взаимоотношения у менеджеров Beecolor и их контрагентов — b2b-клиентов.

B2B-клиентом мы считаем пользователя, который заключил договор с Beecolor: согласно ему на конкретный адрес пользователя будут поставлять некоторые товары конкретных брендов. Из 1С на сайт поступают данные по каждому такому контрагенту: все его адреса, для каждого адреса — свой договор. Если есть хотя бы 1 договор (связка с контрагентом в 1C), пользователь уже считается B2B-клиентом. Если договора нет, то пользователь автоматически считается B2C.

На каждый договор с B2B-клиентом есть свой торговый представитель — на сайте его роль зовется Manager. У него свои склады и доступность по типу клиента: например, некоторые чашечки для краски или фартуки контрагент купить не может — но может получить в подарок к заказу за выполнение условий акции (акции — отдельная история, о них чуть позже).

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

Фильтр реализовали с помощью ElasticSearch. У товаров и SKU в каталоге заказчика могут быть разные свойства, но мы научили фильтр собирать все данные воедино, чтобы поиск для пользователя был удобным и быстрым.

Наш фильтр умеет:

— фильтровать по свойству товара, чтобы получить подходящие товары со всеми их SKU: например, у одного производителя красителей для волос есть 57 оттенков цветов — мы можем выбрать конкретный тон, и тогда в списке появится товар с этим номером;

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

— фильтровать по разделам (например, бренд или тип продукта): если поменять разделы в фильтре, поля фильтрации обновятся в соответствии с тем, какие свойства и значения есть у товаров в выбранных разделах;

— фильтровать товары по наличию: фильтр учитывает, какие склады доступны конкретному пользователю и какие там остатки товаров.

Личный кабинет B2B-клиента 

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

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

— Вкладка «Торговые представители». Здесь отображается список всех менеджеров-торговых представителей Beecolor, работающих с клиентом, их контакты и бренды, за которые они отвечают. Клиент может быть законтрактован на несколько брендов, а торговые представители также отвечают за разные бренды (например, один — за Loreal и Londa, другой за — Matrix и Babyliss). Поэтому ситуация, когда у клиента несколько торговых представителей — довольно частая.

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

— Дебиторская задолженность. Выводится доступный и израсходованный кредитный лимит по каждому договору. Исходя из этих данных клиенты могут планировать закупки на месяц.

Рекламации

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

— при выборе возврата денежных средств — данные банка для возврата клиенту;

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

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

На странице акции есть баннер с условиями акции и шаги для выполнения этих условий. Условия передаются из 1С и бывают разных типов:

— покупка товаров на определенную сумму,

— покупка определенного количества конкретного товара;

— покупка всех товаров, привязанных к условию.

Например, акция звучит так: «Купи товаров бренда Sergio Professional на 3000 рублей и получи маску в подарок». Чтобы выполнить условия, пользователь складывает товары бренда на нужную сумму в корзину акции — индикатор показывает, сколько осталось до выполнения условия. Как только товаров набралось на сумму больше, чем 3000, пользователю становится доступна маска в подарок.

Подарки также управляются через 1С и бывают в виде конкретных товаров (как в случае с маской) или в виде скидок на перечень товаров по условиям акции (например, скидка 30% на товары одной линейки в корзине).

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

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

Полный кейс: https://blog.sibirix.ru/beecolor/