Beecolor

1. Вводная задача от заказчика, проблематика, цели

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

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Дизайн

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

3 типа товаров

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

Обмен с 1С и особенности каталога

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

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

Разные пользователи — разный каталог

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

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

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

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

Мощный фильтр

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

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

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

3. Результаты сотрудничества

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

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

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

Рекламации

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

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

Акции и подарки

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

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

• покупка товаров на определенную сумму,
• покупка определенного количества конкретного товара;
• покупка всех товаров, привязанных к условию.

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

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

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