Какие секреты хранит e-commerce поставщика профессиональной косметики для b2b и b2c клиентов
Интернет-магазин для Beecolor
Сибирикс

Интернет-магазин для Beecolor

Какие секреты хранит e-commerce поставщика профессиональной косметики для b2b и b2c клиентов

Интернет-магазин для Beecolor

Какие секреты хранит e-commerce поставщика профессиональной косметики для b2b и b2c клиентов
На вид — обычный e-commerce, внутри — космический корабль. Именно таким получился проект со сложнейшей бизнес-логикой, огромной номенклатурой товаров, разными типами пользователей и двумя личными кабинетами, который мы создали для Beecolor.
  • Beecolor — крупнейший за Уралом поставщик профессиональной косметики для салонов красоты и розничных покупателей, который работает на рынке уже 28 лет.

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

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

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

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

Анна
Коммерческий директор
—  У заказчика уже был недоделанный проект от другой, более дешевой, команды. Механизм акций ей реализовать не удалось. Изначально заказчик пришел к нам с запросом доработать уже имеющийся сайт.

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

В итоге имеющийся сайт получилось использовать только в качестве отправной точки на этапе аналитики.

Владимир
CEO&Founder
— На этом проекте клиент очень переживал за правильный выбор руководителя проекта. Чувствовалось, что обожглись раньше. Бывает.

На старте было много вопросов. Справится ли база с этой бизнес-логикой? Хватит ли Elastic Search? Придется ли писать что-то на языке PainLess — особого языка на основе урезанной JAVA, специально для поисковой машины Elastic (кстати, painless переводится как «меньше боли», но по факту ее — не меньше)? Оказалось, что придется.

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

Полина
Руководитель проекта
—  Перед нами стояло три ключевых задачи: автоматизировать бизнес-процесс (а он достаточно сложный), создать цифровое рабочее место для торговых представителей и учесть интересы новой целевой аудитории — B2C-пользователей.

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

Дизайн

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

Полина
Руководитель проекта
— У заказчика на старте проекта уже был сайт, но этот опыт он считал не слишком удачным. Плюс в том, что на старом сайте был выгружен полный каталог, поэтому мы могли делать макеты на основе реального контента. Приемки были требовательными со стороны заказчика, но это здорово: так мы смогли понять, откуда берется каждая сущность на каждой странице вплоть до пикселя.

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

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

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

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

Полина
Руководитель проекта
— На этом проекте случился тот самый мэтч со специалистом 1С на стороне заказчика. Нам попался очень грамотный, думающий человек с желанием сделать всё по красоте!

Дмитрий
Разработчик
—  Чаще всего на проектах обмены происходят через XML-файлы — их основная проблема в том, что процесс обмена не такой быстрый: файл XML получается огромный, при возникновении ошибок его приходится перевыгружать, а это может занять много времени. Плюс часто непонятно, сколько ждать окончания загрузки на сайт. Но далеко не все заказчики готовы отказаться от этого формата обмена данными.

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

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

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

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

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

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

Евгений
Разработчик
—  По факту, конечно, каталог всегда один — разница только в доступах к товарам и SKU.

На сайте есть три типа пользователей: b2c, b2b, manager. Доступами к товарам, SKU и разделам каталога рулит 1С — их можно задавать как угодно: как отдельным типам пользователей (например, только торговому представителю), так и нескольким (например, торговому и его клиентам, но не b2c).

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

Дмитрий
Разработчик
— Интересности добавляют склады: помимо того, что один склад может быть доступен сразу в нескольких регионах, еще и не каждый склад бывает доступен всем типам пользователей. Скажем, алтайский склад доступен только для b2b-клиентов, а вот b2с — уже нет. И это тоже было важно учесть.

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

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

Что умеет фильтр:

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

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

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

Евгений
Разработчик
— Чтобы легко ориентироваться среди сотен оттенков одного и того же товара, фильтр из каталога сохраняется и при переходе на детальную страницу товара: она наследует SKU, соответствующие параметру фильтрации. При желании параметры фильтрации можно скорректировать прямо здесь, не возвращаясь в каталог.

Блок «Предупреждения»

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

Для таких случаев мы предусмотрели в админ-панели раздел «Предупреждения», где выводится список всех таких товаров. Они всё равно показываются в каталоге на сайте, но благодаря такой группировке упрощается работа контент-менеджера — он сразу видит, что ему нужно отредактировать.

Личный кабинет торгового представителя

В личном кабинете менеджера Beecolor мы собрали всё нужное для работы — теперь ему не нужно оформлять заказы через мессенджеры и тратить сотни минут на выбор товаров из каталога, а также хранить данные по клиентам где-то в табличке, сделанной на коленке — всё под рукой:

Список клиентов

