Как фронтенд-разработчики автоматизировали продажи сантехники с помощью конфигуратора и пяти самописных плагинов

Рассказываем, как команда AFFINAGE провела цифровую трансформацию производителя немецкой сантехники BLANCO и упростила жизнь его партнёрам. Что делают плагины, как система формирует заказ на всех CMS и какой рост продаж прогнозируют в компании.

В мае 2021 года мы начали работу над конфигуратором немецкого оборудования для кухни BLANCO. Перед нами стояло четыре задачи:

  • Разработать удобный интерфейс для покупателей продукции BLANCO.
  • Объединить разрозненную базу данных из прайс-листов, описаний товаров и картинок в одну базу данных.
  • Автоматизировать подбор кухонных комплектов с помощью сложного алгоритма подбора, таблиц совместимости, формул с десятками коэффициентов и единой базы данных.
  • Разработать техническое решение на базе Nuxt.js, Node.js и Strapi, благодаря которому можно оформить заказ на любом сайте партнёра независимо от CMS.

Со всеми этими задачами мы успешно справились, и вот как это было.

Разработчики AFFINAGE перевели наш офлайн-опыт в онлайн и автоматизировали процесс подбора оборудования для домашней кухни – то, в чем потребитель не хочет или не успевает разобраться во время ремонта. Теперь, чтобы подобрать комплект из мойки, смесителя, дозатора для жидкого мыла и мусорной системы по нужным параметрам, достаточно зайти на blanco.com или сайт одного из партнёров, и система сама предложит наилучшие варианты. Основная цель запуска конфигуратора – сделать работу с продукцией BLANCO проще и удобнее для конечных потребителей и профессиональных дизайнеров. По нашим оценкам, новый инструмент позволит увеличить продажи на 25% в течение одного года после запуска.

Екатерина Белова

,

Руководитель отдела маркетинга «ООО Бланко Рус»

#1 Анализируем рынок

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

Мы структурировали концепцию в Mind Map, сделали прототип в Miro и представили его клиенту. Вместе с руководителями Blanco определились, что должен делать конфигуратор:

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

#2 Формируем базу данных

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

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

Игорь Яковлев

, СЕО AFFINAGE

Мы сформировали единую базу данных из 1400+ товаров и написали парсеры, которые заполнили базу данных актуальными описаниями товаров, ценами, изображениями и спецификациями. База данных пополняется через административную панель Strapi. Такое техническое решение позволяет не привлекать технических специалистов для редактирования карточек товаров: интерфейс панели интуитивно понятен и не предполагает знаний основ программирования.

#3 Пишем плагины

Чтобы ускорить работу и масштабировать функциональность административной панели, мы разработали четыре плагина на React (спойлер: скоро мы расскажем все подробности разработки этих плагинов в статье на habr, следите за нашими новостями). Первый отвечает за импорт и экспорт всех товаров для быстрой модификации через Excel – с его помощью можно, к примеру, установить 20% скидку на все мойки в «Чёрную пятницу».

Второй плагин показывает пользователям готовые комплекты, собранные контент-менеджером. В готовые комплекты входят наиболее популярные позиции BLANCO или те товары, которые компании нужно продать быстрее из-за смены коллекции. Третий заливает таблицы совместимости – система подсказывает, подходит ли цвет дозатора к цвету смесителя, можно ли установить дозатор на мойку, подходит ли мусорная система с четырьмя контейнерами к мойке с шириной 45 см.

Четвёртый плагин помогает с простановкой координат на 3D-моделях. Дело в том, что у всех моек отверстия для монтажа смесителя и дозатора находятся в разных местах – посередине, слева или справа. Иногда смеситель и дозатор монтируют прямо в столешницу. Наш плагин проставляет подходящие координаты, по которым смеситель чётко встает в нужное отверстие, и пользователь видит картинку со своим комплектом из мойки, смесителя и дозатора. Мы уже пишем пятый плагин drag&drop, который поможет пользователю передвигать смеситель и дозатор по столешнице и получать точные координаты точек крепления.

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

