Climatec: сайт и экосистема сервисов для систем форсуночного увлажнения воздуха

Climatec — российская компания, которая разрабатывает и обслуживает системы форсуночного увлажнения воздуха для квартир, домов, офисов и коммерческих пространств.

Исторически у Climatec уже был сайт, который хорошо работал по SEO и приводил органический трафик. Но бизнес рос, и сайт перестал справляться с задачами продаж и коммуникации: не помогал пользователям быстро понять, какие решения предлагает компания, и не выстраивал логичный путь взаимодействия. Платформа на WordPress была перегружена, а мобильная версия — неудобной.

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

Climatec пришли с запросом на комплексную цифровизацию, в центре которой — разработка нового сайта. Перед нами стояли три уровня задач:

1. Сайт как первая точка контакта — понятно объяснить, чем занимается компания и как работает система форсуночного увлажнения.

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

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

Задачу разбили на этапы и последовательно прошли их:

→ проанализировали поведение пользователей, разделили B2C и B2B-аудитории, пересобрали информационную архитектуру и навигацию;

→ обновили визуальную концепцию и айдентику, сделали главную с визуальным сторителлингом и иммерсивной 3D-анимацией работы системы;

→ спроектировали техническую архитектуру: единый бэкенд между сайтом, приложением и сервером ОВЕН, понятную логику команд и логирование;

→ разработали быстрый адаптивный сайт на Next.js и Python с SEO-дружелюбной структурой;

→ создали экосистему сервисов: мобильное приложение, веб-личный кабинет и Telegram-бот для управления климатом и уведомлений;

→ собрали единую админку, через которую команда Climatec управляет сайтом, объектами, клиентами и документацией без привлечения разработчиков.

1. Изучили поведение пользователей на сайт: пути, точки входа, страницы, где люди чаще всего застревали или уходили.

У компании две ключевые аудитории:

✓ Частные клиенты — владельцы квартир и домов, которым важно удобно управлять микроклиматом и понимать, что происходит с системой.

✓ Застройщики и управляющие компании — им нужно централизованно контролировать десятки объектов и быть уверенными в стабильной работе оборудования.

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

Вывод: сайт не говорит на языке конкретных аудиторий. 

2. Разобрали структуру и меню: как устроены разделы, посадочные под разные направления, где находятся важные страницы. Дополнительно посмотрели, откуда приходят пользователи и как двигаются по сайту.

Выявили ключевые проблемы:

✓ Часть важных страниц, например, акции, FAQ, контакты, формы связи была спрятана глубоко в меню.

✓ Визуально сайт не транслировал ощущение современного технологичного сервиса про комфортный микроклимат.

3. Дальше изучили сайты компаний из того же сегмента. Большинство из них оказались однотипными:

→ простые лендинги с повторяющейся структурой;

→ акцент на технических характеристиках, но минимум понятного объяснения, какую выгоду в итоге получает человек;

→ почти нет вау-подачи, которая помогла бы бренду выделиться.

После аналитики сформулировали принципы, на которых должен строиться новый сайт Climatec:

✓ разделение аудиторий уже с главной страницы;

✓ простая навигация;

✓ визуальный сторителлинг продукта: не схемы и длинные тексты, а наглядное объяснение работы системы;

✓ SEO-дружелюбная архитектура;

✓ готовность к масштабированию.

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

Развели аудитории уже на главной странице, чтобы пользователи сразу понимали, куда идти:

✓ продумали отдельные страницы и оферы для B2C и B2B-аудиторий;

✓ вынесли преимущества оборудования в простые и наглядные блоки, которые одинаково эффективно работают для обеих групп.

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

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

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

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

→ Обновили логотип: увеличили первую букву, упростили формы и усилили читаемость.

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

Также подготовили UI-кит с описанием состояний компонентов, чтобы упростить разработку и поддержку.

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

3D-сцена заранее отрендерена в набор кадров, при скролле эти кадры сменяются и создают плавное движение прямо в браузере.

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

Пользователь скроллит и буквально погружается внутрь системы Climatec.

Дальше шаг за шагом показано, что происходит на каждом этапе:

✓ 3D-модель квартиры → приближение к блоку оборудования;

✓ подача воды → фильтрация → обеззараживание;

