+7 (383) 363-50-86
Написать

Meesenburg

Разработка интернет-магазина для B2B-клиентов компании Meesenburg

Клиент

Компания Meesenburg имеет долгую историю, насчитывающую несколько веков. Основанное в 1758 году в немецком городе Фленсбург семейное предприятие со временем стало ведущим поставщиком фурнитуры для окон и дверей. Сегодня у Meesenburg есть 50 собственных офисов по всему миру, и она предлагает свою продукцию и услуги в 29 странах, в том числе и в России. Компания Meesenburg сегодня является одним из ведущих поставщиков фурнитуры и комплектующих для производства окон и дверей на российском рынке.

История проекта

Сотрудничество с российским филиалом компании Meesenburg началось в 2020 году, когда мы приступили к разработке интернет-магазина, ориентированного на B2C-сегмент, на CMS 1С-Битрикс. Активную работу над текущим проектом — интернет-магазином для B2B-клиентов, мы начали в 2022 году.

Цели и задачи

Клиент пришел с запросом на разработку B2B-портала, поскольку у него уже был интернет-магазин для B2C-сегмента. Но в ходе обсуждений и аналитики заказчиком было принято решение сделать один общий сайт, ориентированный как на физических, таки на юридических лиц.
Ранее продажа товара юридическим лицам осуществлялась только через менеджера, а поскольку B2B-сегмент является очень важным в специфике компании — было принято решение вести продажи также через интернет-магазин.

В итоге перед нами стояли следующие задачи:
  • Подготовка технического задания для сайта и 1С. Необходимо было описать все пожелания клиента, продумать взаимодействие сайта с 1С и другими сторонними сервисами, наложить существующие бизнес-процессы компании на новый сайт с учетом их отличий.
  • Разработка нового дизайна сайта на основе брендбука компании.
  • Разработка сайта и его запуск в эксплуатацию.

Процесс разработки

1
Подробная аналитика
Стартовали работу с написания технического задания. Провели большое количество встреч с клиентом за обсуждением его пожеланий. Наши аналитики детально продумывали и описывали отдельно каждую фичу, обсуждая и согласовывая с заказчиком детали на протяжении всего процесса разработки.
2
Новый дизайн сайта
Мудборд
Сначала нужно было обсудить с клиентом общую стилистику проекта. Для этого мы сделали мудборд, на котором разместили сайты схожей тематики, шрифты и цвета из брендбука клиента, иконки. Далее, на встрече обсудили это с клиентом — после этого появилось понимание, в каком стиле будем делать проект, и мы приступили работе.

Прототипы
После согласования мудборда приступили к разработке прототипов. На этом этапе мы продумывали логику взаимодействия пользователя, насколько понятны и удобны для него будут сценарии взаимодействия. Важно было сделать прототипы для целевых страниц: каталог, детальная страница товара, некоторые страницы личного кабинета и др. После разработки прототипов перешли к этапу дизайна.

Дизайн главной страницы
При разработке дизайна мы опирались на брендбук клиента и согласованный мудборд. Мы решили разнообразить цвета и шрифты из брендбука и добавили фоновые паттерны, а также создали стилистику баннеров с геометрическими фигурами и ярким акцентом.
На исходном сайте все баннеры были разной стилистики, поэтому мы сделали несколько шаблонов баннеров для разных акций, которые чаще всего бывают в интернет-магазине. Новые баннеры выглядят стильно и единообразно, а также отлично вписываются в стилистику сайта.
Диз главной_1.png Диз главнои_2.png
Диз главнои_3.png Диз главнои_4.png

Дизайн внутренних страниц
Поскольку этот проект из разряда сложного e-commerce, на внутренних страницах здесь очень много информации. При этом нельзя забывать, что интернет-магазин для B2B-клиентов должен быть в первую очередь простым и понятным, поэтому дизайн внутренних страниц было решено сделать сдержанным и с упором на продуманное пользовательское взаимодействие. В процессе работы мы кропотливо отрисовывали все состояния интерфейсов, которых здесь было немало.
диз_7.png
Так, только в истории заказов получилось 100+ макетов, поскольку в функционал были заложены три роли пользователей, для каждой из которых были предусмотрены разные статусы и разные действия.
диз_5.png диз_6.png
Кроме этого, в процессе оформления заказа клиент заложил возможность заказа на два адреса. Такое мало где встречается, поэтому мы провели тщательный ресерч, а после отрисовки макетов провели коридорные тесты.
Несмотря на то, что в B2B-сфере мало где можно проявить креатив в плане дизайна, всегда есть отдушина в виде страницы с ошибкой 404. Этот проект не стал исключением — мы добавили на 404-ую страницу грустного котика в окошке.

meesenburg_404.png
3
Микросервисная архитектура
В ходе проектирования было принято решение использовать микросервисную архитектуру для возможности дальнейшего масштабирования функционала и параллельной разработки разных фичей без сильного ущерба друг для друга. Еще одним важным преимуществом микросервисной архитектуры является ее высокая отказоустойчивость — неполадки в отдельных сервисах не мешают всему рабочему процессу.
4
Необходимые элементы для B2B-сегмента пользователей
В рамках проведенных работ было реализовано:
  • необходимые фичи для юридических лиц, такие как возможность создания пользовательских артикулов и рекламаций, оформление заказа по подписке, настройка отсрочки оформления заказа и его корректировка в период отсрочки;
  • процедура оформления заказа — для юридических лиц реализованы удобные способы оплаты, а также внедрены некоторые внутренние процессы, которые не видны пользователю;
  • возможность создания для одного пользователя нескольких контрагентов и переключения между ними.