Отдельная вкладка в личном кабинете, где хранится вся информация по каждому контрагенту:

  • адрес — от него зависит отображаемый ассортимент в каталоге;
  • основная информация по контрагенту (наименование, реквизиты, контакты);
  • задолженность — многие b2b-клиенты работают с торговыми представителями по договорам с отсрочкой платежей;
  • доступный кредитный лимит — та самая отсрочка платежей и её объем;
  • бренды, на которые законтрактован клиент — у каждого свой индивидуальный набор брендов;
  • незавершенная корзина — менеджер может предварительно собрать заказ, не оформлять его сразу, а переключиться на другого клиента. Позже благодаря незавершенной корзине он сможет вернуться.

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

Дмитрий
Разработчик
—  Торговый представитель через свой ЛК может зайти под контрагентом, у которого заключен договор с конкретным брендом и оформить заказ на этого контрагента. Благодаря этому менеджер Beecolor может видеть каталог глазами своего клиента: доступные товары и SKU, цены и остатки.

Фишка в том, что менеджер видит больше позиций каталога, чем обычный контрагент (доступные подарочные позиции —фартуки, пробники и т. д.) и может добавлять бонусы к заказу. В итоге оформленный заказ появляется и в личном кабинете менеджера Beecolor, и в личном кабинете его клиента — и им обоим удобно его отслеживать.

Дашборд торгового представителя

Чтобы торговому представителю было легче анализировать свои продажи, мы предусмотрели дашборд со статистикой:

  • отчет по продажам, включая план продаж;
  • отчет по новым клиентам;
  • дебиторскую задолженность по клиентам;
  • задачи (например, руководство Beecolor может ставить задачу продать неликвиды или привлечь конкретное число клиентов).

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

Бонусы к заказам

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

В 1С для таких товаров есть отдельный склад, доступ к которому имеют пользователи определенного типа. Разным торговым представителям доступны разные товары с этого склада.

Для таких товаров в личном кабинете есть свой раздел с отдельным каталогом — торговый представитель выбирает в нем нужное и добавляет в корзину. Оформляются такие бонусы без выбора доставки и оплаты — в 1С они просто присоединяются к последнему созданному заказу для конкретного клиента.

История заказов

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

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

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

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

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

Рекламации

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

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

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

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

Полина
Руководитель проекта
— После заполнения решения менеджер жмет специальную кнопку «Отправить решение в 1С» — и только тогда рекламация со всеми данными улетает в 1С. Это сделано намеренно, чтобы при первичном создании рекламации лишний раз не нагружать систему.

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


Полина
Руководитель проекта
— Весь бизнес клиента строится на акциях: чаще всего товары B2B-сегмента приобретаются по акциям от производителей. Например, Loreal дает Beecolor акцию для реализации: «Купи 20 красителей линейки Absolut Repair и получи в подарок окислитель». Механизм акций очень важен в цепочке продаж. Нам важно было и продумать интерфейс, и автоматизировать приобретение товаров по акциям, и не запутать пользователей.
Механизм акций — настолько непростой и многошаговый, что мы вынесли их в отдельный раздел. У каждой акции — своя страница, которая работает как отдельный каталог и как отдельная корзина, не связанная с основной корзиной на сайте.

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

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

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

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

Она помогла нам разобрать процесс проверки на понятные шаги. Например, сначала мы проверяем доступность всей акции целиком: соответствуют ли числа проведения акции текущей дате, не израсходован ли максимальный лимит использования акции для покупателя, доступна ли акция пользователю в принципе. После этого шага — проверяем доступность товаров в условиях и подарках. И так далее, пока не будут соблюдены все условия.

Главной задачей на этом этапе была скорость — чтобы клиенту при переходе в раздел «Акции» показывался актуальный список доступных акций уже после всех проверок.

Дмитрий
Разработчик
—  Самая сложная часть в акциях — это проверки: там их целое дерево.

В акции есть условия и подарки. И, например, надо проверить условие типа «купи товаров на сумму 5000 руб.» для конкретного пользователя на доступность выполнения.

Сайт проходится по всем товарам акции, считает, сколько конкретного товара осталось на всех доступных складах текущего региона текущему пользователю, умножает это число на цену товара для текущего пользователя, складывает эти числа по всем товарам. И если сумма оказалась больше 5000, то клиент сможет выполнить условие — а значит, оно доступно. Если нет, акция будет недоступна вовсе. И так многошагово проверяется каждое условие каждой акции.

В подарках по акции — такая же логика, а еще там есть акционные товары, которые доступны только в акции и нигде больше. Плюс есть ограничение по количеству раз — каждый подарок можно получить не больше какого-то количества раз. А ведь бывает, что все товары уже купили, и тогда акция должна скрываться. И это — далеко не все условия.
Фрагмент схемы с логикой акций
Чтобы не порушить взаимосвязи между условиями акций и подарков, мы сделали так, что в итоговой корзине нельзя поменять количество акционных товаров. Но возможность редактирования оставили: пользователь может вернуться на страницу акции и там внести изменения. Сайт заново всё пошагово проверит, и при удачном исходе обновленный набор товаров по акции можно будет добавить в общую корзину.

О проекте и планах


Полина
Руководитель проекта
— Я искренне восхищаюсь бизнес-логикой клиента и просто в шоке, что они автоматизируют настолько сложный бизнес-процесс.

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

Также в ближайших планах — функционал маркетплейса :)