Клиент

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

Проблема

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

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

Цели и задачи

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

1. 01Переработать структуру и подачу, чтобы пользователю было понятно, чем занимается компания и как работает система форсуночного увлажнения.
2. 02Выстроить логичный путь к заявке, а также сохранить и усилить органический трафик.
3. 03Объединить сайт, личный кабинет и мобильное приложение в единую экосистему.

Проанализировали поведение пользователей

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

Разобрали структуру и навигацию

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

Изучили конкурентов

Поняли, что рынок заполнен однотипными лендингами с техническими характеристиками, но в них нет вау-подачи и понятного объяснения, какую выгоду получает человек.

Спроектировали новую архитектуру сайта

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

Развели аудитории уже на главной: подготовили отдельные страницы и оферы для B2C и B2B. Преимущества оборудования показали в наглядных блоках.

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

Подготовили дизайн-концепцию

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

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

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

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

Фишка проекта — иммерсивная 3D-анимация, которая объясняет работу оборудования

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

Сцену заранее отрендерили в последовательность кадров. При прокрутке они сменяются и создают плавное движение прямо в браузере.

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

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

Дальше показали, что происходит на каждом этапе. Все шаги визуализировали отдельным фрагментом секвенции с плавным переходом к следующему. Такая подача одновременно объясняет ценность для частных клиентов и демонстрирует технологичность решения для B2B.

Интеграции

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

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

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

• Все команды проходили понятный сценарий: запрос → обработка → подтверждение → успех или ошибка. В итоге человек всегда понимает, что произошло.
• Сайт и мобильное приложение работали с оборудованием через единый бэкенд.
• Бэкенд безопасно взаимодействовал с ОВЕН по API и позволял отслеживать логи работы.

Разработка

1. 01Frontend — Next.js. Он ускоряет загрузку страниц, а еще помогает в SEO-продвижении, то есть страницы сайта быстрее индексируются поисковыми системами.
2. 02Backend — Python, чтобы клиент мог легко подключать новые сервисы и интеграции. Например, уже на старте планировали интегрировать сайт с голосовыми помощниками.
3. 03Сайт одинаково удобен на компьютере, планшете и смартфоне. Навигация, галереи и секвенция с 3D-анимацией корректно подстраиваются под любое разрешение экрана.

Мобильное приложение

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

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

Реализовали разделение ролей:

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

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

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

Веб-версия личного кабинета

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

Tелеграм-бот

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

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

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

• использовать чек-листы при установке оборудования, чтобы данные не терялись;
• автоматически привязывать номера форсунок и объектов;
• передавать информацию администратору без участия монтажника.

Единая админка

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

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

• создает и ведет карточки клиентов и объектов;
• обновляет и редактирует весь контент;
• прикрепляет документы по оборудованию: акты ввода в эксплуатацию, данные техобслуживания и другие;
• отслеживает логи работы API и оборудования;
• обрабатывает заявки и видит, с каких страниц и по каким вопросам обращаются пользователи.

Результаты

Проект Climatec забрал золото и серебро в конкурсе «Рейтинг Рунета»: 1 место — в номинации «B2C, бизнес для потребителя» 2 место — в номинации «Промышленность и производство» Также получили «красную печеньку» на Dprofile.

1. 01Усилили роль сайта в продажах: он объясняет сложный инженерный продукт через 3D-анимацию, ведет аудитории по разным сценариям, сокращает путь к заявке.
2. 02Построили единую цифровую инфраструктуру. Объединили сайт, приложение и личный кабинет в систему, которой можно управлять из единой админки без участия разработчиков.
3. 03Обновили позиционирование: с помощью нового дизайна и 3D-анимации бренд выглядит технологично и современно.
4. 04Упростили масштабирование и поддержку.