Корпоративный сайт для поставщика крепежа: удобный каталог, калькулятор и более 4 000 заявок за год

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

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

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

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

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

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

Главный экран спроектирован так, чтобы сразу вести к целевому действию — переходу в каталог, который становится центром внимания. Здесь размещён баннер с актуальным предложением и изображением типового товара. 

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

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

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

в палитру собрали оттенки красного, синего, холодного светло-голубого и серого, чтобы передать ощущение профессионализма. Главный экран выполнен в формате галереи: пользователь сразу может перейти в нужную группу товаров. Контрастные кнопки, четкое разделение блоков и лаконичная визуальная структура помогают быстрее ориентироваться на сайте и переходить к ключевым разделам. 

Для заголовков мы выбрали строгий и современный шрифт Oswald, который подчеркивает минимализм дизайна. Основной текст выполнен шрифтом Roboto — у него отличная читаемость на любых устройствах и в интерфейсах с большим количеством текстовой информации. 

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

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

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

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

Также продумали удобную административную панель, ориентированную на повседневную работу менеджеров. 

Особое внимание уделили скорости и простоте загрузки товаров: реализовали быстрый процесс импорта данных, включая автоматическое заполнение таблиц размеров из файлов поставщиков. Для этого используется функциональность плагина TablePress. Все значения для метизов — размеры, вес, количество в упаковке и другие параметры — вносятся автоматически, что значительно сокращает объем ручной работы и позволяет быстрее актуализировать каталог.

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

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

Калькулятор работает без перезагрузки страницы и мгновенно пересчитывает значения при изменении параметров. Интерфейс адаптирован под мобильные устройства и десктопы.

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

На начальном этапе запустились на Поиске, а в дальнейшем таргетировались с помощью РСЯ.

Мы начали с анализа конкурентов и сбора семантического ядра по общим запросам и огромному ассортименту продукции. Кампании разделили: сделали одну по общим запросам и несколько по основным и самым популярным видам продукции (болты, винты, гайки). Также разделили рекламу по регионам — Центр, Северо-Запад, Юг, Урал и Поволжье, чтобы гибко распределять бюджет в пользу наиболее результативных зон.

Показ рекламы ограничили рабочими часами — по будням с 9:00 до 18:00, когда целевая аудитория наиболее активна. С первых дней придерживались стратегии ручных ставок, что дало полный контроль над трафиком и исключило переобучение алгоритмов при остановках кампаний. Регулярно тестировали объявления, анализировали CTR, CPC и конверсии, перераспределяя бюджет на самые эффективные кампании.

За все время реклама принесла более 3 миллиона показов, 36 000 кликов и свыше 150 000 конверсий. Средняя стоимость достижения цели составила 139 рублей, а цену клика удалось снизить с 34 до 14 рублей. 

[1] Глубокое погружение в продукт и структуру ассортимента.

Тщательно изучили специфику рынка и ассортимент заказчика, чтобы выстроить логичную структуру каталога. Все позиции — от анкеров до гаек — сгруппированы в чёткие категории. Учитывая, что основная аудитория — менеджеры по закупкам и сотрудники производств, сделали упор на скорость, точность и готовые решения для быстрого оформления заказа.

[2] Фокус на визуальной лаконичности и функциональности.

Дизайн сайта выполнен в строгом минималистичном стиле, который учитывает специфику отрасли, что позволяет сосредоточить внимание на продукции, а не на декоративных элементах. В основе — фирменные цвета, чёткая типографика и простая навигация.

[3] Маркетинговая стратегия и продвижение.

Запустили рекламные кампании в Яндекс.Директ с детальной сегментацией по запросам и регионам. Снизили стоимость клика в 2,5 раза, получили более 4 000 целевых обращений и показались более 1 млн раз.