Разработали корпоративный сайт для поставщика промышленного оборудования: объединили интерактивную 3D-презентацию производства, большой каталог, отраслевые решения, выполненные проекты, сервисные услуги и инструменты для получения технических заявок.
- B2B
- Промышленное оборудование
- 3D-анимация
- Сайт-каталог
- 1С-Битрикс
- Личный кабинет
Клиент пришёл к нам после просмотра кейса строительной компании «Севзапстальконструкция».
Логотип и одностраничный сайт для строительной компании «Севзапсталь»
Запоминающийся образ компании «Севзапсталь» в Интернете в качестве инструмента для развития бизнеса.
В том проекте центральным элементом сайта стал промышленный ангар, который постепенно строился прямо на глазах пользователя. Через процесс строительства сайт рассказывал о компетенциях компании и последовательно знакомил посетителя с этапами её работы. Для реализации идеи команда F5 создала отдельную 3D-модель здания, подобрала ракурс и освещение, а затем встроила её в сценарий страницы.
История в разных форматах
Запрос «Армада Групп» звучал примерно так:
Хотим такое же запоминающееся интерактивное решение, но применительно к промышленному оборудованию.
Мы решили не повторять старый проект буквально. Если в кейсе «Севзапстали» ангар был результатом работы компании, то на новом сайте он должен был стать пространством, внутри которого работает оборудование.
Так появилась идея интерактивного производственного ангара.
О компании
«Армада Групп» поставляет оборудование и комплексные решения для производства и обработки металлоконструкций.
Компания работает с предприятиями, выпускающими здания и ангары, металлические конструкции, спецтехнику и другую промышленную продукцию. На сайте представлены решения для обработки балки, металлического листа, труб, обечаек и углового проката, а также оборудование для лазерной резки, сварки, очистки и подготовки поверхности.
По данным компании, за 15 лет работы было поставлено более 500 единиц оборудования, а география обслуживания охватывает более 80 регионов России и стран СНГ.
С чего начали
У компании уже был работающий интернет-магазин, однако он был создан на базе готового решения и перестал соответствовать масштабу бизнеса.
Во время аудита мы выявили несколько системных проблем:
- Шаблонный дизайн не передавал технологичность и статус компании;
- Структура каталога была сложной для быстрого подбора оборудования; поиск по сайту работал некорректно;
- Карточки оборудования были перегружены и не имели единой логики;
- Информация о компании, проектах и сервисе была представлена фрагментарно;
- Часть функций интернет-магазина не соответствовала реальному сценарию B2B-продаж;
- Существовали проблемы со скоростью загрузки, формами и уведомлениями;
- Обработка персональных данных на сайте требовала приведения в соответствие с требованиями законодательства.
Задача
Нам предстояло создать сайт, который одновременно решает несколько задач:
- Формирует образ крупной и технологичной промышленной компании.
- Помогает инженеру или технологу быстро найти подходящее оборудование.
- Показывает не отдельные станки, а комплексные производственные решения.
- Подтверждает опыт компании через реализованные проекты и географию поставок.
- Собирает технически содержательные заявки, а не только имя и телефон.
- Поддерживает продажи на выставках, встречах и отраслевых мероприятиях.
- Позволяет клиентам работать с заказами и расходными материалами через личный кабинет.
- Может расширяться вместе с ассортиментом и бизнес-процессами компании.
Проект включал разработку структуры, прототипов, уникального дизайна, адаптивной версии, каталога, личного кабинета и интеграцию с CMS «1С-Битрикс: Управление сайтом».
Концепция
Ангар как интерактивная карта производства
Главная сложность заключалась в том, что ассортимент компании нельзя понятно представить обычной сеткой карточек.
Один станок выполняет только часть производственного процесса. Чтобы пользователь увидел ценность оборудования, ему нужно понимать:
- Какой материал обрабатывается;
- Какие операции необходимо выполнить;
- Какие станки участвуют в технологической цепочке;
- Какой результат получает предприятие.
Поэтому в центре главной страницы появился производственный ангар.
Пользователь не просто смотрит на здание, а последовательно знакомится с четырьмя основными направлениями:
- Обработкой и производством балки;
- Обработкой металлического листа;
- Обработкой углового проката;
- Обработкой труб и обечаек.
Каждое направление становится отдельной точкой входа в каталог. Из интерактивной сцены можно перейти к оборудованию, которое решает соответствующую производственную задачу.
Так визуальный эффект перестал быть декоративным элементом и стал частью навигации.
От идеи к сценарию
На старте у клиента была исходная 3D-модель здания, но её нельзя было просто разместить на сайте.
Нужно было:
- Определить подходящий ракурс ангара;
- Адаптировать геометрию под композицию главной страницы;
- Расположить внутри производственные зоны;
- Выбрать оборудование для каждого направления;
- Продумать последовательность появления объектов;
- Связать визуальные элементы с разделами каталога;
- Обеспечить понятную работу блока на разных экранах;
- Сохранить приемлемую скорость загрузки.
На этапе проектирования мы подробно описали технологические сценарии. Например, для производства балки предусматривалась последовательность операций: подготовка металлического листа, сварка, резка, обработка торцов и сверление. Аналогичные сценарии были разработаны для листа, трубы и углового проката.
3D-графику оптимизировали для использования в веб-интерфейсе: модель должна была сохранять наглядность, но не превращать главную страницу в тяжёлую техническую демонстрацию.
От оборудования — к задаче клиента
Мы построили структуру сразу в двух направлениях.
Через тип оборудования
Пользователь может перейти в каталог и выбрать одну из основных категорий:
- Оборудование для производства и обработки балки;
- Оборудование для обработки листа;
- Оборудование для труб и обечаек;
- Оборудование для углового проката;
- Дробеметное и дробеструйное оборудование;
- Станки для лазерной резки, сварки и очистки.
Через отраслевую задачу
Для пользователей, которые ещё не определились с конкретным станком, разработали страницы отраслевых решений:
- Здания и ангары;
- Производство спецтехники;
- Производство металлоконструкций.
На этих страницах оборудование представлено не через техническую классификацию, а через понятные бизнесу результаты: какие изделия можно выпускать, какие процессы автоматизировать и где сократить объём ручных операций.
Каталог сложного оборудования
Каталог спроектировали с учётом большого количества категорий и технических параметров.
Для быстрого поиска предусмотрели:
-
- Фильтрацию по характеристикам;
- Поиск по разделу;
- Разные варианты отображения карточек;
- Динамическую подгрузку результатов;
- Переходы между связанными категориями;
- Адаптивный сценарий фильтрации для смартфонов.
В фильтрах отображаются только те параметры и значения, которые действительно присутствуют у оборудования в выбранном разделе. Это позволяет не перегружать пользователя пустыми или нерелевантными характеристиками.
Карточка оборудования как самостоятельный лендинг
Для промышленного оборудования недостаточно фотографии, цены и кнопки «Купить».
Стоимость и комплектация зависят от производственной задачи, размеров заготовок, требуемых операций и конфигурации линии. Поэтому детальную страницу построили как полноценную посадочную страницу.
В неё вошли:
- Крупные фотографии и видеоматериалы;
- Описание назначения оборудования;
- Технические характеристики;
- Варианты комплектации;
- Стоимость или возможность запросить расчёт;
- Схемы и технические особенности;
- Оборудование для обработки листа;
- Примеры выполненных проектов;
- Связанное оборудование;
- Форма обращения.
Так менеджер может отправить клиенту ссылку не на общий каталог, а на готовую презентацию конкретного решения.
Опросный лист: онлайн или в файле
В сложных B2B-продажах заявка «Имя + телефон» практически бесполезна. Чтобы подготовить предложение, специалистам компании необходимо заранее узнать параметры будущего производства.
Поэтому для оборудования предусмотрели работу с опросными листами.
Клиент может:
- Заполнить данные непосредственно на сайте;
- Скачать документ и подготовить его вместе с технологом;
- Приложить заполненный файл к заявке.
Сайт не пытается автоматически рассчитать окончательную стоимость сложной линии. Его задача — собрать структурированные исходные данные и передать их специалистам «Армада Групп» для подбора решения.
Показываем не каталог, а опыт компании
Проекты вместо коротких новостей
На старом сайте сведения о поставках и запусках оборудования часто публиковались в виде коротких новостей.
Мы выделили выполненные работы в самостоятельный раздел проектов. Теперь каждый проект может содержать:
- Название и год реализации;
- Регион;
- Поставленное оборудование;
- Описание решённой задачи;
- Фотографии монтажа и запуска;
- Результат внедрения;
- Ссылки на похожее оборудование.
На главной странице проекты работают как доказательство компетенций компании. Пользователь видит не обещания, а реальные поставки, монтаж и запуск оборудования на промышленных предприятиях.
Сервис как часть продукта
Покупка станка — только начало взаимодействия с поставщиком.
Поэтому отдельно раскрыли полный цикл сопровождения:
- Монтаж;
- Обучение сотрудников;
- Гарантийное обслуживание;
- Техническую поддержку и ремонт.
Сервисные направления связали с оборудованием и формами обращения. Потенциальный клиент сразу понимает, что получает не только поставку, но и помощь при запуске и дальнейшей эксплуатации.
Отраслевая экспертиза и доверие
На главной странице собрали доказательства масштаба компании:
- Опыт работы;
- Количество поставленного оборудования;
- Географию обслуживания;
- Логотипы клиентов и партнёров;
- Выполненные проекты;
- Сервисные компетенции;
- Новости и участие в отраслевых мероприятиях.
Это особенно важно в продаже дорогостоящего промышленного оборудования, где решение принимается не после одного посещения сайта, а в течение длинного цикла переговоров.
Сайт для выставок и деловых мероприятий
«Армада Групп» регулярно участвует в отраслевых выставках, поэтому мы заложили в архитектуру отдельные инструменты для офлайн-продаж.
На сайте можно:
- Публиковать анонсы мероприятий;
- Предложить посетителю записаться на бизнес-встречу;
- Подписаться на новые анонсы;
- Перейти к оборудованию, представленному на стенде;
- Заполнить технический опросный лист;
- Оставить заявку после переговоров.
Пресс-центр объединяет новости, выставки и профессиональные материалы, а подписки позволяют продолжать коммуникацию с потенциальным клиентом после первого контакта..
Личный кабинет и расходные материалы
Помимо основного оборудования, компания поставляет расходные материалы.
Для постоянных клиентов предусмотрели:
- Регистрацию и авторизацию;
- Корзину;
- Оформление заказа;
- Хранение личных данных;
- Просмотр истории заказов;
- Повторную работу с ранее выбранными позициями.
При этом оборудование и расходные материалы разделены по логике покупки. Расходники можно оформить через привычный сценарий заказа, а сложное промышленное оборудование требует консультации и подготовки индивидуального предложения.
Работа с контентом
Вместе с новой архитектурой мы переносили материалы со старого сайта и адаптировали их под новые шаблоны.
Короткие технические публикации превращали в более содержательные страницы, но не дополняли характеристики без согласования с заказчиком. Для промышленного проекта важно было сохранить точность терминологии: красивый маркетинговый текст не должен искажать параметры оборудования или технологический процесс.
Для управления содержанием разработали универсальные шаблоны. Команда заказчика может самостоятельно добавлять:
- Оборудование;
- Расходные материалы;
- Выполненные проекты;
- Новости и мероприятия;
- Фотографии и видео;
- Документы;
- Отраслевые решения.
Результат
Вместо шаблонного интернет-магазина «Армада Групп» получила полноценную цифровую платформу для промышленного B2B.
Новый сайт:
- Визуально выделяет компанию среди поставщиков оборудования;
- Объясняет сложные производственные процессы через интерактивный ангар;
- Помогает подбирать решения как по типу станка, так и по отраслевой Задаче;
- Связывает оборудование с проектами, сервисом и техническими Материалами;
- Собирает более содержательные заявки;
- Поддерживает работу менеджеров на выставках и переговорах;
- Позволяет развивать каталог без изменения общей архитектуры;
- Работает как презентация опыта и как практический инструмент продаж.
Главный образ сайта — ангар — стал логическим продолжением кейса, с которого началось знакомство клиента с F5.
Но в новом проекте мы пошли дальше: не просто показали, как строится промышленный объект, а дали пользователю возможность заглянуть внутрь производства и увидеть, какое оборудование заставляет его работать.
