B2B-интернет-магазин для производителя промышленной продукции
К нам обратился производитель промышленной продукции, которому требовался современный B2B-интернет-магазин для работы с юридическими лицами
Аналитика и прототипирование
UX/UI-дизайн
Проектирование личного кабинета
Верстка
UX/UI-дизайн
Проектирование личного кабинета
Верстка
Оптовые покупатели ожидают от интернет-магазина такой же скорости работы, как и от внутренних корпоративных систем. Им важно быстро найти нужную позицию, проверить наличие, выбрать необходимые характеристики и оформить заказ за несколько минут
На момент старта у компании уже был корпоративный сайт, однако его возможностей было недостаточно для полноценной онлайн-работы с оптовыми клиентами. Необходимо было создать удобный инструмент самообслуживания, который позволит клиентам самостоятельно находить нужную продукцию, оформлять заказы, получать документы и отслеживать их исполнение без постоянного взаимодействия с менеджером
Проект включал не только разработку пользовательского интерфейса, но и проектирование сложной бизнес-логики, характерной для B2B-продаж
Проект включал не только разработку пользовательского интерфейса, но и проектирование сложной бизнес-логики, характерной для B2B-продаж
Проблема
Решаемые задачи
- стоимость может зависеть от различных параметров товара
- существуют товары в наличии и под заказ
- действуют индивидуальные условия сотрудничества и персональные цены
- один пользователь может работать сразу с несколькими юридическими лицами
- необходимо вести документы, счета, доставки и историю заказов
При этом логика подобных проектов значительно сложнее классического интернет-магазина:
Дополнительно требовалось предусмотреть интеграцию интернет-магазина с корпоративными информационными системами компании
B2B
eCommerce
UX/UI
Производство
Спроектировать B2B-интернет-магазин, который объединит каталог продукции, процесс оформления заказа и постпродажное сопровождение клиентов в едином интерфейсе
Система должна была стать полноценным рабочим инструментом для юридических лиц: от поиска продукции до получения документов и контроля исполнения заказов
Система должна была стать полноценным рабочим инструментом для юридических лиц: от поиска продукции до получения документов и контроля исполнения заказов
Основной акцент сделали не на декоративном дизайне, а на удобстве ежедневной работы пользователей
Интерфейс построили на привычных сценариях интернет-магазинов, чтобы новым пользователям не требовалось дополнительное обучение. При этом за внешней простотой скрывается сложная логика работы с ассортиментом, различными вариантами поставки, индивидуальными условиями и корпоративными процессами
Главную страницу спроектировали как быстрый вход в каталог, позволяющий сразу перейти к нужным разделам продукции, ознакомиться с новинками, специальными предложениями и преимуществами компании
Интерфейс построили на привычных сценариях интернет-магазинов, чтобы новым пользователям не требовалось дополнительное обучение. При этом за внешней простотой скрывается сложная логика работы с ассортиментом, различными вариантами поставки, индивидуальными условиями и корпоративными процессами
Главную страницу спроектировали как быстрый вход в каталог, позволяющий сразу перейти к нужным разделам продукции, ознакомиться с новинками, специальными предложениями и преимуществами компании
Решение
Задача
Работу начали с изучения существующего сайта, технических требований и сценариев использования системы
Особое внимание уделили созданию детального интерактивного прототипа. На этом этапе были проработаны не только основные страницы, но и десятки различных состояний интерфейса: наличие товара, поставка под заказ, варианты характеристик, ошибки, уведомления, пустые состояния, модальные окна и мобильные версии экранов
Такой подход позволил проверить пользовательские сценарии еще до начала визуального дизайна и значительно сократить количество доработок в дальнейшем
Особое внимание уделили созданию детального интерактивного прототипа. На этом этапе были проработаны не только основные страницы, но и десятки различных состояний интерфейса: наличие товара, поставка под заказ, варианты характеристик, ошибки, уведомления, пустые состояния, модальные окна и мобильные версии экранов
Такой подход позволил проверить пользовательские сценарии еще до начала визуального дизайна и значительно сократить количество доработок в дальнейшем
Аналитика и прототипирование
Процесс
Каталог разработали таким образом, чтобы пользователь мог максимально быстро найти нужную продукцию с помощью категорий, фильтрации и поиска
Основные характеристики отображаются уже в списке товаров, что ускоряет выбор и сокращает количество лишних переходов
Карточка товара позволяет ознакомиться с характеристиками, проверить актуальную стоимость и наличие, выбрать необходимые параметры, скачать сопроводительные документы и добавить товар в корзину
Для ускорения работы предусмотрели режим быстрого просмотра, позволяющий выполнять основные действия без открытия отдельной страницы товара
Основные характеристики отображаются уже в списке товаров, что ускоряет выбор и сокращает количество лишних переходов
Карточка товара позволяет ознакомиться с характеристиками, проверить актуальную стоимость и наличие, выбрать необходимые параметры, скачать сопроводительные документы и добавить товар в корзину
Для ускорения работы предусмотрели режим быстрого просмотра, позволяющий выполнять основные действия без открытия отдельной страницы товара
Каталог и карточка товара
Одним из самых сложных элементов проекта стала корзина
Пользователь может добавлять товары различными способами: через каталог, карточку товара, быстрый просмотр или поиск по артикулу, что особенно удобно при регулярных закупках
Если заказ содержит позиции с разными условиями поставки, система автоматически разделяет их при оформлении, сохраняя единый сценарий покупки для пользователя
Пользователь может добавлять товары различными способами: через каталог, карточку товара, быстрый просмотр или поиск по артикулу, что особенно удобно при регулярных закупках
Если заказ содержит позиции с разными условиями поставки, система автоматически разделяет их при оформлении, сохраняя единый сценарий покупки для пользователя
Корзина и оформление заказа
Личный кабинет стал полноценным рабочим пространством клиента
Здесь пользователь может:
Если сотрудник работает сразу с несколькими юридическими лицами, система позволяет быстро переключаться между организациями без повторной регистрации
Здесь пользователь может:
- управлять организациями
- хранить реквизиты
- работать с адресами доставки
- просматривать историю заказов
- получать счета и документы
- контролировать выполнение заказов
Если сотрудник работает сразу с несколькими юридическими лицами, система позволяет быстро переключаться между организациями без повторной регистрации
Личный кабинет
Для заказов была предусмотрена подробная система статусов
Пользователь может видеть текущее состояние каждой позиции, отслеживать выполнение заказа, получать документы и контролировать процесс доставки без необходимости обращаться к менеджеру
Пользователь может видеть текущее состояние каждой позиции, отслеживать выполнение заказа, получать документы и контролировать процесс доставки без необходимости обращаться к менеджеру
Заказы и логистика
Мобильную версию адаптировали под реальные рабочие сценарии
Сложные таблицы преобразовали в карточный формат, а основные действия сделали доступными в несколько касаний. Благодаря этому пользователи могут быстро проверить статус заказа, найти нужную информацию или оформить покупку со смартфона
Сложные таблицы преобразовали в карточный формат, а основные действия сделали доступными в несколько касаний. Благодаря этому пользователи могут быстро проверить статус заказа, найти нужную информацию или оформить покупку со смартфона
Мобильная версия
В результате был создан полноценный B2B-интернет-магазин, который объединил каталог продукции, оформление заказов, личный кабинет и инструменты постпродажного сопровождения в единой системе
Несмотря на сложную внутреннюю бизнес-логику, интерфейс получился интуитивно понятным и привычным для пользователей. Клиенты компании могут самостоятельно выполнять большинство операций — от поиска продукции и оформления заказа до получения документов и контроля исполнения поставок
Несмотря на сложную внутреннюю бизнес-логику, интерфейс получился интуитивно понятным и привычным для пользователей. Клиенты компании могут самостоятельно выполнять большинство операций — от поиска продукции и оформления заказа до получения документов и контроля исполнения поставок
Проект стал удобным цифровым инструментом для корпоративных клиентов и позволил перенести значительную часть взаимодействия с менеджерами в формат самообслуживания
Результат
- 1С:ERP
- Битрикс24
- MS SQL
- Интеграция с ФНС
Технологии
Расскажите нам о вашем проекте
Свяжемся с вами в течение 20 минут, расскажем о продуктах, ценах и этапах работы