✓ финальное распыление микрокапель.

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

Системы Climatec подключены к серверу ОВЕН. Контроллеры собирают данные с насосов, форсунок и других узлов. ОВЕН принимает эти данные, хранит их и предоставляет API для внешних систем. В нашем случае речь идет о сайте и приложении.

Раньше команды могли теряться. Например, пользователь нажимал кнопку «Увеличить влажность», видел новое значение, но запрос не доходил до ОВЕНа. В результате влажность не менялась, но приложение не сообщало об этом.

Мы спроектировали архитектуру так, чтобы:

✓ Все команды проходили понятный сценарий: запрос → обработка → подтверждение → успех или ошибка. В итоге человек всегда понимает, что произошло.

✓ Сайт и мобильное приложение работали с оборудованием через единый бэкенд.

✓ Бэкенд безопасно взаимодействовал с ОВЕН по API и позволял отслеживать логи работы.

Новый сайт должен был работать быстро, стабильно и при этом оставаться простым в управлении.

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

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

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

1. Отдельным этапом разработали новое мобильное приложение Climatec. 

→ главный экран показывает список зон с текущими параметрами и быстрыми действиями;

→ общий ползунок позволяет настроить влажность сразу для всего объекта;

→ реализовали разделение ролей: владелец управляет системой и доступами, гость видит только свои помещения, диспетчер контролирует множество объектов и быстро выявляет проблемные зоны;

→ пользователи могут переименовывать помещения, добавлять фото и использовать 3D-представление объекта — это удобно, когда зон много.

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

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

3. Разработали Tелеграм-бота. Система дублирует уведомления в бота, чтобы человек не пропускал важные сообщения. Даже если приложение или личный кабинет в браузере закрыты, уведомления о техобслуживании и ошибках приходят вовремя.

В будущем через бота планируют автоматизировать процесс установки оборудования, чтобы снизить риск человеческих ошибок. Например, когда установщик путает зоны или теряет данные. 

Система будет:

→ использовать чек-листы при установке оборудования, чтобы собирать данные сразу на месте и они не терялись;

→ автоматически привязывать номера форсунок и объектов в систему;

→ передавать информацию администратору без участия монтажника.

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

Из этой единой админки команда Climatec без привлечения разработчиков:

– создает и ведет карточки клиентов и объектов;

– обновляет и редактирует контент: базу знаний, каталог, список сотрудников, адреса партнеров, контакты;

– прикрепляет документы по оборудованию: акты ввода в эксплуатацию, данные техобслуживания и другие;

– отслеживает логи работы API и оборудования;

– обрабатывает заявки, видит, с каких страниц и по каким вопросам обращаются пользователи.

Проект Climatec забрал золото и серебро в конкурсе «Рейтинг Рунета»:

1 место — в номинации «B2C, бизнес для потребителя»

2 место — в номинации «Промышленность и производство»

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

Для пользователей:

✓ Сайт объясняет сложный инженерный продукт простым языком и через 3D-анимацию.

✓ У разных аудиторий свой понятный маршрут: частные клиенты идут по сценарию «комфорт и здоровье дома», девелоперы — по сценарию «масштабируемость и интеграция в проекты».

✓ Личный кабинет и мобильное приложение позволяют управлять микроклиматом с любого устройства, в 1–2 шага, с понятной обратной связью по каждой команде.

✓ Уведомления о техобслуживании и авариях не теряются не теряются: сообщения приходят в приложение, веб-кабинет и дублируются через Телеграм-бота.

Для бизнеса и команды Climatec:

✓ Сайт стал каналом продаж и презентации продукта: база знаний, каталог, документация, разделы для партнеров работают на разные сегменты одновременно.

✓ Сократились ручные операции и переключения. Команда работает в одной админке, а не в нескольких панелях для разных продуктов — обновляет и редактирует весь контент без участия разработчиков.

✓ Сервисные процессы стали прозрачнее. Через логи и единую архитектуру удобнее отслеживать работу систем и реагировать на проблемы.

✓ Усилилось позиционирование. Обновленный дизайн и 3D с эффектом погружения на главной транслируют, что Climatec — технологичный сервис с собственной цифровой экосистемой для управления микроклиматом.

Планы:

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