#4 Разрабатываем конфигуратор для основных пользовательских сценариев

Самых популярных сценария на сайте BLANCO три: изучить продукцию компании, купить качественное немецкое оборудование и подобрать комплект по артикулам.

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

Показываем, что можно делать в конфигураторе

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

  • Какой стиль у вашей кухни?
  • Стоимость мойки и смесителя
  • Какой размер шкафа для установки мойки на вашей кухне?
  • Выберите вид монтажа вашей мойки
  • Выберите материал вашей мойки
  • Будете ли вы устанавливать смеситель с подключением фильтра для питьевой воды?
  • Должно ли быть у вашей мойки крыло?
  • Выберите тип фасада
  • Сколько контейнеров для мусорной системы вам необходимо?

Ещё один важный сегмент пользователей – профессиональные дизайнеры, которые помогают подбирать товар и уже знают, что именно предложить. Раньше они собирали комплекты и формировали коммерческое предложение в Excel – указывали артикулы с ценами и прописывали итоговую стоимость.

Мы разработали для них новый инструмент – страницу подбора по артикулам. На этой странице у дизайнера появились дополнительные возможности:

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

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

#5 Создаем 3D-модели

Чтобы пользователь мог лучше представить свою кухню, мы добавили в конфигуратор 3D-модели для 1400+ товаров.

У немецких коллег были исходники в 3DMax. Дизайнеры AFFINAGE адаптировали старые 3D-модели под новый конфигуратор и дорисовали недостающие — всего получилось 1400+ позиций. Сложнее всего было разрабатывать 3D-варианты фасадов: у дверок может быть разная ширина в зависимости от размера мойки, стиля кухни (современный, классика, неоклассика) и способа открытия фасада на кухне покупателя.

Также рассматривали визуализацию через WebGL (Web Graphics Library) — программную библиотеку для интерактивной графики, которая обеспечивает кроссбраузерность без использования плагинов, но отказались от этой идеи. Как правило, нашим пользователям не нужно вращать 3D-модели, чтобы представить готовый комплект на своей кухне, – для принятия решения о покупке достаточно одного ракурса. Мы проработали все возможные варианты и сделали конфигуратор легким для интеграции на сайты партнеров и удобным для пользователей.

Елизавета Казанцева

, Арт-директор AFFINAGE

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

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

#6 Автоматизируем работу конфигуратора для всех партнеров и CMS

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

После того как пользователь подобрал себе комплект, система автоматически формирует состав корзины и передаёт данные о товарах через интерфейс Window.postMessage(). Затем партнёр пишет код-обработчик, который формирует заказ в любой CMS. Фактически партнёры отслеживают новые заказы, которые передает конфигуратор, и на основе этих данных формируют заказ.

Дмитрий Балаев

,

Senior Frontend AFFINAGE

Итоги

Сразу после релиза мы установили 49 метрик на сайте для анализа поведения пользователей. По этим метрикам мы узнаем, какие товары самые популярные, на каких шагах пользователи «отваливаются» не доходя до оформления заказа и многое другое. Анализ данных позволит точечно формировать гипотезы по увеличению конверсии на каждом шаге и делать конфигуратор удобнее для пользователя и эффективнее для бизнеса.

Родительская немецкая компания по достоинству оценила проделанную работу российских коллег. Благодаря новому сайту у BLANCO появился инструмент для автоматизации бизнес-процессов и увеличения продаж. В дальнейших планах – масштабировать конфигуратор на другие страны присутствия BLANCO и улучшать работу сервиса с помощью веб-аналитики.

0
3 комментария
Stanislav Perfilov

Сделали конечно круто. Но я всегда считал, что бэк должен проверять, подходит тот или иной объект к другому. А если у вас будет 100 тыс. наименований, то фронт так же будет подбирать?

Ответить
Развернуть ветку
Affinage Digital
Автор

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

Ответить
Развернуть ветку
Stanislav Perfilov

Уфффф. Успокоили 😄

Ответить
Развернуть ветку
Читать все 3 комментария
null