Кейс · B2B-каталог · редизайн

Редизайн каталога лабораторного оборудования

ГК «Факел» поставляет оборудование для дорожно-строительных лабораторий. Пересобрали каталог, карточку товара и путь инженера к запросу КП — и заложили SEO-шаблоны в дизайн.

Клиент: ГК «Факел» · comlab.spb.su
Индустрия: Лабораторное оборудование / B2B
Объём работ: аудит, UX/UI, SEO-шаблоны, UI-kit
Страниц в макете: 6 типов + состояния

Comlab: главная, мега-меню каталога и карточка товара в витрине макетов

О проекте ↗

Каталог, в котором инженер находит прибор и видит, что делать дальше

Покупатель «Факела» — инженер лаборатории или снабженец. Он ищет прибор по ГОСТу, сравнивает модели и запрашивает коммерческое предложение для тендера. На старом сайте у моделей не было цены, наличия и действия, а формы вопроса — только внизу страницы.

Мы провели аудит, собрали UI-kit и спроектировали шесть типов страниц: главную, категорию, серию с подбором модели, карточку товара, лендинг «Оснащение лаборатории под ключ» и мега-меню. В каждой — понятное следующее действие: «Узнать цену», «Задать вопрос», «Запросить КП».

01 · Задача

Что нашли на текущем сайте и что изменили

Аудит сайта comlab.spb.su лёг в основу ТЗ: каждая находка закрыта решением в дизайне или в SEO-шаблоне.

Было

Стало

БылоУ моделей нет цены, наличия и CTA — только «Цена по запросу» без действия

Стало«Узнать цену» у каждого кода заказа, статус наличия и сроки поставки

БылоФорма вопроса — одна, внизу страницы

Стало«Задать вопрос» на карточке и в листинге, вопрос-ответ на карточке, плавающая кнопка «Вопрос инженеру»

БылоКарточка дублирует H1 категории, title перегружен скобками

СталоSEO-шаблоны Title, Description и H1 для категорий и карточек

БылоПустой meta description на главной, дубли домена в og:url

СталоРазметка Product, Offer, BreadcrumbList, FAQPage, Organization

БылоЗапрещён зум на мобильных, «Скачать каталог» ведёт на #

СталоКаталог PDF как лид-магнит, адаптивная вёрстка без ограничений

БылоНет подбора и сравнения моделей

СталоТаблица подбора серии, сравнение LFG4 vs LFGpro, квиз оснащения лаборатории

02 · Что сделали

Шесть типов страниц — один путь к запросу КП

Каждая страница отвечает на свой вопрос инженера и ведёт к одному из трёх действий: узнать цену, задать вопрос, запросить КП.

Comlab: категория — 01
Категория
Фильтры по типу прибора, ГОСТу и комплектации, промо-карточка квиза в сетке и сравнение моделей LFG4 и LFGpro прямо в листинге.

Comlab: серия товаров — 02
Серия товаров
Четыре серии термостатов LOIP с ключевыми параметрами и кнопкой «Подобрать модель».

Comlab: подбор модели — 03
Подбор модели
Таблица 42 моделей с фильтрами по объёму, крышке и температуре; запрос КП сразу на выбранные.

Comlab: карточка товара — 04
Карточка товара
Характеристики, комплектации с кодами заказа и «Узнать цену» у каждой, документы, вопрос-ответ, похожие приборы. Липкие табы по разделам.

Comlab: оснащение лаборатории под ключ — 05
Оснащение лаборатории под ключ
Новый лендинг: типы лабораторий, форматы работы и кейсы оснащения.

Comlab: квиз-расчёт — 06
Квиз-расчёт
4 вопроса — перечень оборудования и смета; на каждом шаге видно, что получит инженер.

Макет · 1920 px

Страницы целиком

Смотреть в Figma ↗

Полный макет Comlab: категория — Категория

Полный макет Comlab: карточка — Карточка

Полный макет Comlab: оснащение — Оснащение

03 · Поведенческие механики

Чтобы инженер не ушёл без ответа

Механики заложены в ТЗ вместе с целями аналитики — после запуска видно, какой сценарий приводит к запросу.

«Узнать цену» у каждого кода

Микроконверсия вместо «Цены по запросу» без действия.

Вопрос инженеру

Кнопки «Задать вопрос» в листинге и карточке, модалка с быстрыми вопросами-чипсами, плавающая кнопка.

Квиз-подбор

В hero главной, промо-карточкой в сетке каталога и полным квизом на лендинге оснащения.

Липкие табы и панель цены

Навигация по разделам карточки и «Узнать цену» всегда на экране.

Вопрос-ответ на карточке

Ответы экспертов растят полезный текст страницы.

Лид-магниты

Каталог PDF, чек-лист оснащения, сравнение моделей на почту.

Цели Метрики

open_question
price_request
quiz_step_N
quiz_done
pdf_download
tel_click
messenger_click

04 · Результат

Дизайн-система и ТЗ, готовые к разработке

UI-kit: шапка, футер, карточка товара, кнопки, плавающая помощь, согласия и cookie
6 типов страниц и мега-меню в разрешении 1920 px
SEO-шаблоны Title, Description и H1, разметка Schema.org для каждого типа страниц
ТЗ на поведенческие механики и цели Метрики

Стек и инструменты

Аудит и SEO
UX/UI
Figma
UI-kit
Schema.org
Яндекс Метрика

Начнём с вашей задачи

Создадим вместе значимый продукт

Обсудить проект ↗