Содержание
- Клиент
- Задача
- Решение
- Аналитика и структура сайта
- Дизайн и визуальные решения
- Каталог и карточки оборудования
- Производство и конструкторский отдел
- Услуги и проекты
- Результат
Клиент
ТПП «Титан» — российский производитель крупногабаритного оборудования для нефтегазовой, энергетической и химической промышленности. Компания выпускает емкостное, теплообменное, сепарационное и блочно-комплектное оборудование.
Задача
Заказчик обратился к нам за разработкой нового корпоративного сайта. Ранее производство с двумя площадками и собственным конструкторским отделом было представлено на шаблонных страницах. Сайт не отражал ни масштаб компании, ни ее инженерные компетенции. Заказчик показывает на нем производство и собирает заявки.
Прошлая версия сайта ТПП «Титана»
Задачи:
- Доверие к производителю. Показать оснащение цехов, оборудование, контроль качества и собственную испытательную базу.
- Каталог под инженерный выбор. Разложить продукцию по типам и наполнить карточки характеристиками, параметрами и документами, чтобы специалист оценил реализуемость своей задачи.
- Доказательства опыта. Сегментировать выполненные проекты по отраслям и регионам и связать их с продукцией из каталога.
- Понятный путь к сделке. Дать деловые сценарии — обсудить проект, получить расчет, скачать опросный лист и пригласить в тендер.
- Готовность к поиску и рекламе. Спроектировать структуру и адреса страниц под спрос.
- Самостоятельное наполнение. Собрать административную панель так, чтобы команда публиковала карточки оборудования, проекты и документы без разработчиков.
- Масштабирование. Заложить добавление новых разделов, производственных площадок и типов продукции.
Решение
Мы разработали корпоративный сайт для торгово-промышленного предприятия «Титан». Страницы показывают производство и продукцию компании, а пользовательские пути выстроены так, чтобы привести заказчика к запросу расчета.
Наша команда уже создавала корпоративные сайты для промышленности — проектному институту «Сибгипрошахт» и металлотрейдеру «Брок-Инвест-Сервис». Перед стартом проекта мы провели аудит прежней версии, проанализировали девять сайтов конкурентов и провели кастдевы с командой ТПП «Титана» о производстве и клиентах. Поисковый спрос собрали в кластеры и свели выводы в навигационную карту, по которой выстроили структуру каталога и путь пользователя.
Главная страница обновленного сайта для клиента
Что сделали:
- Собрали каталог из восьми направлений. Разложили продукцию по типам и параметрам, чтобы специалист попадал на нужную страницу из поиска.
- Наполнили карточку изделия технической частью. Добавили характеристики, таблицы параметров, технические требования и опросный лист — заказчик оценивает решение заранее.
- Раскрыли производство через видео и фактуру цеха. Развернули полный цикл на девять этапов, отдельно вынесли контроль качества и собственную испытательную базу.
- Сегментировали проекты по отраслям и регионам. Запустили интерактивную карту поставок и связали проекты с оборудованием из каталога.
- Разложили инженерные услуги на семь направлений. На странице каждой услуги показали этапы работ, поэтому заказчик видит порядок и зоны ответственности еще до первого разговора с менеджером.
- Перевели обращения в деловые сценарии. Оформили формы под обсуждение проекта, расчет и приглашение в тендер.
- Настроили административную панель под самостоятельное ведение. Развели роли доступа и подключили редактор блоков, чтобы команда своими силами добавляла оборудование, проекты и документы.
- Подготовили сайт к продвижению. Задали адреса страниц и шаблоны метатегов, подключили Яндекс Метрику и Вебмастер.
Аналитика и структура сайта
Наша команда аналитиков выяснила, как в промышленности выбирают поставщика оборудования. На сайт приходят три типа пользователей:
- Технический заказчик. Инженер, проектировщик или специалист отраслевого института. Приходит с конкретной технической задачей, поэтому ищет по типу аппарата, параметрам, ГОСТам и аналогам импортного оборудования. Сравнивает подрядчиков и возвращается на сайт на разных этапах проработки. Ему нужны материалы, рабочая среда, давление, температура и конструктив — по ним он понимает, реализуема ли задача в его условиях.
- Служба эксплуатации. Специалисты, которые будут непосредственно работать с аппаратом. Судят по тому, как оборудование поведет себя в реальных условиях, поэтому смотрят фотографии производства, готовые изделия и технологию сварки. Ищут похожие внедрения и обращают внимание на обслуживание и ремонтопригодность.
- Руководство и отдел закупок. Те, кто утверждает подрядчика внутри компании. Сравнивают поставщиков по рискам, прозрачности и управляемости процесса, а в технические детали могут не погружаться, хотя их наличие считают признаком зрелости. Ищут этапы, сроки, зоны ответственности, документы и сертификаты, а также понятный способ выйти на контакт и пригласить в тендер.
Целевая аудитория
Чтобы понять, что работает в отрасли, мы прошли по девяти сайтам конкурентов, провели экспертное интервью с командой ТПП «Титана» и собрали поисковый спрос по типам оборудования. На основе инсайтов создали структуру будущего сайта.
Навигационная карта сайта
Специалист ищет конкретный аппарат с нужными параметрами. Поэтому каталог развели на восемь направлений, а внутри еще разбили на группы и отдельные изделия — точный запрос вроде «теплообменники с плавающей головкой» ведет сразу на страницу товара.
Структура каталога
По полученным картам и сценариям собрали прототипы страниц.
Прототипы по структуре сайта
Дизайн и визуальные решения
Визуальный язык выстроили на основе мудборда и пожеланий клиента. Добавили темно-синий фон, мятный акцент и светлые страницы под технические блоки. Те же цвета стоят на самих аппаратах и в документах компании, поэтому сайт и продукция читаются как одно целое.
Клиенту хотелось промышленной стилистики, но при этом легкой для восприятия. Поэтому в макетах много воздуха, а основой стала живая фактура — снимки цехов, станков и готовых аппаратов.
Концепция сайта
На дизайн-концепции мы показали ключевую идею и стилистику. На первом экране аппарат сначала нарисован линиями, как в конструкторской документации, а затем постепенно обретает объем и на экране остается цельная 3D-модель вакуумного конденсатора с логотипом на корпусе. Логику потока сверяли с заказчиком, чтобы анимация совпадала с реальной физикой процесса. Сначала заполняется нижняя камера, потом верхняя, и только после этого рабочая среда уходит дальше.
При наведении на блоки всплывает фирменный узор — рисунок трубного пучка, который виден внутри емкости. Тот же мотив мы показали в ролике на первом экране, поэтому продукция узнается и в графике сайта.
Географию поставок показали на интерактивной 3D-карте. Беларусь и Казахстан выделены мятным оттенком, а метки городов стоят во всех трех странах. Так заказчик оценивает охват еще на главной, до перехода в каталог и проекты.
Для прелоадера собрали короткую анимацию в стиле компании. Между блоками идет крупная надпись ТПП «Титан» со свечением — она задает ритм длинным страницам и закрепляет имя компании.
Все правила свели в UI kit. В него вошли цветовые решения, шрифты и библиотека компонентов. Для сайта, где на каждой странице указаны обозначения и характеристики, это помогает корректно выстраивать верстку, а новые страницы собирать из готовых блоков без переделки дизайна.
Библиотека компонентов
Каталог и карточки оборудования
Стандартных изделий у ТПП «Титана» почти нет, каждый аппарат создают под условия клиента. Поэтому каталог показывает карту производственных возможностей, а доказательства экспертизы собраны в разделе проектов.
Весь каталог оборудования мы вынесли в выпадающее меню с восемью направлениями. Так специалист попадает в нужную группу за одно действие. Рядом в шапке находится поиск по сайту, он выводит изделия и разделы по названию.
Выпадающее меню каталога
На странице категории оборудование разложено по табам, а карточки помечены отраслями, для которых оно подходит. Сами категории показываем с помощью 3D-моделей аппаратов, поэтому каталог выглядит цельно, а продукция читается одинаково понятно во всех разделах. Ниже идет блок сфер применения, где для каждой отрасли расписаны свои задачи. Так специалист сразу видит, работает ли компания с его условиями.
Страница категории оборудования
В карточке изделия мы собрали всю техническую часть. Сверху идет галерея с фотографиями и объемными моделями аппарата, рядом — области применения, ниже — характеристики, технические параметры и таблицы основных размеров. Отдельными блоками добавили описание с принципом работы и конструкцией, а также документы с требованиями по ТУ и ГОСТу. По этим данным инженер самостоятельно оценивает, подходит ли аппарат под его рабочую среду, давление и температуру.
Карточка изделия с характеристиками и таблицами
При прокрутке в карточке закрепляется лента навигации с кнопками «Опросный лист» и «Запросить расчет». По нажатию на первую кнопку открывается документ, заказчик заполняет в нем параметры под свою группу оборудования и прикладывает файл к заявке. Также на странице каталога есть форма «Пригласить в тендер» с названием компании, сроками и вложением файлов. Для промышленных закупок это привычный способ входа в сделку.
Производство и конструкторский отдел
ТПП «Титан» изготавливает оборудование, начиная с этапа проектирования до монтажа на площадке заказчика. Этот путь мы разбили на девять шагов, у каждого свой слайд с фотографией и описанием. Открывает страницу производства видео из цехов, коллаж со станками, сборкой и покраской. Служба эксплуатации смотрит именно на такие кадры и понимает, в каких условиях создают оборудование.
Проверку качества показали в три уровня — входной контроль материалов, проверки в процессе производства и испытания готовой продукции. Отдельно мы показали собственную испытательную базу и орбитальную сварку, которую компания выделяет среди своих преимуществ. Добавили форму «Посетить предприятие», потому что на завод можно приехать и посмотреть на все это своими глазами. Это дополнительная точка доверия для клиентов.
Страница производства
К ТПП «Титану» приходят с индивидуальными заказами, поэтому конструкторскому отделу отвели отдельную страницу. Его работы разложили на восемь направлений, среди них проектирование с нуля, инженерные расчеты, разработка конструкторской документации и адаптация европейских чертежей под российские стандарты. Для заказчика с нетиповой задачей это главный аргумент, потому что всю подготовку делают внутри компании, до запуска в производство.
Страница конструкторского отдела
Услуги и проекты
Кроме оборудования ТПП «Титан» берет инженерные задачи — восстановить документацию на узел, подобрать аналог импортному аппарату и отремонтировать теплообменник. Мы собрали все в семь услуг, каждая со своей страницей. Тут же компания показывает аттестацию технологии по НАКС и работу с жаропрочными сталями и титаном.
Все услуги
Каждая страница услуги объясняет, что это за работа, в каких ситуациях она нужна и из каких этапов состоит. Например, обратный инжиниринг разложен на пять шагов — от обследования и снятия мерок до передачи документации заказчику. Руководство и отдел закупок видят порядок работ и зоны ответственности.
Услуговая страница
Выполненные заказы мы вынесли в отдельный раздел с фильтрами по типам оборудования. У каждого проекта — своя страница с галереей фотографий и видео, характеристиками и описанием принципа работы. Проект внизу ведет к услугам, а услуга — к выполненным проектам. Технический заказчик находит похожую задачу и оттуда же заказывает работу.
Страница проекта
Результат
Мы разработали и запустили корпоративный сайт для ТПП «Титана», который презентует инженерные компетенции и доводит клиента до запроса расчета. Визуал цехов и конструкторского отдела усиливают доверие, а выполненные проекты и услуги показывают, что похожие задачи компания уже решала.
Итоги:
- Разложили продукцию по восьми направлениям. Внутри показаны группы и отдельные изделия, поэтому точный запрос приводит специалиста сразу на страницу оборудования.
- Показали производство изнутри. Видео из цехов, девять шагов цикла и собственная испытательная база отвечают на главный вопрос службы эксплуатации — в каких условиях делают аппарат.
- Собрали доказательства опыта. Каждый выполненный заказ показан отдельной страницей и связан с услугой, которая его закрывает.
- Дали заказчику привычные формы закупки. Опросный лист, запрос расчета и приглашение в тендер попадают в Битрикс24 вместе с заявкой.
- Передали сайт команде клиента. Продукцию, проекты и документы ТПП «Титан» публикует через административную панель без обращения к разработчикам.
- Заложили запас на рост. Новые разделы, производственные площадки и типы продукции добавляются без переделки сайта.
- Открыли сайт поисковым системам. Адреса страниц, шаблоны метатегов и подключенная аналитика дают базу для поискового продвижения и рекламы.
Компания получила сайт, который показывает производство, раскрывает продукцию и подтверждает опыт выполненными проектами.