Необходимые элементы для B2B_1.jpg   Необходимые элементы для B2B_2.jpg

Для решения этой задачи была реализована ролевая система, которая разграничивает доступ пользователя в зависимости от роли (авторизованный или неавторизованный) и типа авторизованного пользователя (ООО или ИП).



5
Ценообразование
Чтобы пользователь мог в реальном времени видеть актуальные цены, было принято решение перенести на сайт уже существующую в 1С логику. Этот непростой и трудоемкий процесс, поскольку необходимо было учесть довольно много нюансов, таких как валюты, скидки, типы цен и т.д.

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

Заказ по подписке
Данная функция позволяет B2B-клиентам автоматически создавать заказы на регулярной основе (ежедневно, еженедельно, ежемесячно и т.д.), что значительно сокращает время и усилия, затрачиваемые на размещение повторяющихся заказов.

Мы реализовали:
  • Оформление подписки на заказ. Клиенты могут выбрать заказы и настроить график повторения заказа, а также изменить или отменить подписку в любой момент.
отмена.png
  • Автоматизацию. Система автоматически создает и обрабатывает заказы в соответствии с установленным графиком подписки.
  • Уведомления. Клиенты получают уведомления о предстоящих заказах, изменениях в графике или продуктах.

заказ.png

Калькулятор комплектующих
Данная функция позволяет клиентам самостоятельно и точно рассчитывать потребности в комплектующих и получать “готовый комплекты”. Автоматизация расчетов значительно ускоряет процесс подготовки заказов и уменьшает риск “человеческих ошибок”, сокращает возвраты.

калькулятор.png

Мы реализовали:
  1. Интуитивный интерфейс. Удобная и простая форма для ввода параметров и характеристик.
  2. Автоматические расчеты. Система автоматически рассчитывает необходимое количество и тип комплектующих, учитывая введенные параметры.
  3. Рекомендации. Функция предлагает оптимальные варианты и аналоги комплектующих из каталога.
  4. Интеграция с корзиной. Быстрое добавление рассчитанных комплектов в корзину для оформления заказа.
  5. Гибкость и настройка. Клиенты могут изменять параметры и получать обновленные расчеты в реальном времени.
Автоматическое сопоставление пользовательских артикулов с артикулами сайта
Этот функционал был реализован специально для B2B-сегмента, поскольку закупка большими сметами, которые могут долго не меняться, свойственна именно для юридических лиц.
Чтобы было удобно, мы реализовали возможность для каждого пользователя сопоставить его сметные артикулы с актуальными на сайте. Это значительно экономит время, ведь больше не нужно каждый раз переделывать сметы с актуальными артикулами — пользователю достаточно загрузить файл со своей сметой, а система автоматически произведет сопоставление с артикулами сайта и выдаст соответствующие товары для добавления в корзину.

Сам функционал создания пользовательских артикулов уже был реализован в 1С клиента, перед нами стояла задача внедрить его на сайт — сделать удобный интерфейс для пользователя, интегрировать с 1С и реализовать механику подбора товаров по пользовательским артикулам.
Автоматическое сопоставление_1.jpg
 
Автоматическое сопоставление_2.jpg Автоматическое сопоставление_3.jpg

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

Результат

Разработан крупный современный интернет-магазин, ориентированный на B2B-сегмент пользователей. На текущий момент проект находится на этапе ввода в эксплуатацию. Благодаря нашей командной работе, В2В-клиенты компании “Меезенбург” смогут оформлять заказы через сайт быстро, удобно и без мучительного сопоставления сметных артикулов с актуальными на сайте.
Мария Батракова
менеджер проекта
Проект большой, сложный и именно этим интересен. Лично для меня, наиболее трудным был этап продумывания интеграции с 1С, т.к. было много споров, обсуждений предложений по поводу того, как наложить существующие процессы 1С на новый сайт. Клиент был очень вовлечен в процесс — это круто. Мы проводили совместные встречи, где удавалось решить все спорные моменты в логике, искали решение вместе с Александром Макаревичем (технический директор ООО “Меезенбург”). Хочется сказать, что проект был сложным и с множеством вызовов для нас, но совместными усилиями мы это сделали.

Команда проекта

  • Менеджер
  • Web-аналитик
  • Аналитик 1С
  • Дизайнер
  • Backend Team lead и разработчики — 3 специалиста
  • Frontend разработчики — 2 специалиста
  • 1С разработчик
  • QA-инженер
Александр Макаревич
технический директор ООО “Меезенбург”
Это уже наш второй проект с Digital Clouds: первый мы делали еще в 2020-2021 году и уже тогда мы поняли то, что работаем с профессионалами в своем деле. Начальная концепция сайта была B2B, но в процессе написания ТЗ мы поняли, что хотим объединить B2B и B2C в одном сайте. Конечно такое решение технически оказалось более сложным, чем запуск обычного B2B сайта. В процессе разработки были изменения в логике тех или иных модулей, сервисов. Но при этом, обсуждая каждое из изменений с командой разработчиков, мы всегда находили компромисс. Итоговый результат ровно такой, на который мы изначально рассчитывали. Сайт постепенно обретает новых клиентов и мы будем продолжать сотрудничество с командой Digital Clouds.