Сайт для AGV: придумали нестандартный каталог и в два раза увеличили переходы в карточки товаров

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

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

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

✔️ Конкретизировали список задач:

• проанализировали работу текущего сайта, изучили нишу и запросы целевой аудитории, определили основные боли потенциальных клиентов, их сложности при взаимодействии с AGV;

• изучили сайты конкурентов и компаний, близких по тематике, чтобы найти интересные решения.

✔️ Обновили семантическое ядро и разработали новую структуру сайта.

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

✔️ Создали новый дизайн:

• разработали 3D-модель газопоршневого компрессора, которая стала важным элементом навигации сайта;

• создали понятный и удобный каталог;

• с помощью типографики расставили нужные акценты, подчеркнули сильные стороны компании;

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

✔️ Сверстали и разработали сайт, протестировали и запустили его в работу.

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

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

• о качестве товаров и процессах разработки,

• об установке и послепродажном обслуживании,

• о гарантийном обслуживании,

• о самой компании, ее истории, кейсах и заказчиках.

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

В результате у нас сформировался вот такой список задач:

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

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

3. Рассказать о компании, ее опыте и задачах, с первых же страниц сайта формировать доверие к AGV.

4. Расширить раздел «О компании» и добавить в общей сложности более 10 новых страниц о производстве и проектах AGV.

5. Добавить на сайт новый раздел «Карьера», который поможет сформировать успешный образ работодателя и привлечет внимание кандидатов.

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

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

• о сфере деятельности,

• о продукции,

• о выгодах сотрудничества с AGV и т.д.

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

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

3D-модель — это не просто демонстрация продукции AGV, но и необычный элемент навигации. На изображении мы отметили цифрами-ссылками те узлы в конструкции, для которых компания производит запчасти. При наведении курсора появляется пояснение — мини-карточка продукции, а по клику можно перейти в полноценную карточку изделия в каталоге.

Эта модель так понравилась клиенту, что он использует ее не только на сайте, но и в других маркетинговых материалах.

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

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

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

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

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

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

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

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

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

Фронтенд сайта реализовали на базе React+Next.js — тем самым повысили скорость загрузки страниц и улучшили индексацию поисковыми системами.

В качестве CMS мы использовали WordPress — он удобен в управлении контентом, что важно для заказчика.

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

✔️ Глубина просмотра увеличилась в 1,7 раза

✔️ Время, проведенное пользователями на сайте, выросло в 2,5 раза

✔️ Показатель отказов сократился в 1,77 раза

✔️ Благодаря использованию React+Next.js мы добились максимальных показателей производительности сайта: мобильная версия получила 100 баллов по результатам тестирования в Lighthouse, а десктопная — 98 баллов.

Мы закрыли все задачи, которые поставил перед нами заказчик:

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

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

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

Заказчик отдельно отметил результат создания нового каталога — 40% посетителей нового сайта переходят в карточки товаров, это в два раза больше, чем было на старом сайте.