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