Сотбит: B2B 3.0 — комплексный редизайн и новая архитектура — советы в блоге

Сотбит: B2B – линейка готовых решений для разработки и внедрения личного кабинета дилера. Позволяет как оптимизировать B2B процессы формата «продавец-покупатель», так и увеличить эффективность работы сотрудников за счет перевода их деятельности в другие более активные направления: телемаркетинг, аккаунтинг и прочее.

С момента запуска данного продукта прошло целых 6 лет. И за это время Сотбит: B2B прошел несколько важных стадий своего развития:

1. Запуск базовой MVP версии

2. Насыщение функционала

3. Разработка мобильного приложения

4. Разделение продукта на редакции

5. Внедрение нового шаблона v2.0

6. Увеличение функциональности

В результате, пройдя все эти стадии, из очередного рядового оптового решения Сотбит: B2B превратился в передовую отечественную платформу, которую выбирают как прямые клиенты среднего и большого бизнеса, так и крупные веб-интеграторы (Первый Бит, Норбит и Интерволга).

Стоит отметить, что и отечественные ИТ-премии и сервисы тоже не обошли нас стороной: обратили внимание на наш продукт и в 2025 году удостоили его несколькими регалиями:

• Сотбит: B2B – финалист национальной премии «Приоритет: Цифра — 2025»

• Сотбит: B2B – самый популярный B2B продукт по версии сервиса PickTech

Но все это не повод останавливаться и почивать на лаврах. Именно поэтому сейчас, в конце 2025 года, платформа Сотбит: B2B входит в новую веху своего развития.

Итак, мы представляем рынку совершенно новый шаблон v3.0.0, который обладает рядом особенностей и преимуществ перед старой версией продукта:

1. Полностью переработанная архитектура. Если ранее для ускорения разработки мы применяли готовые архитектуры, прототипы и библиотеки, то теперь решили обратиться к своему опыту и разработать решение «с нуля» с использованием собственных компонентов.

2. Улучшение UX/UI показателей. На основе опыта внедрений и обратной связи клиентов мы упростили ключевые сценарии: оформление заказа и поиск товара стали на 20% быстрее, ошибочных кликов — на 28% меньше, брошенных корзин — на 30%. Также выросли метрики вовлеченности: завершение регистрации +35%, повторные визиты +48%.

3. Высокая производительность и скорость загрузки. Благодаря внедрению вышеприведенных пунктов удалось добиться увеличения скорость загрузки страниц в 2 раза, а на отдельных страницах и в 3 раза.

4. Настройка цветовой гаммы. Теперь сменить цветовую гамму и ховеры в шаблоне очень легко. Достаточно зайти в настройки и выбрать необходимые цвета.

В версии 3.0 мы сделали фундаментальный шаг. Разработали новый шаблон и собрали интерфейс на собственных компонентах.

Что изменилось:

• Новый шаблон и собственные компоненты. Таблицы, поля, списки, формы и модальные окна реализованы как единый набор и подключаются по необходимости.

• Стабильная работа на больших каталогах. Даже при большом количестве SKU и активной работе с таблицами и формами интерфейс ведет себя уверенно, без ощутимых просадок по скорости в типовых действиях.

• Проще развивать и дорабатывать. Новые функции добавляются по единым правилам через компоненты, что снижает лишнюю работу и риск конфликтов.

Скорость работы решения заметно выросла. Ниже — сравнение загрузки страницы каталога в старом и новом шаблоне по замерам Google PageSpeed Insights (Lighthouse).

• FCP (First Contentful Paint) — когда на экране появляется первое содержимое. Чем меньше значение, тем быстрее пользователь понимает, что страница загрузилась и «живая». На каталоге FCP заметно сократился и на десктопе, и на мобильных.

• LCP (Largest Contentful Paint) — когда отрисовался основной контент (самый крупный видимый блок). Это один из главных индикаторов «ощущаемой скорости»: пользователь видит страницу уже как рабочую. В каталоге LCP сократился примерно в 2 раза на десктопе и существенно улучшился на мобильных.

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

• TBT (Total Blocking Time) — сколько времени в процессе загрузки страница «подвисает» из-за блокирующих задач в основном потоке (влияет на отзывчивость до полной готовности). На десктопе TBT сильно снизился, на мобильных вырос, но остается в пределах сотен миллисекунд и не перекрывает выигрыш по ключевым метрикам видимой загрузки (FCP/LCP/Speed Index).

