Разработка решения по выбору промышленных агрегатов на сайт для российской компании
Цифровые технологии в промышленности решают широкий ряд задач, согласно данным The Boston Consulting Group (BCG), помогают на 97% точнее спрогнозировать цены, повысить на 30–50% производительность служб доставки и снабжения, на 30% снизить накладные расходы.
Клиенты
Наш партнер поставил перед собой цель повысить качество и скорость обслуживания клиентов. Для этого в числе прочих мер нужно было упростить рабочие процессы менеджеров по продажам. В частности – создать удобную форму для подбора конфигурации оборудования, а на основе результатов подбора автоматически формировать коммерческое предложение.
Решение
Мы разделили работу на несколько этапов.
Аналитика.Наши специалисты выявили технические требования к конфигуратору и его бизнес-логику, отрисовали прототипы страниц. Опираясь на полученные данные, подробно описали процессы переноса данных из 1С в форму подбора оборудования, а также формирование коммерческого предложения. Результатом стало подробное техническое задание на разработку.
Дизайн. На основе цветовой гаммы сайта заказчика мы разработали новый UI-kit — набор компонентов интерфейса. В его состав вошли текстовые стили, инпуты — поля ввода информации, кнопки, второстепенные цвета и т.д. Для отдельных элементов подобрали анимацию, для других — зарисовали состояния:
- при ховере — наведении,
- при выделении,
- неактивное состояние
В тесном сотрудничестве с заказчиком мы продумали UX-дизайн таким образом, чтобы сделать работу с продуктом быстрее – в частности, использовали формы с «бегунком» вместо выпадающих списков.
Также мы сделали процесс выбора оборудования пошаговым, чтобы пользователь мог понять, на каком этапе он сейчас находится и сколько еще осталось до полного оформления коммерческого предложения. Подобрали наиболее удобный вариант для каждой формы:
- с выпадающим списком;
- чек-боксами для выбора нескольких опций из списка;
- радиобаттонами для выбора только одной опции из списка.
Особое внимание уделили расположению и размеру изображений, сочетанию текста с ними.
Разработка. Мы реализовали логику передачи данных из 1С на фронт через бэк. Для разработки первого выбрали Vue.js, для второго — PHP на фреймворке Laravel. Этот стек широко распространен — а значит, у заказчика не будет трудностей с поддержкой и подключением новых специалистов. Решение выполнено на iFrame, чтобы клиент смог в будущем самостоятельно встраивать его на один из своих сайтов.
Результат
Чтобы пользователю было легче ориентироваться в моделях промышленных агрегатов, мы привязали к ним подсказки с данными из 1С. Благодаря созданной форме составление коммерческого предложения стало понятным единым процессом, разделенным на 5 шагов:
- Выбор продукции.
- Выбор параметров.
- Выбор дополнительного оборудования.
- Подтверждение.
- Непосредственно оформление коммерческого предложения.
После завершения последнего этапа больше не требуется участие менеджеров, так как документ создается автоматически на основании выбора пользователя. Его можно скачать по сгенерированной ссылке или получить по электронной почте.
Технологии
PHP, Laravel, Vue.js, iframe, 1С