Есть мнение, что редизайн интернет-магазина — это история про «освежить главную и поменять шрифты». На практике все немного интереснее: за внешним обновлением почти всегда скрыт вопрос, дотянет ли бизнес со своей текущей архитектурой до следующего финансового года без потери клиентов. Привет, я — Александр Кузьмин, менеджер проектов в Morizo, расскажу на примере В2В-поставщика бытовой техники, хозтоваров и посуды с оборотом более 1,5 млрд рублей в год, почему дизайн и архитектура в опте не работают как в В2С, а даже наоборот – могут принести убытки.
Немного предыстории: как вырастить технический долг
Проект достался Morizo на техническую поддержку от другого подрядчика ещё в 2014 году. Архитектура была нестандартной с самого начала, и десять лет команда переделывала отдельные модули и процессы — классическая история «лоскутного одеяла», знакомая любому, кто работал с легаси. Основная сложность скрывалась в интеграции с 1С: на момент создания первого сайта система 1С клиента не поддерживала стандартный API-обмен, и инженеры пошли обходным путём — XML-файлы отправлялись и обрабатывались по отдельности. Подход логичный, но медленный: информация об остатках, ценах и категориях обновлялась с опозданием. Постоянные клиенты видели, что товар есть в наличии, а при попытке заказать он вдруг оказывался недоступен. Имидж надежного партнера и поставщика при таком сценарии страдал молча.
Наконец, стало очевидно, что точечные правки исчерпаны, и было принято решение о полной переработке.
Ломать ли то, что и так работает?
Классический набор симптомов у сайта-оптовика для оптовиков включает несколько признаков в любой комбинации:
1. Интерфейс рассчитан на десятки товаров, а клиенты заказывают сотнями позиций. Старый сайт спроектирован под небольшие корзины, а реальные B2B-закупщики формируют заказы из сотен SKU. Любая попытка ускорить процесс упирается в интерфейс, придуманный для совсем другой жизни.
2. Нет связки между пользователем сайта и контрагентом в учетке. Без синхронизации с 1С повторить вчерашний заказ было невозможно Статьи для СМИ Техмаркет.docx. Для B2B это приговор: закупщик не будет героически собирать 300 позиций заново — он просто позвонит конкуренту.
3. Полное отсутствие мобильной версии/кривая мобильная версия/ тяжелая мобильная версия, которая грузится по частям. Даже в 2022-м это уже был прямой канал оттока: мобильный трафик рос, а сайт его не конвертировал.
4. Менеджеры как живой API. Всё, что клиент не может сделать сам, он делает звонками и письмами. Модель линейно масштабируется только вместе с ФОТ — и это естественный потолок продаж.
Этап анализа: без интервью с клиентами редизайн не начинать
Проект стартовал с глубокого аудита: слабые места навигации и структуры каталога, неэффективные сценарии оформления заказа, проблемы с B2B-логикой — всё задокументировано скриншотами «до» и превращено в карту болевых точек. Параллельно команда провела интервью с ключевыми клиентами, чтобы понять их реальные рабочие процессы.
Это важный момент: в B2B нельзя проектировать интерфейс «по наитию». Закупщик — это не конечный потребитель, у него свои KPI, свои сроки и свои привычки, о которых разработчик сайта узнает только в разговоре.
Специфика В2В-дизайна: почему B2C-шаблоны здесь не работают
Сразу обозначу рамки: делали не «красивый дизайн ради картинки», а дизайн под специфику B2B-закупок — без радикальных перемен, привлекательный, но понятный возрастной аудитории.
Ключевое отличие B2B-интерфейса от B2C — в масштабах каталогов и скорости работы. Клиент «бежит» по списку, не открывая карточки, сравнивает и добавляет в корзину по внешним описаниям. Значит, каждая строка каталога обязана нести максимум информации, но не перегружать. Методом тестов выявили самые важные параметры: полное название без сокращений, цену (включая персональную для контрагента), 4 ключевых параметра категории, наличие на складе, кратность и минимальный заказ, единицу измерения.
Светлые тона в палитре оставили осознанно: они ассоциируются с порядком, простором и надежностью, помогают сформировать образ современной и профессиональной компании.
Решения в UX, которые экономят время закупщика:
-
Модуль «Избранное» с именными списками вроде «Закупка кухня» или «Бухгалтерия»: добавление в одно касание, массовая загрузка в корзину. Клиенты стали оформлять заказы на 15–20 минут быстрее.
-
Функция «Товары под заказ» расширила ассортимент без увеличения складских остатков и автоматически интегрировалась с процессами 1С, включая расчет сроков и координацию с поставщиками.
-
Быстрый ввод количества прямо в списке без перехода в карточку. Каждый лишний клик снижает конверсию на 3–7%, а на заказе в 300 позиций это уже не статистическая погрешность, а деньги.
-
Всплывающие характеристики при наведении — 4 ключевых параметра на товар, достаточных, чтобы принять решение, не открывая карточку. Например, для электрочайника это «объем», «материал», «мощность», «тип нагревательного элемента».
-
Mobile-first в буквальном смысле: интерфейс проектировали сначала под смартфон, потом адаптировали для веба. Кнопку «Оформить заказ» зафиксировали низу экрана, чтобы оформить заказ можно было без скролла.
Архитектура: сносим монолит
На смену монолитному Битриксу пришла распределённая архитектура: Vue 3 на фронтенде, Битрикс на бэкенде. Это дало разделение ответственности, автоматизацию процесса продаж, точки контроля и гибкость разработки — то, без чего дальнейшие интеграции превращаются в археологические раскопки и охоту на ведьм одновременно.
Интеграция с 1С, переписанная по-человечески. Бэкенд-разработчик проекта Таня Лапшина очень точно сформулировала суть проблемы: когда один клиент отправлял заказ с 300–400 позициями, стандартные настройки сервера начинали задыхаться. B2B-клиенты покупают сразу, много и не могут ждать обновления остатков часами. Решение получилось компромиссным и рабочим:
-
Периодичность синхронизации — 10 минут: оптимальный баланс актуальности данных и нагрузки на сервер.
-
Мониторинг обмена: если синхронизация задерживается, администратор 1С получает оповещение сразу.
Война с номенклатурой. Старый сайт содержал товары с совершенно разными характеристиками: кастрюля и блендер никак не могли описываться одинаковым набором свойств. Команда решила хранить свойства товаров в отдельных таблицах БД, для каждой категории выбирать только релевантные параметры. Настроили динамический фильтр: если в категории нет товаров с определённым свойством, что тоже бывает, фильтр просто не выводится.
Администратор в 1С указывает, какие свойства считаются основными и появляются в карточке товара при наведении курсора. Мы разработали алгоритм, который позволяет магазину моментально перестраивать каталог прямо из 1, т.е. нет необходимости обращаться к разработчикам. Если менеджер в 1С переместил категорию или добавил новое свойство, это изменение отображается на сайте мгновенно. Новая архитектура работает более чем с 3100 техническими свойствами — от размера до цвета и мощности — при сохранении производительности.
Масштабируемость как архитектурный принцип. Главное достоинство нового каркаса — гибкость: функционал можно добавлять без переделки существующих компонентов. Функцию «Товары под заказ» запустили через три месяца после релиза без каких-либо сложностей.
Вместо вывода
Редизайн и смена архитектуры в B2B — это фундамент, на котором выстраивается всё остальное: автоматизация заказов, интеграции с 1С и ERP, личный кабинет закупщика, сценарии повторных продаж, работа с отсрочками и индивидуальными прайсами. Правильная архитектура, понимание специфики оптовой торговли (большие корзины, долгие циклы, высокие требования к надежности, задачи купить срочно, а лучше вчера) и грамотная интеграция с 1С дают результат, который видно в цифрах. В В2В-продажах каждый шаг на сайте клиент задается вопросом: остаться с вами или уйти туда, где удобнее. Обычно, второй попытки не дают, и именно поэтому дизайн здесь работает в первую очередь не для красоты, а на выручку.
ссылка на оригинал статьи https://habr.com/ru/articles/1032268/