Разработка личного кабинета покупателя для b2b-компании

Клиент обратился к нашей компании с запросом на разработку личного кабинета для своих покупателей (b2b-сегмент) – с целью повышения качества обслуживания и оптимизации внутренних процессов.

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

Основные задачи проекта включали:

Также по итогу обсуждения с клиентом было принято решение двигаться по проекту по гибридной модели разработки: вся предварительная работа по проекту (сбор требований, обсуждения, аналитика, базовое проектирование, написание ТЗ и пр.) делается по поступательно каскадной модели ("водопад"), а собственно реализация – относительно небольшими agile-циклами:

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

Как и положено на проектах такого уровня, перед написанием ТЗ была проведена серия встреч между нашей командой и рабочей группой со стороны заказчика, чтобы прояснить все требования и взаимодействующие системы. Мы пытались прояснить:

Итоги этой аналитики мы структурировали в виде иерархической декомпозиции задач, сопровождающейся дополнительными наглядными материалами (рисунками, таблицами, диаграммами), улучшающими восприятие и понимание происходящих процессов.

Например, вот так выглядела диаграмма, проясняющая предстоящее взаимодействие четырёх систем (сайт личного кабинета, Битрикс24 и две 1С-ки):

Также на этом этапе был подготовлен вот такой макет карточки заказа (это именно макет, а не дизайн):

А рабочая таблица по назначению статусов отгрузкам в личном кабинете была составлена примерно следующим образом:

Вся эта и другая собранная информация легла в основу написания технического задания. Как мы уже упоминали, описанная в нём функциональность была разделена на 12 последовательных частей – релизов. После каждого из них рабочая группа со стороны заказчика могла увидеть некий прирост в работе над проектом и дать по нему обратную связь. Этот вариант удобен для всех: клиент видит, что работа по проекту идёт и что про него не забыли; мы же оперативно корректируем траекторию выполнения, если что-то не так (чтобы к концу проекта не выяснилось, что пришли совсем не туда).

Одним из важных этапов проекта была отрисовка полностью кастомного дизайна. Цель заключалась в создании интуитивного, эстетически привлекательного интерфейса, который соответствовал бы корпоративному стилю клиента и улучшал взаимодействие пользователей с платформой.

При этом дизайн должен был соответствовать общей канве как бренбука компании, так и уже имеющемуся корпоративном сайту.

Вот несколько отрисованных страниц для примера:

Совмещённая страница товаров и корзины:

Страница оформления заказа с разбиением на желаемые отгрузки:

История заказов со статусами:

Чтобы сделать интерфейс сайта максимально дружественным в плане взаимодействия с будущим пользователем, мы выбрали вариант интеграции этого дизайна в шаблон сайта с помощью frontend-фреймворка Vue.js (это добавило интерфейсу реактивности, адаптивности и производительности).

1) Формирование личного кабинета прямо из Битрикс24:

Менеджеру достаточно в карточке компании Битрикс24 отметить её соответствующим "флажком" – личный кабинет для этой компании будет создан в полностью автоматическом режиме: из 1С "затянется" вся история заказов этой компании, все данные для оформления новых заказов (доступные к заказу товары, адреса прошлых доставок и ж/д-станций, грузополучатели и пр.), а логин и пароль от созданного кабинета будут высланы клиенту прямо на электронную почту:

2) Покупатель имеет возможность при оформлении заказа разбить любую позицию на желаемые отгрузки (по дате и количеству/весу):

При этом (для удобства) ему в колонке "остаток" выводятся ещё не распределённые по отгрузкам тонны.

Все эти отгрузки будут переданы в 1С в заказ клиента.

3) Свои самостоятельные статусы как для позиций заказа, так и заказа в целом:

4) Центр уведомлений: оперативные оповещение по изменениям в заказах

Покупатель получает все уведомления как через "колокольчик" в личном кабинете, так и на электронную почту (об изменениях статусов в заказах, об утверждении заявок и т.д.):

5) Копирование заказов

Так как покупатели часто заказывают однотипную продукцию, то для их удобства был реализован функционал повторения (копирования) заказов – включая уже произведённое ранее разбиение на отгрузки. Это экономит их время и снижает вероятность ошибок.

6) Автозаполнение заказа клиента в 1С

Заказ клиента, автоматически создаваемый в 1С на основе данных из оформленного в личном кабинете заказа, заполняется не только данными из личного кабинета, но и данными из похожих заказов в 1С.

Одной из ключевых задач проекта была интеграция личного кабинета с CRM-системой Битрикс24 и 1С ERP. Это позволило автоматизировать процесс обработки заказов и заявок, улучшить эффективность и точность бизнес-процессов клиента.

Основные этапы интеграции включали:

