Покупатель приходит с задачей, а не с артикулом
Клей для паркета, гидроизоляция, состав для ремонта бетона — за каждым товаром здесь стоит конкретная строительная работа. Для SikaStroy студия разработала интернет-магазин, в котором технический ассортимент нужно было сделать доступным для выбора и покупки. В интерфейсе проект представлен под названием SIKA-SHOP.
История этого интерфейса начинается с устройства каталога. Покупателю мало увидеть красивую упаковку: ему важно понять назначение материала и не потеряться среди близких по названию составов.
Два входа в один ассортимент
На главной категории показаны крупными тематическими блоками: клеи и герметики, сухие смеси, гидроизоляция, добавки к бетону, покрытия пола и мембраны. Слева расположен более подробный рубрикатор с вложенными группами.
Это два разных уровня знакомства с магазином. Центральная часть даёт общую картину, а боковая навигация позволяет перейти к узкой задаче. В карточке товара рубрикатор остаётся на месте: контекст выбора не исчезает при переходе к подробностям.
Карточка как техническая консультация
Экран товара объединяет фотографию, название и фасовку, цену, количество и кнопку добавления в корзину. Ниже находятся развёрнутое описание, список свойств и таблица. Они переводят посетителя от узнавания продукта к изучению его характеристик.
Рядом с изображением вынесены версия для печати и вопрос о товаре. Для строительной закупки это уместные действия: информацию можно передать коллеге или уточнить до оформления заказа.
Продумать комплект, а не одну позицию
Блок «Также покупают» показывает рядом с основным материалом другие товары, в том числе инструменты. Так карточка поддерживает сценарий комплектной покупки. При этом рекомендации отделены от основного описания и не мешают прочитать характеристики.
Красные акценты связывают цену, поиск и действия покупки. Белый фон оставляет много пространства для технического текста. В результате насыщенная информацией страница сохраняет различимую иерархию.
Что получилось
В проекте соединились товарная витрина, подробная техническая карточка и путь к заказу. Дополнительно реализованы фильтрация, корзина и интеграция с платёжными системами.
Главная особенность работы — отношение к каталогу как к инструменту подбора материала. Он объясняет ассортимент на уровне задач, затем даёт углубиться в конкретный продукт и собрать необходимое для покупки.
Иллюстрации из портфолио OOMI показывают версию проекта на момент съёмки. Цены, акции и контакты внутри изображений могут быть неактуальны.