Кейс · E-commerce · B2B + B2C
Магазин рабочей одежды Helly Hansen Workwear для людей и команд
Официальный дистрибьютор в России продаёт и одну куртку мастеру, и экипировку на бригаду из сорока человек. Спроектировали магазин, в котором оба сценария работают одинаково просто.
- Клиент
- ООО «Ритм» · HHRUS
- Индустрия
- Спецодежда / B2B-ритейл
- Объём работ
- UX/UI, дизайн-система, desktop и mobile
- Экранов
- 5 страниц · 6 попапов · 7 мобильных
О проекте ↗
Одна куртка или сорок — один и тот же магазин
Покупатель HHRUS — и мастер, который выбирает куртку себе, и закупщик, который одевает бригаду под условия объекта. Второму нужны размеры на всю команду, цены от объёма, КП для бухгалтерии и нанесение логотипа — без переписки с менеджером.
Задача
Совместить розничный магазин и B2B-заказ на команду в одном интерфейсе.
Что сделали
Каталог по назначению и стандартам защиты, матрицу размеров, корзину с объёмными ценами и КП в PDF.
Результат
Дизайн-система и макеты: 5 страниц, 6 попапов и 7 мобильных экранов.
01 · Главная
Подбор по задаче, а не по артикулу
Покупатель приходит с задачей: работа под дождём, у дороги, на морозе. Главная ведёт по назначению одежды и сразу предлагает B2B-сценарий для команды.
Каждой работе — своя защита
Рабочая, сигнальная, влагозащитная и утеплённая одежда — четыре входа в каталог по условиям работы.
Экипируем вашу команду
Блок для бизнеса: подбор под условия, комплектация по размерам, стоимость и сроки за один день, нанесение логотипа.
02 · Каталог
Фильтры, которые понимает закупщик
Кроме размера и цвета — назначение, сфера применения и сертификация EN ISO. В сетку встроена промо-карточка «Экипировка для всей команды» с запросом КП за один день.
03 · Карточка товара
Карточка для одного и для команды
Цена с НДС и цена от 10 штук рядом, наличие на складе, выбор размера с подсказкой по посадке. Две кнопки — «Добавить в корзину» и «Получить предложение на команду».
Блок покупки
Цвет, размер, количество, спецификация и размерная сетка в PDF; блок «Корпоративные заказы».
Цена от 10 штук
Объёмная цена видна сразу на карточке, без запроса менеджеру.
Получить предложение на команду
Отдельный сценарий для B2B: состав, размеры и логотип — в одной заявке.
Документы под рукой
Спецификация и размерная сетка в PDF — для тендеров и согласований.
Технологии в деталях
Helly Tech®, светоотражающие детали, свобода движений — отдельной полосой ниже покупки.
04 · Заказ на команду
Сорок курток в трёх размерах — за одну минуту
Главная B2B-механика: матрица размеров с наличием по каждому, корзина с количеством по размерам, скидкой за объём, нанесением логотипа и выгрузкой КП в PDF.
Быстрый выбор размеров
Все размеры модели в одном окне: наличие или срок под заказ, количество по каждому и итог по сумме.
Корзина для закупщика
Размеры и количество в каждой строке, цена от 10 шт., скидка за объём, нанесение логотипа и «Скачать КП в PDF».
Цена от объёма
автоматически в карточке и корзине
Логотип компании
вышивка или термоперенос, макет с менеджером
КП в PDF
для бухгалтерии и согласований
Оплата по счёту
для юрлиц, НДС 20%
05 · Оформление и попапы
Короткие сценарии по всему магазину
Мини-корзина, запрос предложения, звонок, вход в кабинет и подтверждение заявки — шесть попапов в одной системе, плюс оформление заказа на одной странице.
Оформление заказа
Контакты, юрлицо или физлицо, доставка и оплата на одной странице.
Мини-корзина
Добавленные модели и итог — не уходя со страницы.
Получить предложение
Короткая форма для B2B-запроса с количеством сотрудников.
06 · Мобильная версия
Те же сценарии в телефоне
Семь мобильных экранов: главная, каталог, фильтры, товар, корзина, оформление и меню — B2B-заказ доступен и с объекта.
Макет · 1920 px
Страницы целиком
07 · Результат
Магазин, готовый к рознице и B2B с первого дня
- Дизайн-система: шапка, футер, карточки товара, поля, попапы — с компонентами в Figma
- Пять страниц для десктопа 1920 px и семь мобильных экранов 375 px
- Шесть попапов: мини-корзина, предложение, звонок, размеры, вход, подтверждение
- B2B-механики: цены от объёма, размеры на команду, логотип, КП в PDF, оплата по счёту
Стек и инструменты
- UX/UI
- Figma
- Дизайн-система
- Адаптив 375
- B2B-сценарии
Начнём с вашей задачи