Изображение предоставлено агентством Kotelov с сайта https://kotelov.com/
Плюс Личный кабинет с функционалом конструктора товаров. Кейс агентства KOTELOV о том, как это реализовали разработчики.
Заказчик проекта: УЮТ — один из крупнейших производителей солнцезащиты и декора окна в России и СНГ, предлагающий:
— Карнизы
— Рулонные шторы
— Горизонтальные и вертикальные жалюзи
— Шторы плиссе
— Продукция с электроприводом
Ориентация на B2B: работает через сеть дилеров.
Сложности разработки: многообразие дизайнерских товаров и модификаций, требующее тщательной проработки и управления ассортиментом.
Задачи проекта:
- Создать Личный кабинет:
— Пользователи могут оформлять заказы и управлять своими данными.
- Разработать Онлайн-конструктор товаров:
— Возможность пользователям настраивать и визуализировать товары в реальном времени.
- Автоматизация передачи заказов:
— Интеграция с производственной базой данных для автоматической передачи и обработки заказов.
Цель: минимизация времени обработки заказов и снижение человеческого фактора.
Решение
Ситуация до реализации проекта
Сложная интеграция производственной базы данных, использующей технологии 1980-1990-х годов, потребовала 25 лет разработки.
Отсутствие онлайн-заказов ограничивало возможность оформления, требуя отправки заявок только по электронной почте. Не существовало возможности собирать заказы в конструкторе и визуализировать конечный товар.
Менеджеры салонов тратили много времени на составление и согласование заказов. Сотрудники УЮТа обрабатывали сотни звонков и писем, что часто приводило к потерям информации, затягиванию сроков и усложнению процессов.
Проблема заключалась в том, что клиенты могли выбирать только из бумажного каталога, требующего постоянного обновления, а сайт не позволял менеджерам демонстрировать сочетания цветов и материалов.
Менеджерам приходилось звонить в УЮТ для проверки наличия конкретных цветов и тканей, при этом они не могли показать, как будут выглядеть цвета, отсутствующие в каталоге.
Необходимо было создать систему, позволяющую менеджеру открывать сайт с ассортиментом и демонстрировать клиенту комбинации любых расцветок и компонентов, находящихся в наличии.
Ситуация после реализации проекта
В пять раз быстрее для сотрудников
Ранее сотрудники УЮТа в приемке получали заявки от менеджеров салонов в виде звонков и писем, что требовало ручного ввода параметров заказа.
Сейчас они получают только письма с готовыми параметрами, автоматически создаваемыми в производственной базе данных. Скорость обработки заказов увеличилась минимум в 5 раз.
В пять раз быстрее для дилеров
Раньше менеджеры должны были звонить или вручную заполнять заявку в письме, тратя много времени на создание каждой заявки. При найме нового продавца ему необходимо было изучить ассортимент продукции по каталогу, вручную заполнять бланки заказа и отправлять их по e-mail, что приводило к временным затратам на обучение и ошибкам.
Теперь заказ собирается автоматически при выборе необходимых параметров. Вместо длительных заполнений все можно сделать в несколько кликов. Производительность менеджеров увеличилась в 5 раз, что позволяет салону обрабатывать больше заказов и улучшать качество и скорость обслуживания. Новые продавцы быстро осваиваются в системе и могут оперативно приступить к работе, не жертвуя качеством.
Вызовы проекта
Интеграция клиентской базы
Задача:
Интеграция со сложной базой данных, содержащей более 10 000 клиентов и огромное количество товаров.
Сложности:
Сопоставление полей и передача больших объемов данных. У каждой компании минимум 3 заполненных пункта информации, каждый из которых содержит 11 полей. Это создает значительный массив данных, требующий правильной сортировки и организации интеграции информации в нужные поля.
Реализация:
Частичная интеграция старой базы данных в новую. Интегратор создал прослойку, позволяющую извлекать информацию из старой базы и корректно интегрировать эти данные в новую.
Для автоматизации процесса разработан функционал, который подтягивает данные клиентов по уникальному ID из старой базы.
Текущий процесс:
Когда менеджер УЮТа хочет создать аккаунт действующего клиента в новой базе, достаточно найти его ID в старой базе, ввести его в новую и все данные автоматически подгружаются.
Результаты:
Частичная интеграция базы позволила значительно сократить затраты ресурсов, избежать дублирования клиентских данных и сохранить бизнес-процессы компании.
Интеграция производственной базы
Задача:
В УЮТе более 1 000 000 000 комбинаций готовых изделий. Необходимо реализовать сборку товара в режиме конструктора с корректной отправкой в производство. Формат маркетплейса с готовыми товарами для этого не подходит. Главной сложностью является работа со старой базой, где критична точность сопоставления полей и исходящих данных, иначе заказы будут отображаться некорректно.
Реализация:
Каждый модификатор при выборе привязывается к нужному полю в производственной базе данных. Во время создания заказа для каждого товара выполняется расчет, состоящий из 66 000 строк, так как каждый товар может иметь до 18 уникальных модификаторов. Все данные вносятся в производственную базу данных.
Процесс раньше:
Менеджер салона вручную заполнял бланк заказа, отправлял его по email, после чего заказ приходил в приемку. Сотрудник УЮТа вручную перенабирал заказ, и только после этого начиналось производство.
Текущий процесс:
Заказ автоматически формируется в производственную базу данных и сразу направляется на производство.
Разработка
Задача:
Переход от другой команды потребовал очистки кода и вникания в предыдущую работу. Необходимость переписать 70-80% бэкенда с нуля.
Процесс:
— Технологический стек:
Продолжили использовать Vue2, чтобы сохранить совместимость с дизайном, частично подготовленным заказчиком. Некоторые разделы были доработаны совместно с командой.
— Рефакторинг кода:
Проведен рефакторинг, удалено 4000 строк ненужного кода; написано 2500 строк нового кода. Устранены повторяющиеся строки и «костыли».
— Интеграция клиентской базы данных:
Информация по более чем 10 000 клиентам интегрирована в личный кабинет без дублирования данных.
— Связывание товаров:
Связали модификаторы товаров (300+) с товарами в базе данных УЮТа для корректной передачи данных в производственную базу.
— Автоматизация создания заказа:
Заказ в производственной базе УЮТа формируется автоматически, что позволяет немедленно начинать производство без лишних согласований.
Начало интеграции
Первый месяц:
Завершили 80 задач со стороны фронта, прежде чем перейти к интеграции. Основная задача заключалась в интеграции товаров, клиентских баз данных, адресов доставки, грузополучателей и онлайн-расчета цен.
Процесс интеграции:
- Изучение системы интеграции:
Первая задача заключалась в понимании системы интеграции, что значительно усложняло процесс.
- Интеграция товаров:
Связали все товары на фронте с их сущностями в производственной базе, что обеспечило корректную передачу данных.
- Вывод клиентских данных:
Реализовали отображение клиентских данных, адресов и грузополучателей в личном кабинете.
- Интеграция расчета цен:
Выполнили интеграцию расчета цен на товары в режиме реального времени, что обеспечило актуальность информации.
- Автоматизация создания заказов:
Реализовали автоматическое создание заказов в производственной базе данных УЮТа, что существенно упростило процесс.
- Создание раздела «Мои заказы»:
Добавили отображение всех заказов с возможностью детального просмотра каждого заказа.
Функционал конструкторов заказов
— Сборка картинки позиции заказа:
Каждая картинка позиции формируется конструктором и сохраняется в разделе «Мои заказы».
— Устойчивость к изменениям:
При удалении какой-либо позиции из линейки продуктов, картинка останется доступной и действующей для пользователя, который сформировал ее ранее. Это обеспечивает сохранность информации о заказах, независимо от изменений в доступных товарах.
Улучшение функционала отображения картинок товаров
Ранее:
— Картинка товара формировалась из позиций, доступных на сайте.
— При удалении одной из позиций, изображение ломалось и не отображалось, что создавало негативный опыт для клиента.
— Например, если заказ был сформирован полгода назад, клиент мог столкнуться с «поломанной» картинкой.
Теперь:
— Картинка формируется из уникальных ID товаров, интегрированных в базу данных.
— Сохранение выполняется в разделе «Мои заказы», что обеспечивает долговечность изображений.
— При выводе товара из линейки продуктов, картинка останется в личном кабинете клиента.
— Даже через год клиент сможет вернуться и увидеть сохраненную композицию; изображение будет корректно отображаться.
Это значительно улучшает пользовательский опыт и минимизирует вероятность разочарования.
Профиль пользователя
В профиль пользователя подтягиваются следующие данные:
— ID пользователя: Уникальный идентификатор.
— Логин: Используемый для входа в систему.
— ФИО: Полное имя пользователя.
— Данные о компании: Название и реквизиты компании.
— Адрес доставки: Полный адрес, используемый для доставки.
— Данные грузополучателя: Информация о лице, которому будет доставлен товар.
Эта информация обеспечивает возможность быстрого доступа к персональным данным и упрощает процесс оформления заказов.
Возможности личного кабинета пользователя
— Замена логотипа: Пользователь имеет возможность изменить логотип в шапке личного кабинета на собственный.
— Онлайн-конструктор:
— Дилеры могут собирать товары под брендом своего салона.
— Установка своих цен на товары.
— Возможность формирования заказа в присутствии клиента, что обеспечивает интерактивный и персонализированный процесс покупки.
Эти функции повышают уровень персонализации и улучшения взаимодействия с клиентами.
Админский кабинет
В админском кабинете доступны следующие функции:
— Настройка модификаций товаров:
— Добавление тканей: Возможность добавлять новые материалы для товаров.
— Новые цвета: Добавление цветовых вариантов для продукции.
— Изменение комплектации: Настройка комплектации товаров, позволяющая адаптировать предложения под различные потребности клиентов.
Эти функции обеспечивают гибкость и позволяют оперативно обновлять ассортимент в клиентской части конструктора.
Интеграция производственной базы данных и улучшения в системе
- Интеграция с производственной базой:
— Ранее: отсутствовала полноценная интеграция с клиентской базой, требовалось вручную заполнять данные при создании клиента.
— Настоящее время: профиль пользователя доработан с добавлением всех необходимых полей для хранения клиентских данных.
- Автоматическое подтягивание данных:
— При создании нового клиента все необходимые данные автоматически подтягиваются по его ID из производственной базы.
- Упрощение процесса формирования заказа:
— Дилеры теперь могут самостоятельно выбирать адрес доставки и грузополучателя при создании заказа.
— Поддержка нескольких адресов доставки и грузополучателей для одной компании-дилера.
— Шаблоны: один раз заполненные адреса и грузополучатели позволяют быстро организовывать логистику в несколько кликов.
Эти улучшения значительно повышают эффективность работы дилеров и упрощают процесс управления клиентскими данными и заказами.
Результат решения задач
