- Заказчик
- ПАО «Сибур» — одна из крупнейших интегрированных нефтегазохимических компаний России. У компании есть интернет-магазин для продажи нефтехимического сырья для любого производства.
- Задача
- Разработать дизайн-концепцию сайта для B2B-клиентов с использованием юзабилити приемов успешных интернет-магазинов B2C- и B2B-сегментов. Создать индивидуальный и узнаваемый визуальный стиль.
Смотрите на RUTUBE, как мы рзработали дизайн-концепцию: https://rutube.ru/video/29ec7b4d5a80b71be3b685dbc30bae8c/?r=wd
Задача
Нам предстояло разработать дизайн-концепцию сайта для B2B-клиентов с использованием юзабилити приемов успешных интернет-магазинов B2C- и B2B-сегментов.
А также создать индивидуальный и узнаваемый визуальный стиль?с использованием современных практик в UI/UX дизайне.
Конкурентный анализ и подбор референсов
Сравнили и проанализировали дизайн-решения косвенных конкурентов в отрасли с целью определения лучших практик и трендов. В конкурентном анализе участвовали: Северсталь Маркет, Фосагро, Уралхим, RossChem, BINAGroup, РоссПолимер.
Провели визуальный анализ референсов для генерации идей по современным визуальным решениям. Полюбившаяся пользователями логика использования интернет-магазина помогает легче совершать покупки малому и среднему бизнесу.
Прототипирование и дизайн
Разработали на основе конкурентного анализа прототип главной страницы, карточки товара и страницы оформления заказа.
За основу взяли модульный дизайн. Блочная система позволяет располагать множество информационных блоков рядом друг с другом, а грамотное расположение контента внутри блоков не утяжеляет стиль и позволяет выделить каждый блок по мере важности.
Главная страница
Главный экран
Главный экран состоит из наиболее важных для пользователя блоков: шапка, блок авторизации, фильтр подбора сырья, блок с баннерами и блок услуг.
Блок «Авторизация» сообщает о всех преимуществах авторизации и подталкивает пользователя к созданию аккаунта.
Интерактивный фильтр «Подбор сырья» выдает результат только по некоторым категориям из каталога, исходя из этого, блок размещен на главном экране и выделен темным цветом для сильного акцента.
Каталог
После главного экрана расположили раскрытые главные категории каталога, чтобы увеличить количество переходов пользователей в каталог. Яркие цвета вызваны помочь пользователю визуально отделить разные категории сырья друг от друга.
Карточка товара
В блоке «Лидеры продаж» сделали удобный фильтр по наиболее популярным товарам. Можно выбрать любую категорию сырья по тегу и легко увидеть популярные товары этой категории.
Склады
В блоке «25 складов в 17 регионах» пользователь может наглядно ознакомиться со всеми имеющимися складами холдинга и перейти на страницу склада, чтобы ознакомиться с подробной информацией и построить маршрут в Яндекс.Навигаторе до склада.
Новости и блог
Частое обновление новостного блока демонстрирует активную деятельность компании. В блоге размещаем статьи о преимуществах продукции и способах применения, чтобы заинтересовать пользователя?в покупке товара.
FAQ
Раздел призван снизить нагрузку на колл-центр. Предусмотрели ситуацию, когда у пользователя могут возникнуть другие вопросы?или нужна помощь с заказом, — добавили акцентный блок с обратной связью, который пользователь точно не пропустит.
Футер
Футер не отвлекает внимание от наиболее важного контента на сайте. В футер добавили блок подписки на рассылку выгодных предложений (акций и новинок), чтобы привлечь внимание пользователя и подтолкнуть к подписке.
Карточка товара
Главный экран
Фотография товара визуально разбавляет текст,?но не является важной для B2B-клиентов, поэтому мы поделили все пространство на три области — фотография товара, контентная часть с описанием и характеристиками и блок с добавлением товара в корзину.
Для оформления заказа на сайте необходимо авторизоваться, поэтому блок «Входа» присутствует?и в карточке товара.
Аналоги
В случае нехватки товара пользователь легко сможет найти нужный ему аналогичный товар и добавить к заказу, поэтому аналоги располагаются сразу после основной информации о продукте.
Наличие на складах
Цена и наличие товара показываются с ближайшего к городу пользователя склада или с того склада,?в котором осталась продукция.
Если пользователь захочет заказать товар с другого склада, он легко сможет найти информацию?в таблице «Наличие на 25 складах».
Описания
Чтобы пользователь легко находил необходимую информацию, а также с целью сэкономить пространство и не перегружать страницу, мы разделили контент на смысловые блоки и заполнили их небольшим количеством текстового контента без изображений. Все описания блоков отобразили в раскрытом виде для легкой читаемости.
Отзывы
Наличие отзывов у товара увеличивает доверие у покупателей к продукции и к компании.
Вы недавно смотрели
Добавили раздел «Вы недавно смотрели» — полезный блок для пользователей, которые потеряли ссылку на нужный товар, напомнит о тех товарах, которые ранее хотели приобрести.
Оформление заказа
Оформление заказа приобрело понятную и логичную форму для пользователей, разделенную на 2 столбца: пункты для заполнения и общая статичная информация.
Видоизменили шапку и футер, чтобы лишняя информация не отвлекала пользователя от прохождения шагов.
Процесс заказа состоит из 4 шагов (страниц) — Корзина, Договор, Условия доставки и Подтверждение заказа. Корзина является первым шагом в оформлении заказа, так как пользователи привыкли проверять и дополнять свой заказ перед дальнейшим шагом, в нашем случае — заполнении информации в договоре. Третий шаг – Условия доставки.
Условия доставки
Тип доставки
В третьем шаге (Условия доставки) первым блоком идет Тип доставки товаров. Он разделен на «Общий» и «Различный».
В «Общем» типе пользователю необходимо заполнить все пункты по доставке, которые касаются всех товаров. В «Различном» типе доставки?те же пункты, что и в «Общем», только необходимо заполнить пункты для каждого товара отдельно.
Период отгрузки
Всё, что касается доставки товаров (дата отгрузки, объем товара), также вынесли на страницу «Условия доставки». График отгрузки добавлен к этому шагу и видоизменен — график отгрузки стал компактнее и намного понятнее для пользователя.
Чтобы было легче распределять объем товара по датам и не запутывать пользователя разными формами ввода тонн и килограммов, вес в таблице указывается только?в килограммах.
Дизайн
Разработали дизайн интернет-магазина для B2B-аудитории на основе конкурентного анализа и с использованием опыта успешных интернет-магазинов B2C- и B2B-сегментов.
Визуальное представление сайта базируется на примерах лучших кейсов бизнес-сегмента, а блочная система позволяет располагать множество информационных блоков рядом друг с другом.
Дизайн-концепция является неотъемлемой частью разработки любого проекта. Хотите с нами работать? Оставьте заявку на сайте, свяжемся с вами и обсудим проект.