Дизайн-концепция
интернет-магазина Сибур

Разработали дизайн-концепцию
интернет-магазина для B2B-продаж нефтехимической компании Сибур

Индикатор прокрутки статьи

Дизайн-концепция
интернет-магазина Сибур

Клиент 

ПАО «Сибур» — одна из крупнейших интегрированных нефтегазохимических компаний России. У компании есть интернет-магазин для продажи нефтехимического сырья для любого производства с более 700 наименований продукции по оптовым ценам.

Задача

Нам предстояло разработать дизайн-концепцию сайта для B2B-клиентов с использованием юзабилити приемов успешных интернет-магазинов в области B2C- и B2B-сегментов.

А также создать индивидуальный и узнаваемый визуальный стиль
с использованием современных практик в UI/UX дизайне.

Конкурентный анализ и подбор референсов

Сравнили и проанализировали дизайн-решения косвенных конкурентов в отрасли с целью определения лучших практик и трендов. В конкурентном анализе участвовали: Северсталь Маркет, Фосагро, Уралхим,  RossChem, BINAGroup, РоссПолимер. 

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

Конкурентный анализ и подбор референсов Сибур

Прототипирование и дизайн

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

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

1. Главная страница

Главная страница Сибур

  • Главный экран

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

Блок «Авторизация» сообщает о всех преимуществах авторизации и подталкивает пользователя к созданию аккаунта.

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

  • Каталог

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

  • Карточка товара

В блоке «Лидеры продаж» сделали удобный фильтр по наиболее популярным товарам. Можно выбрать любую категорию сырья по тегу и легко увидеть популярные товары этой категории.

  • Склады

В блоке «25 складов в 17 регионах» пользователь может наглядно ознакомиться со всеми имеющимися складами холдинга и перейти на страницу склада, чтобы ознакомиться с подробной информацией и построить маршрут в Яндекс.Навигаторе до склада.

  • Новости и блог

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

  • FAQ

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

  • Футер

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

2. Карточка товара

Карточка товара Сибур

  • Главный экран

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

Для оформления заказа на сайте необходимо авторизоваться, поэтому блок «Входа» присутствует
и в карточке товара.

  • Аналоги

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

  • Наличие на складах

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

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

  • Описания

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

  • Отзывы

Наличие отзывов у товара увеличивает доверие у покупателей к продукции и к компании.

  • Вы недавно смотрели

Добавили раздел «Вы недавно смотрели» — полезный блок для пользователей, которые потеряли ссылку на нужный товар, напомнит о тех товарах, которые ранее хотели приобрести.

3. Оформление заказа

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

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

Процесс заказа состоит из 3 шагов (страниц) — Корзина, Договор и Условия доставки. Корзина является первым шагом в оформлении заказа, так как пользователи привыкли проверять и дополнять свой заказ перед дальнейшим шагом, в нашем случае — заполнении информации в договоре. Третий шаг – Условия доставки.

Оформление заказа Сибур

  • Условия доставки

Тип доставки

В третьем шаге (Условия доставки) первым блоком идет Тип доставки товаров. Он разделен на «Общий» и «Различный».

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

Период отгрузки

Всё, что касается доставки товаров (дата отгрузки, объем товара), также вынесли на страницу «Условия доставки». График отгрузки добавлен к этому шагу и видоизменен — график отгрузки стал компактнее и намного понятнее для пользователя. 

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

Резюме

Разработали дизайн интернет-магазина для B2B-аудитории на основе конкурентного анализа и с использованием опыта успешных интернет-магазинов B2C- и B2B-сегментов.

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

Дизайн-концепция является неотъемлемой частью разработки любого проекта. Хотите с нами работать? Оставьте заявку на сайте, свяжемся с вами и обсудим проект.

вверх

Расскажите о вашем проекте

Заполните форму и мы ответим вам в течение рабочего дня

Обязательное поле для заполнения
Обязательное поле для заполнения
Обязательное поле для заполнения
Обязательное поле для заполнения
Обязательное поле для заполнения
Резюме.pdf

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