Дизайн был переработан на основе практики внедрений и обратной связи клиентов. Была разработана новая дизайн-система с едиными паттернами и правилами взаимодействия, чтобы все разделы работали одинаково и пользователь проходил типовые сценарии быстрее и увереннее.

Какой подход использовали:

• Дизайн-система и единый стандарт компонентов. Интерфейс собран из единого набора элементов (таблицы, формы, списки, модальные окна, кнопки, статусы и уведомления) с общими правилами поведения на всех страницах. Это сделало взаимодействие более предсказуемым и снизило количество ошибочных кликов на 28%.

• Фокус на основном сценарии. На экране остается главное (подбор → корзина → оформление), а второстепенные инструменты (фильтры, меню) не мешают и раскрываются по необходимости. В результате ключевой сценарий оформления заказа выполняется на 20% быстрее, а доля брошенных корзин снизилась на 30%.

• Удобство при работе с данными. Мы сделали списки и таблицы более структурированными и читабельными: ключевые поля и действия расположены предсказуемо, а визуальные элементы стали компактнее. Это сократило среднее время поиска товара на 20%.

• Порог входа и вовлеченность. Первые шаги в кабинете сделали проще и понятнее: пользователи чаще доходят до конца регистрации (+35%), а доля повторных визитов после редизайна выросла на 48%.

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

Раньше главная страница была «рабочим столом» контрагента. Но со временем стало ясно, что это перегружает первый экран: пользователю важнее сразу перейти к подбору товаров и оформлению заказа.

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

• Крупный информационный баннер (акции/возможности/важные сообщения);

• Быстрые переходы по категориям и навигация по ассортименту;

• Сразу доступен каталог с карточками товаров и действиями для добавления в корзину;

В итоге контрагент начинает работу быстрее, а персональные данные и виджеты перенесены в личный профиль.

Ранее в каталоге было три варианта отображения: плитка, список и таблица. Это давало гибкость, но в B2B обычно есть два устойчивых сценария.

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

Поэтому в версии 3.0 мы оставили два режима и прокачали их так, чтобы третий больше не был нужен. Табличный режим переработали и расширили по смыслу, поэтому отдельный «список» уже не требуется.

Табличный режим

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

Плиточный режим

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

Меню и фильтры

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

Плавающая корзина

В каталоге появилась плавающая корзина. Она всегда доступна во время подбора и при необходимости перемещается в удобную область экрана.

Ранее чтобы попасть в B2B кабинет требовалось пройти полную регистрацию, как пользователя так и организации сразу.

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

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

Теперь профиль — это персональная зона, где собраны привычные виджеты и быстрые действия.

Что есть в профиле:

• Рабочий стол с виджетами — мои заказы, счет ждет оплаты, моя корзина, скидки, коммерческие предложения, организации, личный менеджер, избранные ссылки и другие виджеты.

• Разделы профиля — рабочий стол, календарь и настройки.

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

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

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

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

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

• Переработана архитектура решения;

• Полностью переработан дизайн всех интерфейсов;

• Настройки цветовой схемы доступны из административной части;

• Функционально изменена главная страница B2B-кабинета;

• Переработана регистрация;

• Добавлена настройка баннеров страницы авторизации;

• Добавлена пользовательская настройка отображения свойств товаров и торговых предложений в каталоге;

• Реализована «плавающая корзина» в каталоге;

• Переработаны настройки в административной части.

Сотбит: B2B 3.0 — это полноценное переосмысление пользовательского опыта, где мы синхронизировали дизайн и архитектуру вокруг одной идеи: B2B-интерфейс должен одновременно оставаться «рабочим инструментом» и быть визуально легким, современным и понятным с первого экрана.

При этом мы не «облегчали» кабинет за счет функциональности. Наоборот, сохранили плотность данных и контроль сделав интерфейс аккуратнее и продуманнее.

А благодаря новой архитектуре платформа стала устойчивее, быстрее в типовых сценариях и проще в развитии —  том числе при работе с объемной номенклатурой и при внедрении нового функционала.

Попробуйте версию 3.0 в работе — демо уже доступно, можно пройти ключевые сценарии и посмотреть обновления вживую.

Стоит также отметить, что на данный момент обновления доступны исключительно в базовой редакции Сотбит: B2B кабинет. А уже в январе месяце на новый шаблон 3-й версии переедет вся линейка Сотбит: B2B.

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

Оригинальная статья.

	Электронная почта: sale@sotbit.ru		Телефон: +7 (495) 308-85-44