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

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

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

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

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

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

Была структурирована концепция в Mind Map, сделан прототип в Miro и представлен клиенту.

Blanco определились, что должен делать конфигуратор:

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

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

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


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

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

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

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

#4 Разрабатываем конфигуратор

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


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

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

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

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

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

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

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

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

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

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

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

С 2018 разрабатывают админки с нуля, переводят продукты на новый стек, настраивают сложные интеграции и выстраивают digital-стратегии. Всё это для банков, e-commerce-проектов, платформ онлайн-образования, систем документооборота.