1) Разработка механизмов двустороннего обмена между Битрикс24 и 1С:ERP

В Битрикс24 был разработан отдельный кастомный модуль, который позволял обмениваться с 1С такими данными, как компании с их реквизитами, контакты, сделки с товарами, номенклатура каталога товаров, реализации товаров и услуг, товарно-транспортные накладные (ТТН), а также дополнительными данными (не стандартными для 1С – заявки экспедитору, отгрузки по вагонам и пр.)

2) Разработка механизмов двустороннего обмена между Битрикс24 и сайтом личного кабинета покупателя

Для этих целей в Битрикс24 было разработано и зарегистрировано локальное приложение "Обмен с ЛК", которое позволяло сайту личного кабинета обмениваться с Битрикс24 средствами REST API.

При этом данные, поступающие из 1С в Битрикс24, обогащались там доп. данными, которые есть только в Битрикс24 и отсутствуют в 1С, и уже эти обогащённые данные передавались на сайт личного кабинета.

Важным условием интеграции было также то, что сайт личного кабинета получал только те данные, которые на нём востребованы, и ему запрещено было загружать другие данные. Система обмена была устроена таким образом, что на сайт личного кабинета из 1С посредством Битрикс24 агрегировались, отбирались и отправлялись данные только по тем покупателям, которые на нём зарегистрированы.

3) Вычисление на сайте личного кабинета новых статусов отгрузок и заказов (на основе описанных условий присвоения тех или иных статусов)

По каждому заказу покупателя в 1С происходит ряд действий и создаётся множество разных объектов: заказ регистрируется в плане производства, проходит процедуру подтверждения дат отгрузок, создаётся заявка экспедитору, в ней назначается плановая дата прибытия, затем появляется информация о фактической дате прибытия, создаётся реализация, а по ней – товарно-транспортная накладная и т.д. В зависимости от наступления тех или иных событий, а также появления в системе определённых данных (фактическая дата прибытия, например), на сайте личного кабинета должно происходить обновление статуса связанной с этими событиями отгрузки и заказа в целом.

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

На данном этапе проверялись отдельные компоненты системы на предмет их корректной работы. Для каждого модуля (например, страницы оформления заказа, истории заказов, уведомлений и т.д.) разрабатывались тестовые сценарии, которые покрывали основные функциональные и нефункциональные требования. Тестирование включало: проверку логики бизнес-процессов; тестирование валидности данных; тестирование интерфейсов модулей и их взаимодействия с другими компонентами системы.

Этот этап был направлен на проверку взаимодействия различных модулей между собой и с внешними системами, такими как CRM-система Битрикс24 и ERP-система 1С. Основные задачи: проверка корректности обмена данными между ЛК и Битрикс24 через REST API; тестирование сценариев обработки заказов и заявок в 1С; проверка целостности данных при импорте/экспорте файлов.

На стадии системного тестирования проверялась работа всей системы в целом. Этот этап включал: функциональное тестирование всех основных и дополнительных функций личного кабинета; оценку производительности системы для различного количества пользователей; тестирование на предмет отказоустойчивости и восстановление после сбоев; проверка безопасности системы, включая тестирование уязвимостей и оценку защиты данных пользователей (мы устанавливаем дополнительную защиту для b2b-кабинетов в виде Web Application Firewall, который отражает потенциальные вредоносные атаки).

Этот этап включал проверку системы заказчиком и конечными пользователями на соответствие бизнес-требованиям и ожиданиям. Приёмочное тестирование проводилось в несколько итераций, каждая из которых завершалась получением обратной связи и внесением необходимых коррективов. Основные задачи: проверка соответствия функциональности системы утверждённым требованиям; тестирование пользовательского интерфейса и удобства использования; оценка готовности системы к эксплуатации и проверка выполнения всех критериев приёмки.

По результатам проведённого тестирования система имела хорошие показатели по всем ключевым параметрам:

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

Завершение проекта можно считать успешным – поставленные задачи были решены. Основные достижения включают:

Оглядываясь назад, можно с уверенностью сказать, что критически важными факторами для реализации данного проекта (как и многих других) стали тщательная аналитика и структурированный подход к начальной декомпозиции задач. На всех этапах проекта — от сбора требований и планирования до разработки и тестирования — наша команда уделяла особое внимание деталям и проясняла все спорные моменты.

Если вашему бизнесу необходим личный кабинет для b2b-сегмента или аналогичное решение, мы готовы предложить свои услуги. Наш опыт и компетенции в области аналитики, проектирования и разработки могут оказаться полезными для вашего проекта. Мы с радостью поможем вам оптимизировать внутренние процессы и, в конечном счёте, сделать жизнь ваших покупателей чуточку лучше.