Тысячи характеристик: как сделать выбор оборудования проще

Не просто каталог: как мы собрали интернет-магазин для сложного B2B-продукта

ZEN (Zero Error Network) — компания, которая поставляет сетевое оборудование и оптические модули для корпоративных сетей.

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

Поэтому мы сразу смотрели на сайт как на инструмент для работы с каталогом. При этом у ZEN на старте не было почти ничего: ни готового сайта, ни фирменного стиля, ни полноценной дизайн-системы. Даже логотип и домен мы определяли в рамках проекта.

Что мы сделали для ZEN:

Айдентику — от подбора домена до логотипа и фирменного стиля.
Дизайн и структуру интернет-магазина: главная, каталог, карточка товара, личный кабинет, избранное, сравнение, блог, акции, техподдержка.
Разработку frontend и backend частей с отдельной зоной под интеграцию с 1С.
Контент и базу знаний — главное конкурентное преимущество ZEN в B2B.
Адаптивы под все устройства.

Каталог

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

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

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

Личный кабинет

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

База знаний

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

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

Лого и брендбук

Когда ZEN обратились к нам, у компании были название и собственное представление о будущем бренде. Визуальный стиль предстояло разработать с нуля, одновременно с сайтом.

Начали с макетов, которые команда ZEN подготовила с помощью нейросети. Они помогли понять, каким компания видит будущий продукт. Мы взяли их за отправную точку и на этой основе разработали целостную визуальную систему.

Аналитика

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

Из этого сформировались основные принципы сайта:

Несколько способов поиска: по бизнес-задаче, характеристикам и конкретной модели.
Подробные карточки товаров: с техническими параметрами, необходимыми для проверки совместимости.
Сравнение моделей: чтобы сопоставлять характеристики похожих устройств.
Статусы наличия и доставки: «в наличии», «под заказ» и ETA.
Базу знаний и обучающие материалы: для тех, кто пока не определился с подходящим решением.
Личный кабинет: для работы с заказами и дальнейшего взаимодействия с компанией.

Отдельно посмотрели на конкурентов.

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

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

Интеграция с 1С

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

Мы заложили необходимую архитектуру и подготовили техническую часть сайта для интеграции. Настройкой самой 1С занимался подрядчик клиента.

Коммуникация

Проект развивали в постоянном диалоге с командой ZEN: показывали решения поэтапно, быстро собирали обратную связь и уточняли детали по мере формирования самого продукта. Это позволило не уходить в длинные циклы согласований — например, концепт главной согласовали без единой правки.

Результаты