Интерактивный ангар и сайт-каталог промышленного оборудования для «Армада Групп»

Нам предстояло создать сайт, который одновременно решает несколько задач:

• Формирует образ крупной и технологичной промышленной компании.

• Помогает инженеру или технологу быстро найти подходящее оборудование.

• Показывает не отдельные станки, а комплексные производственные решения.

• Подтверждает опыт компании через реализованные проекты и географию поставок.

• Собирает технически содержательные заявки, а не только имя и телефон.

• Поддерживает продажи на выставках, встречах и отраслевых мероприятиях.

• Позволяет клиентам работать с заказами и расходными материалами через личный кабинет.

• Может расширяться вместе с ассортиментом и бизнес-процессами компании.

Проект включал разработку структуры, прототипов, уникального дизайна, адаптивной версии, каталога, личного кабинета и интеграцию с CMS «1С-Битрикс: Управление сайтом».

«Армада Групп» поставляет оборудование и комплексные решения для производства и обработки металлоконструкций.

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

По данным компании, за 15 лет работы было поставлено более 500 единиц оборудования, а география обслуживания охватывает более 80 регионов России и стран СНГ.

История в разных форматах

Запрос «Армада Групп» звучал примерно так:

Хотим такое же запоминающееся интерактивное решение, но применительно к промышленному оборудованию.

Мы решили не повторять старый проект буквально. Если в кейсе «Севзапстали» ангар был результатом работы компании, то на новом сайте он должен был стать пространством, внутри которого работает оборудование.

С чего начали

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

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

• Шаблонный дизайн не передавал технологичность и статус компании;

• Структура каталога была сложной для быстрого подбора оборудования; поиск по сайту работал некорректно;

• Карточки оборудования были перегружены и не имели единой логики;

• Информация о компании, проектах и сервисе была представлена фрагментарно;

• Часть функций интернет-магазина не соответствовала реальному сценарию B2B-продаж;

• Существовали проблемы со скоростью загрузки, формами и уведомлениями;

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

Концепция

Ангар как интерактивная карта производства

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

• Какой материал обрабатывается;

• Какие операции необходимо выполнить;

• Какие станки участвуют в технологической цепочке;

• Какой результат получает предприятие.

Поэтому в центре главной страницы появился производственный ангар.

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

• Обработкой и производством балки;

• Обработкой металлического листа;

• Обработкой углового проката;

• Обработкой труб и обечаек.

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

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

От идеи к сценарию

На старте у клиента была исходная 3D-модель здания, но её нельзя было просто разместить на сайте.

Нужно было:

• Определить подходящий ракурс ангара;

• Адаптировать геометрию под композицию главной страницы;

• Расположить внутри производственные зоны;

• Выбрать оборудование для каждого направления;

• Продумать последовательность появления объектов;

• Связать визуальные элементы с разделами каталога;

• Обеспечить понятную работу блока на разных экранах;

• Сохранить приемлемую скорость загрузки.

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

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

От оборудования — к задаче клиента

Мы построили структуру сразу в двух направлениях.

Через тип оборудования

Пользователь может перейти в каталог и выбрать одну из основных категорий:

• Оборудование для производства и обработки балки;

• Оборудование для обработки листа;

• Оборудование для труб и обечаек;

• Оборудование для углового проката;

• Дробеметное и дробеструйное оборудование;

• Станки для лазерной резки, сварки и очистки.

Через отраслевую задачу

Для пользователей, которые ещё не определились с конкретным станком, разработали страницы отраслевых решений:

• Здания и ангары;

• Производство спецтехники;

• Производство металлоконструкций.

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

Каталог сложного оборудования

Каталог спроектировали с учётом большого количества категорий и технических параметров.

Для быстрого поиска предусмотрели:

• Фильтрацию по характеристикам;

• Поиск по разделу;

• Разные варианты отображения карточек;

• Динамическую подгрузку результатов;

• Переходы между связанными категориями;

• Адаптивный сценарий фильтрации для смартфонов.

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

Карточка оборудования как самостоятельный лендинг

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

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

В неё вошли:

