Разработка магазина для b2b-сегмента (главная, каталог, станица товара, корзина).
О проекте
SPVLAB — компания, производящая специализированную мебель для лабораторий, фабрик и других клиентов в России и СНГ.
Их старый каталог был сделан несколько лет назад, поэтому сейчас им трудно пользоваться. Элементы интерфейса не консистенты, а паттерны взаимодействия не стандартны для b2b-магазина. Клиенту трудно найти нужный товар из-за отсутствия сортировки и привычных инструментов. Пэтому было принято решение улучшить каталог.
Задачи
Исследование: анализ текущего каталога и проектирование карты пути клиента для понимания, как B2B-клиенты выбирают продукты.
Перестройка текущей системы: перегруппировка и реструктуризация всех категорий товаров для создания простой и логичной навигации.
Дизайн: создание макетов для главной страницы, страницы каталога, корзины, дополнительных информационных страниц для повышения доверия и динамического шаблона карточки товара.
Разработка: верстка всех страниц в Webflow, создание и подключение CMS-коллекций для динамического контента.
Здесь представлена старая версия. Можно заметить некоторые недочеты, отсутствует единство элементов и удобство взаимодействия.
Главная страница каталога
SPVLAB производят различные виды мебели, поэтому страница была разделена на три категории: «Лабораторная мебель», «Металлическая мебель», «Стальные двери». К каждой категории был разработан свой hero-экран. От выбранной категории зависит дальнейшее наполнение страницы.
Hero-секция:
Следующим блоком идет витрина. В ней есть слайдер с продуктами и баннер, с помощью которого можно быстро попасть в каталог с уже включенным фильтром подкатегории. Слайдер сделан с помощью Finsweet Components.
Следом идут блоки комплексных решений и готовых лабораторий для любых задач. Это повышает вовлеченность — вместо ручного отбора необходимых товаров пользователь может сразу выбрать готовое решение.
Каталог
Для создания каталога я использовал Finsweet Attributes. Через него я настроил фильтры, сортировку, табы категорий и экран «нет товаров». Для создания иконки на экране «нет товаров» я использовал нейросеть Recraft.
Страница товара
Странице товара было уделено много времени и усилий как в плане дизайна, так и в плане разработки. В структуре можно выделить три ключевых блока: настройка товара (выбор модели, размеров и аксессуаров), подробный блок характеристик (особенности, ключевые функции и материалы) и раздел сопутствующих товаров для повышения среднего чека. Weblow позволяет спроектировать единый шаблон страницы и динамически использовать его для всех элементов CMS-коллекции.
В первом блоке есть слайдер с изображениями товара. Там же можно скачать или посмотреть чертеж. Справа находится меню выбора параметров товара. Слайдер сделан через Finsweet Components.
Второй блок предоставляет всю техническую информацию о товаре. Блок поделен на смысловые части с описанием, ключевыми характеристиками и техническими особенностями.
Третий блок закрывает страницу и служит стимулом к дополнительной покупке.
Корзина
Финальным шагом в пользовательском пути является корзина, где главная цель — это формирование коммерческого предложения. Здесь пользователи могут еще раз проверить и настроить выбранные товары. После этого они могут либо отправить запрос на точный расчет стоимости, либо мгновенно скачать предложение в формате PDF.
Итоги
Благодаря этому редизайну мы превратили запутанную и устаревшую платформу в мощную, чистую и логичную. Компания SPVLAB получила современную дизайн-систему, которая легко масштабируется по мере роста их бизнеса.
Результаты
Улучшение UX: b2b-клиенты теперь могут легко находить, фильтровать и настраивать комплектацию сложной лабораторной мебели, не запутываясь в интерфейсе.
Автоматизация бизнеса: Функция автоматического создания коммерческих предложений в PDF существенно экономит время как покупателям, так и менеджерам компании SPVLAB.
Полная консистентность: Все страницы товаров, категории и информационные разделы теперь следуют единому стилю.
Работа заканчивается, скоро тут будет ссылка \^o^/
