«Оптима Сервис» – B2B интернет-магазин и корпоративный сайт компании, которая производит и монтирует дорожное оборудование. Продуктом пользовались закупщики, подрядчики и застройщики: им важно быстро найти нужную категорию, подобрать товар под параметры, понять условия и стоимость поставки и перейти к заказу или заявке.
Сложность проекта была в ассортименте: часть продукции имела десятки вариаций по материалами, размерам, ГОСТам, монтажу и доставке, поэтому обычная карточка товара не закрывала сценарий подбора.
Старая версия сайта хуже работала на новых клиентов и конверсию: каталог был недостаточно заметным, путь до товара — длинным, а сложные категории продукции требовали слишком много действий до заявки.
Задача проекта – сократить этот путь, сделать подбор понятнее и усилить коммерчески важные страницы.
Проблема
Старый сайт решал базовую задачу для постоянных клиентов, но плохо работал на рост трафика, новых пользователей и конверсию. Каталог не был центром сценария, поэтому путь до нужного товара содержал лишние шаги, а в сложных категориях пользователь терялся в ассортименте в большом количестве похожий позиций без понимания вариативности и конфигураций под свою задачу.
Внутренние страницы тоже слабо работали на решение о заявке: структура была сложной, описания перегруженными, а выгоды, скидки, монтаж и примеры работ считывались недостаточно быстро. Из-за этого пользователь дольше разбирался в предложении и позже переходил к целевому действию.
Моя роль
Я отвечал за редизайн и развитие продукта со стороны UX/UI: пересобрал структуру страниц, каталог и логику подбора, проектировал новые разделы, калькуляторы и улучшения после запуска.
Вводные собирал через регулярные обсуждения с руководителем отдела интернет-продаж, разработчиками, маркетингом и командой, которая работала с контентом и товарами. Через эти обсуждения фиксировал, какие категории сложнее выбирать, где пользователи чаще упираются в подбор и какие разделы важнее обновлять первыми.
Инициировал идеи по новому функционалу, расставлял приоритеты по развитию и согласовывал итерации с руководителем отдела и командой разработки.
Для работы над продуктом я создал общую Figma группу для удобства взаимодействия с руководителем проекта, разработчиками, дизайнерами, фотографами и маркетологами. Это помогало синхронизировать дизайн, контент и разработку при регулярных обновлениях сайта.
Аудитория и сценарии
Сегменты и сценарии я выделил на основе рабочих обсуждений с командой продаж, анализа структуры заказов и специфики ассортимента: часть клиентов приходила за конкретной позицией, часть — за комплексным решением под объект.
| Сегмент | Потребности | Что важно |
|---|---|---|
| Закупщики / оптовые покупатели | Быстро найти нужную категорию, подобрать продукцию под параметры и оформить заказ или заявку на расчёт | Скорость, понятный каталог, скидки, точные параметры, доставка |
| Подрядчики / застройщики | Подобрать решение под объект или задачу и оформить заказ товаров или услуг «Под ключ» | Решения под ключ, монтаж, сроки, выгода, понятная структура |
| Постоянные клиенты | Быстро перейти к знакомым товарам и повторно оформить заказ без лишнего поиска | Быстрый доступ к каталогу, привычная логика, экономия времени |
| Новые клиенты | Ознакомиться с ассортиментом, сравнить предложения, убедиться в надёжности компании и оставить заявку | Оффер, доверие, примеры работ, преимущества, CTA |
Гипотезы
- Перенести каталог на главную страницу, чтобы сократить путь пользователя до товара и усилить основной коммерческий сценарий.
- Критерий успеха: больше переходов в категории и быстрее выход к заказу.
- Добавить калькуляторы быстрого подбора для сложных категорий, чтобы упростить сбор заказа и увеличить число заявок.
- Критерий успеха: пользователь понимает итоговую конфигурацию и может отправить заявку без ручного уточнения всех параметров у менеджера.
- Оформить внутренние страницы по landing-логике, чтобы они лучше работали на доверие, заявку и конверсию.
- Критерий успеха: пользователь видит оффер, выгоды, примеры работ и CTA до глубокого погружения в каталог.
- Унифицировать типовые блоки и паттерны страниц, чтобы новые разделы и гипотезы можно было запускать быстрее.
- Критерий успеха: ускорение разработки и создания новых разделов и страниц
Ключевые решения
Каталог на главной
Я перенес каталог на главную страницу и сделал его первой точкой входа в ассортимент, так как целевое действие пользователя на сайте – быстрый просмотр продукции и поиск нужного товара.
Так путь до каталога сократился на один промежуточный шаг. Пользователь сразу видит категории, поиск и фильтры на главной, не переходя сначала на отдельную страницу
Внутренние страницы по принципу Landing page
После ревизии внутренних страниц я пересобрал ключевые разделы каталога по landing-логике: оффер, преимущества, выгоды, примеры работ, доверительные блоки и CTA. Для B2B-аудитории это было важно, потому что часть пользователей приходила оценить решение под свой объект.
По итогу сделал внутренние страницы более конверсионными: пользователь получал оффер, выгоды, примеры работ и CTA ещё до погружения в полный каталог.
Калькуляторы подбора
Для сложных категорий товаров, где товар собирался под параметры клиента, я проектировал уникальные калькуляторы как сценарий быстрого подбора.
Логику калькуляторов собирал вокруг параметров, которые влияли на комплектацию и итоговую стоимость: материала, модели, размера, комплекта, монтажа и доставки. Это упростило подбор сложной продукции и сделало расчёт понятнее без перегруза лишними полями.
В каждом калькуляторе имеются доп услуги монтажа изделия с конечной ценой, потому что около 85% клиентов заказывали решения «Под ключ».
Дизайн система
Собрал дизайн систему из UI Guide, шаблонных блоков и карточек товаров под разную специфику изделий.
Собрал единую систему блоков, карточек и паттернов. За счёт этого команда могла быстрее запускать новые разделы, сезонные позиции и тестовые категории без пересборки дизайна с нуля.
Icon Kit
Для товарных категорий разработал набор уникальных иконок вместе с графическим дизайнером.
Стандартные библиотеки не подходили под специфику продукции, поэтому важно было сделать визуальные элементы, которые помогали быстро считывать разделы и поддерживали единый визуальный код каталога.
Итоги
В результате сократился путь до ключевого действия, упростился подбор сложной продукции, а внутренние страницы стали лучше работать на заявку. Это усилило продукт и для постоянных клиентов, и для новой B2B-аудитории.
- 2 года развития продукта и регулярных обновлений
- 60 переработанных страниц в новой дизайн системе
- +3,5% к конверсии после обновления главной страницы и ключевых разделов каталога, включая «Дорожные знаки»
- 12 000 пользователей в месяц — посещаемость на момент 2021 года
- Калькуляторы и новые сценарии подбора для флагманских категорий с вариативными параметрами
Для меня это кейс про B2B-UX и продуктовый подход в сложном каталоге: важнее всего не визуальная эффектность сама по себе, а проектирование интерфейса под запросы реальной аудитории – выгоды, быстрый подбор и минимальное количество лишних шагов до заявки.