• Крупные фотографии и видеоматериалы;

• Описание назначения оборудования;

• Технические характеристики;

• Варианты комплектации;

• Стоимость или возможность запросить расчёт;

• Схемы и технические особенности;

• Оборудование для обработки листа;

• Примеры выполненных проектов;

• Связанное оборудование;

• Форма обращения.

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

Опросный лист: онлайн или в файле

В сложных B2B-продажах заявка «Имя + телефон» практически бесполезна. Чтобы подготовить предложение, специалистам компании необходимо заранее узнать параметры будущего производства.
Поэтому для оборудования предусмотрели работу с опросными листами.

Клиент может:

• Заполнить данные непосредственно на сайте;

• Скачать документ и подготовить его вместе с технологом;

• Приложить заполненный файл к заявке.

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

Показываем не каталог, а опыт компании

Проекты вместо коротких новостей

На старом сайте сведения о поставках и запусках оборудования часто публиковались в виде коротких новостей. Мы выделили выполненные работы в самостоятельный раздел проектов. Теперь каждый проект может содержать:

• Название и год реализации;

• Регион;

• Поставленное оборудование;

• Описание решённой задачи;

• Фотографии монтажа и запуска;

• Результат внедрения;

• Ссылки на похожее оборудование.

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

Сервис как часть продукта

Покупка станка — только начало взаимодействия с поставщиком.

Поэтому отдельно раскрыли полный цикл сопровождения:

• Монтаж;

• Обучение сотрудников;

• Гарантийное обслуживание;

• Техническую поддержку и ремонт.

Сервисные направления связали с оборудованием и формами обращения. Потенциальный клиент сразу понимает, что получает не только поставку, но и помощь при запуске и дальнейшей эксплуатации.

Отраслевая экспертиза и доверие

На главной странице собрали доказательства масштаба компании:

• Опыт работы;

• Количество поставленного оборудования;

• Географию обслуживания;

• Логотипы клиентов и партнёров;

• Выполненные проекты;

• Сервисные компетенции;

• Новости и участие в отраслевых мероприятиях.

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

Сайт для выставок и деловых мероприятий

«Армада Групп» регулярно участвует в отраслевых выставках, поэтому мы заложили в архитектуру отдельные инструменты для офлайн-продаж.

На сайте можно:

• Публиковать анонсы мероприятий;

• Предложить посетителю записаться на бизнес-встречу;

• Подписаться на новые анонсы;

• Перейти к оборудованию, представленному на стенде;

• Заполнить технический опросный лист;

• Оставить заявку после переговоров.

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

Личный кабинет и расходные материалы

Помимо основного оборудования, компания поставляет расходные материалы.

Для постоянных клиентов предусмотрели:

• Регистрацию и авторизацию;

• Корзину;

• Оформление заказа;

• Хранение личных данных;

• Просмотр истории заказов;

• Повторную работу с ранее выбранными позициями.

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

Работа с контентом

Вместе с новой архитектурой мы переносили материалы со старого сайта и адаптировали их под новые шаблоны.

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

Для управления содержанием разработали универсальные шаблоны. Команда заказчика может самостоятельно добавлять:

• Оборудование;

• Расходные материалы;

• Выполненные проекты;

• Новости и мероприятия;

• Фотографии и видео;

• Документы;

• Отраслевые решения.

Вместо шаблонного интернет-магазина «Армада Групп» получила полноценную цифровую платформу для промышленного B2B.

Новый сайт:

• Визуально выделяет компанию среди поставщиков оборудования;

• Объясняет сложные производственные процессы через интерактивный ангар;

• Помогает подбирать решения как по типу станка, так и по отраслевой Задаче;

• Связывает оборудование с проектами, сервисом и техническими Материалами;

• Собирает более содержательные заявки;

• Поддерживает работу менеджеров на выставках и переговорах;

• Позволяет развивать каталог без изменения общей архитектуры;

• Работает как презентация опыта и как практический инструмент продаж.

Главный образ сайта — ангар — стал логическим продолжением кейса, с которого началось знакомство клиента с F5.

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