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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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