Разработали сайт для Climatec: объяснили сложное оборудование через 3D

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

Climatec производит системы форсуночного увлажнения воздуха для квартир, домов и офисов. К моменту старта у компании были устаревший сайт на WordPress и неудобное приложение: сложный и дорогой продукт плохо объяснялся, сценарии B2C и B2B смешивались, из-за этого Climatec теряли лиды уже на первом касании.

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

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

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

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

Что сделали:
– разделили целевые сегменты уже на главной странице, чтобы пользователи сразу понимали, куда идти;
– разработали отдельные страницы и оферы для B2C и B2B-аудиторий;
– вынесли преимущества оборудования в простые и наглядные блоки, которые одинаково эффективно работают для обеих групп.

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


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

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

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

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

Мы перестроили всю цифровую систему вокруг продукта и пользователей. Спроектировали решение из трех частей.

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

Цвет и стиль. Вместо ярких оттенков выбрали спокойную, живую палитру, которая вызывает ассоциации с природой и свежестью. Так визуал стал транслировать ценности бренда и усилил эмоциональное восприятие продукта.

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

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

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

Стек. Для фронтенда выбрали Next.js. Он ускоряет загрузку страниц, а еще помогает в SEO — страницы быстрее индексируются поисковыми системами. Бэкенд реализовали на Python, чтобы клиент мог легко подключать новые сервисы и интеграции. Например, уже на старте планировали интегрировать сайт с голосовыми помощниками.

Админка. Разработали гибкую систему управления контентом. Менеджеры могут самостоятельно добавлять новые материалы, обновлять каталог и вести базу знаний. Им не нужно привлекать для этого разработчиков.

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

Адаптивность. Сайт одинаково удобен на компьютере, планшете и смартфоне. Навигация, галереи и секвенция с 3D-анимацией корректно подстраиваются под любое разрешение экрана.


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

Чтобы пользователям было удобнее:
→ Сделали кнопку «Задать влажность везде», при необходимости человек может изменить параметры точечно для отдельных помещений.
→ Интегрировали техподдержку. Если возникла проблема, пользователь может отправить сообщение — все обращения поступают в админку Climatec. Там же оператор также прикрепляет документы по оборудованию: акт ввода в эксплуатацию, данные о прохождении ТО и другие файлы.
→ Настроили push-уведомления. Приложение напоминает о плановом обслуживании, предупреждает о просрочках и авариях.
→ Разработали Tелеграм-бота. Чтобы человек не пропускал важные сообщения, система дублирует уведомления в бота. Даже если приложение закрыто, уведомления о ТО и ошибках приходят вовремя.

3. Личный кабинет.
Для пользователей, которые не хотят устанавливать приложение, разработали веб-версию на React. Она полностью повторяет функционал мобильного интерфейса и позволяет управлять системой с ноутбука или компьютера.

Все модули работают на едином бэкенде, который связан с оборудованием Climatec и сервером управления установками. Админка одна: из нее команда клиента управляет контентом сайта, пользователями, объектами, оборудованием, заявками и уведомлениями.

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

Фишка проекта — иммерсивная 3D-анимация, которая объясняет работу оборудования. В инженерных нишах продукт часто показывают схемами и длинными текстами. Мы выбрали другой формат — 3D-анимацию на секвенции, которая наглядно объясняет, как работает система Climatec.

Главная сцена. На первом экране сайта — уютная комната с легким распылением из оборудования. Мы детально проработали поведение пара, и это была задачка со звездочкой: важно, чтобы пар выглядел реалистично, как мельчайшие капли воды, а не как дым. Пользователь скроллит и буквально погружается внутрь системы Climatec.

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

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

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

Эффект 3D-секвенции на главной страницы для аудиторий. Вместо схем и сухих описаний пользователи получают наглядную экскурсию по системе на примере 3D-модели квартиры. Такая подача решает сразу две задачи: B2C-сегмент сразу понимает ценность продукта — комфорт и здоровый воздух в доме, а B2B-аудитория видит технологичность решения и этапность процесса.

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

Скриншоты