/

B2B‑интернет-магазин для бренда кабельной продукции FLEXICORE

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

Аналитика и прототипирование

UX/UI-дизайн

Проектирование личного кабинета

Верстка

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

Дополнительно нужно было продумать личный кабинет для юридических лиц. В нем пользователь должен управлять организациями, реквизитами, адресами доставки, заказами, счетами и отгрузочными документами. По ФЗ также требовались интеграции с 1С:ERP, внешней MS SQL, CRM Битрикс24, базой ФНС и логистическими сценариями

У FLEXICORE уже был сайт на Tilda, но для B2B-продаж его возможностей было недостаточно. Клиенту нужен был полноценный интернет-магазин для юридических лиц: с каталогом, сложной карточкой товара, корзиной, оформлением заказа, личным кабинетом, управлением компаниями и интеграциями с внутренними системами

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

Проблема

Решаемые задачи

Результат

Спроектировать B2B-интернет-магазин, который объединит каталог, покупку кабеля, оформление заказа и постпродажное сопровождение в одном интерфейсе

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

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

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

Решение

Задача

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

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

Аналитика и прототипирование

Процесс

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

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

Каталог и карточка товара

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

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

Корзина и оформление заказа

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

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

Личный кабинет

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

В интерфейсе предусмотрели статусы, трек-номера, скачивание счетов и УПД. Пользователь может видеть, какие позиции отгружены, какие еще готовятся, и отслеживать доставку без обращения к менеджеру

Заказы и логистика

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

Мобильная версия

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

Проект объединил сложную продуктовую логику и привычный пользовательский опыт: закупщик может найти товар, выбрать параметры, добавить позиции, оформить заказ, скачать документы и отслеживать отгрузку в одном месте. При этом интерфейс сохранил визуальную стилистику бренда – серую, черную и оранжевую палитру, заданную в ФЗ

Результат

Технологии

Сайт интегратора CRM Cloudway

Давайте обсудим ваш проект

Максимально загружаемый размер файла — 30 мб