Гибкие трубы и твердый UX: как мы превратили каталог полимерных труб в цифровой инструмент для инженеров

Главное о кейсе

ТВЕЛ-ПЭКС — завод с 24-летней историей, который производит гибкие полимерные трубы в ППУ-изоляции для теплосетей, ЖКХ и нефтегаза. В B2B-сегменте промышленных сайтов часто царит хаос из устаревших PDF-альбомов и нечитаемых таблиц. Опираясь на глубокую аналитику и разбор конкурентов, мы создали современный digital-хаб. Он не просто презентует продукцию, но и работает как инженерный навигатор, закрывая боли проектировщиков, закупщиков и монтажников. Сайт стал сильнейшим активом продаж, переведя сложные производственные смыслы на язык бизнеса.

Как проект изменил жизнь пользователей

Раньше инженерам и проектировщикам приходилось скачивать по десяткам PDF-файлов, чтобы подобрать фитинги, рассчитать радиус изгиба или сверить типоразмеры труб. Теперь вся номенклатура — от базовых PEX-A до армированных труб для экстремальных условий — структурирована в интерактивном каталоге с умными фильтрами.

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

Бизнес-задача и ее решение

Бизнес-задача: отстроиться от конкурентов, систематизировать огромный массив технической информации и создать интуитивный интерфейс, который будет вызывать доверие у профессионального B2B-сегмента (инженеров, представителей ЖКХ и нефтегаза) и при этом понятно объяснять преимущества частным клиентам (сегмент "для дома и дачи").

Как решили?
• Провели глубокий UX-аудит и парсинг сайтов конкурентов. Выявили главную боль рынка: сайты трубных заводов — это "склады PDF-файлов", а не сервисы.

• Спроектировали новую информационную архитектуру. Разделили сложные промышленные решения (ПАТ, нефтегаз, сети кондиционирования) и масс-маркет (ТВЭЛ-ЭКОПЭКС для дачи) на разные пользовательские сценарии.

• Разработали современный визуальный язык и UX-копирайтинг, который переводит сложные термины (PEX-A, PE-RT-II, антикислородный барьер) на язык бизнес-выгод (экономия на сварке, снижение тепловых потерь, 50 лет безаварийной работы).

• Внедрили умные таблицы номенклатуры и интерактивные подборки решений, адаптированные под любые устройства.

Крафт (мастерство), реализация, технические детали

Мы отказались от стандартных e-com «карточек товаров». Для сложного B2B-продукта карточка — это инженерный паспорт.

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

2. Визуализация сечений. Создали кастомные схемы труб в разрезе. Пользователь буквально «видит» слои ППУ-изоляции и армирующие нити из арамидного волокна, что критически важно для обоснования качества и стоимости.

3. Микроинтеракции. Добавили плавные переходы между разделами «Продукция» и «Решения». Скролл синхронизирован с появлением технических характеристик, создавая эффект «распаковки» сложного продукта.

4. Оптимизация для полевых условий. Несмотря на обилие данных, сайт летает. Мы оптимизировали загрузку тяжелых схем и применили lazy-loading, чтобы инженеры на объектах с плохой связью могли быстро открыть нужный узел.

5. Смысловой UX-копирайтинг. Переписали все описания. Вместо сухого «Труба из сшитого полиэтилена» — «Гибкий трубопровод, который разматывается из бухты, снижая затраты на рабочую силу и технику».

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Глубокая аналитика и «война с PDF»
На старте мы столкнулись с тем, что у заказчика терабайты инженерной документации. Гипотеза была такой: если просто перенести это на сайт, пользователь утонет в цифрах.

Инсайт №1: Таблица как главный элемент. Проектировщику не нужна «красивая картинка», ему нужны точные параметры (вес 1 п.м., минимальный радиус изгиба, рабочие бары). Мы сделали ставку на то, чтобы таблицы стали главным визуальным элементом, а не второстепенным приложением в подвале страницы.

Инсайт №2: Разный Tone of Voice для разных сегментов. Для нефтегаза и промышленности мы сохранили строгий инженерный язык и сделали акцент на экстремальных параметрах (давление до 25 МПа, работа при –60 °C). А для сегмента «Для дома и дачи» включили дружелюбный тон и добавили понятные сценарии («легко изгибается без спец-инструмента»).

Команда ТВЕЛ-ПЭКС глубоко погрузилась в процесс. Мы проводили совместные встречи с их технологами, чтобы убедиться, что каждое преимущество (например, «самокомпенсация» труб, устраняющая необходимость в неподвижных опорах) отражено корректно. Заказчик хотел «современный сайт», но мы убедили их, что в сложном B2B «современно» — это не просто градиенты, а безупречная эргономика работы с данными.

Прочая информация о кейсе

Трубы ТВЕЛ-ПЭКС служат до 50 лет без коррозии и зарастания. Мы подошли к разработке сайта с той же философией: заложили масштабируемую архитектуру и чистый код, чтобы digital-представительство завода оставалось быстрым и актуальным долгие годы.

Скриншоты