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

Клиент 

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

Задача

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

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

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

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

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

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

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

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

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

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

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

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

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

• Каталог

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

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

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

• Склады

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

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

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

• FAQ

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

• Футер

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

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

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

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

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

• Аналоги

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

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

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

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

• Описания

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

• Отзывы

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

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

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

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

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

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

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

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

Тип доставки

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

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

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

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

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

Дизайн

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

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

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