Progressive Media и «Грат-Вест»‎: как персонализировать каталог и прайс-лист для B2B-проекта

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

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

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

• онлайн-обновление остатков;
• корректный адаптивный дизайн;
• удобный поиск по сайту;
• функционал личного кабинета и корзины.

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

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

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

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

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

Для упрощения работы с версткой был использован стайлгайд (руководство по стилю) — набор элементов и правил, позволяющий разрабатывать страницы и части дизайна в едином стиле. А также ввиду того, что проект объемный и сложный (190 фреймов), был использован компонентный дизайн. Его основой является разделение пользовательского интерфейса на более мелкие управляемые части (идентичность, элементы, компоненты, композиции, шаблоны и страницы).

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

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

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

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

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

При работе с корзиной стало возможным быстрое оформление заказов посредством загрузки в нее товаров из Excel-файла, при этом обеспечена стабильная работа корзины с 500 товарными позициями в ней. Также предусмотрено обратное действие: выгрузить список товаров из корзины с изображениями или без.

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

Для того чтобы в заказ не попали позиции, которых уже нет в наличии, реализована онлайн-синхронизация с 1С остатков и цен товаров в корзине.

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

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

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

Результатом сотрудничества стал реализованный высоконагруженный проект на Vue.js с 20000+ SKU и 150 свойствами товара. Сайт с современным дизайном и широким функционалом:

• персонализация каталога и цен для пользователя;
• выгрузка каталога, в том числе с примененными фильтрами в формате Excel;
• загрузка в корзину списка товаров в формате Excel, а также выгрузка из корзины;
• составления списка товаров и отправка их ссылкой, при открытии которой перемещение товаров в корзину личного кабинета пользователя;
• онлайн-синхронизация остатков и цен с 1С в корзине и каталоге;
• сервисные решения в личном кабинете клиента: запрос акта сверки, выгрузка документов, график платежей и уведомления о приближающемся/ просроченном платеже, план отгрузки, информация о привязанных юридических лицах клиента;
• система баннеров на титульной странице, адаптирующаяся под разное количество баннеров в группе;
• автоматическое формирование оформления блока подборок после обновления информации в 1С.