Climatec — российская компания, которая разрабатывает и обслуживает системы форсуночного увлажнения для квартир, домов и коммерческих объектов.
Исторически у клиента уже был сайт, который хорошо собирал SEO-трафик, но не помогал продавать: сценарии для разных целевых аудиторий были перемешаны, мобильная версия неудобна, продукт сложно объяснялся с первого экрана.
Climatec пришли с запросом на комплексную цифровизацию, в центре которой — разработка нового сайта. Перед нами стояли 3 уровня задач:
1. Сайт — первая точка контакта. Понятно объяснить, чем занимается компания и как работает система форсуночного увлажнения.
2. Сайт — инструмент продаж. Построить логичный путь пользователя, чтобы человек смог подобрать решение и дойти до заявки без лишних шагов.
3. Сделать сайт ядром цифровой экосистемы: сайт + личный кабинет + приложение.
АНАЛИТИКА
1. Изучили поведение пользователей на сайте: пути, точки входа, страницы, где люди чаще всего застревали или уходили. Выяснили, что у компании 2 ключевые аудитории:
✓ Частные клиенты
✓ Застройщики и управляющие компании
Оказалось, на сайте перемешаны разные сценарии. Например, человек, который ищет решение для квартиры, попадал на тексты для застройщиков, а представитель девелопера — на бытовые советы по увлажнению для частных клиентов.
2. Разобрали структуру и меню: как устроены разделы, посадочные под разные направления, где находятся важные страницы. Посмотрели, откуда приходят пользователи и как двигаются по сайту.
Выявили ключевые проблемы:
✓ Часть важных страниц, например, акции, FAQ, контакты, формы связи была спрятана глубоко в меню.
✓ Визуально сайт не выглядел как современный технологичный сервис про комфортный микроклимат.
3. Дальше изучили сайты компаний из того же сегмента. Большинство из них были однотипными.
СТРУКТУРА И НАВИГАЦИЯ
1. Разделили аудитории уже на главной странице, чтобы пользователи понимали, куда идти:
✓ продумали отдельные страницы и оферы для B2C и B2B-аудиторий;
✓ вынесли преимущества оборудования в простые и наглядные блоки, которые эффективно работают для обеих групп;
✓ в результате каждый сегмент получает свои аргументы, примеры и целевые действия, и сценарии больше не конкурируют друг с другом.
2. Вынесли ключевые страницы в верхнее меню, дополнительную информацию — в раскрывающийся хедер, убрали лишнюю глубину.
3. Спроектировали SEO-дружелюбную архитектуру с базой знаний, чтобы сайт собирал органический трафик.
4. На главной странице продумали интерактивную презентацию приложения, чтобы показать возможности удаленного управления системой.
ДИЗАЙН И АЙДЕНТИКА
Полностью пересобрали визуальную концепцию: ушли от насыщенных цветов, устаревших шрифтов и перегруженной структуры, чтобы дизайн вызывал ощущение экологичности и уюта.
→ Выбрали спокойную палитру, которая ассоциируется с природой и свежестью.
→ Обновили логотип: увеличили первую букву, упростили формы и усилили читаемость.
→ Проработали первый экран: уделили внимание композиции и деталям, добавили натуральные текстуры и элементы.
→ Подготовили UI-кит для дальнейшего развития продукта.
ПОДАЧА ПРОДУКТА
В инженерных нишах продукт часто показывают схемами и длинными текстами. Мы выбрали другой формат. Одна из фишек проекта — иммерсивная 3D-анимация, которая объясняет работу оборудования.
→ 3D-сцена заранее отрендерена в набор кадров, при скролле эти кадры сменяются и создают плавное движение прямо в браузере.
→ На первом экране человек видит уютную комнату с легким распылением из оборудования. Мы детально проработали поведение пара, и это была задачка со звездочкой: важно, чтобы пар выглядел реалистично, как мельчайшие капли воды, а не как дым.
→ Пользователь скроллит и буквально погружается внутрь системы Climatec.
Дальше шаг за шагом показано, что происходит на каждом этапе:
✓ 3D-модель квартиры → приближение к блоку оборудования;
✓ подача воды → фильтрация → обеззараживание;
✓ финальное распыление микрокапель.
Такая подача решает сразу две задачи: B2C-сегмент понимает ценность продукта — комфорт и здоровый воздух в доме, а B2B-аудитория видит технологичность решения и этапность процесса.
ТЕХНИЧЕСКАЯ АРХИТЕКТУРА И ИНТЕГРАЦИИ
Системы Climatec подключены к серверу ОВЕН. Контроллеры собирают данные с насосов, форсунок и других узлов. ОВЕН принимает эти данные, хранит их и предоставляет API для внешних систем. В нашем случае речь идет о сайте и приложении.
Раньше команды могли теряться. Например, пользователь нажимал кнопку «Увеличить влажность», видел новое значение, но запрос не доходил до ОВЕНа. В результате влажность не менялась, но приложение не сообщало об этом.
Мы спроектировали архитектуру так, чтобы:
✓ Все команды проходили понятный сценарий: запрос → обработка → подтверждение → успех или ошибка. В итоге после целевого действия человек всегда понимает, что произошло.
✓ Сайт и мобильное приложение работали с оборудованием через единый бэкенд.
✓ Бэкенд безопасно взаимодействовал с ОВЕН по API и позволял отслеживать логи работы.
РАЗРАБОТКА
✓ Фронтенд — Next.js. Он ускоряет загрузку страниц и улучшает SEO-результаты.
✓ Бэкенд — Python. С ним легче масштабировать. Например, уже на старте планировали интегрировать сайт с голосовыми помощниками.
✓ Сайт одинаково удобен на компьютере, планшете и смартфоне. Навигация, галереи и секвенция с 3D-анимацией корректно подстраиваются под любое разрешение экрана.
ЛИЧНЫЙ КАБИНЕТ И ПРИЛОЖЕНИЕ
Заложили следующий уровень — управление физическими системами через цифровые сервисы:
1. Разработали мобильное приложение для управления системой в 1–2 шага.
2. Спроектировали веб-версию личного кабинета на React, который доступен из браузера. Полностью повторяет функционал мобильного приложения.
3. Разработали Telegram-бота, куда система дублирует уведомлений, чтобы человек не пропускал важные сообщения. В будущем через бота планируют автоматизировать процесс установки оборудования, чтобы снизить риск человеческих ошибок.
ЕДИНАЯ АДМИНКА ВМЕСТО ДВУХ
До проекта команде Climatec приходилось работать в разных административных интерфейсах. Мы спроектировали и реализовали единую админку, через которую сотрудники управляют сайтом, личным кабинетом и приложением:
→ создают и ведут карточки клиентов и объектов;
→ обновляют и редактируют контент: базу знаний, каталог, список сотрудников, адреса партнеров, контакты;
→ прикрепляют документы по оборудованию: акты ввода в эксплуатацию, данные техобслуживания и другие;
→ отслеживают логи работы API и оборудования;
→ обрабатывают заявки, видит, с каких страниц и по каким вопросам обращаются пользователи.
РЕЗУЛЬТАТ
Проект Climatec забрал золото и серебро в конкурсе «Рейтинг Рунета»:
1 место — в номинации «B2C, бизнес для потребителя»
2 место — в номинации «Промышленность и производство»
Также получили «красную печеньку» на Dprofile.
Новый сайт Climatec стал полноценной цифровой платформой, которая помогает объяснять продукт, выстраивать коммуникацию с клиентами и развивать продажи. Он закрыл ключевые проблемы и задачи бизнеса.
Для пользователей:
✓ Сложный инженерный продукт стал понятен с первого экрана с помощью 3D-анимации.
✓ У каждой целевой аудитории свой сценарий.
✓ Личный кабинет и мобильное приложение позволяют управлять микроклиматом с любого устройства, в 1–2 шага
✓ Уведомления доходят всегда: приложение, веб-кабинет и дублируются в Telegram.
Для бизнеса:
✓ Позиционирование усилилось. Обновленный дизайн и 3D с эффектом погружения транслируют, что Climatec — технологичный продукт с собственной цифровой экосистемой.
✓ Сайт стал полноценным каналом продаж и презентации продукта.
✓ Команда клиента работает в одной админке вместо нескольких интерфейсов.
✓ Сервисные процессы стали прозрачнее. Через логи и единую архитектуру удобнее отслеживать работу систем и реагировать на проблемы.
ПЛАНЫ
Сейчас сайт Climatec у нас на поддержке, и мы продолжаем развивать его вместе с командой клиента. Уже подготовили и передали на согласование план доработок на следующий год. Постепенно будем усиливать экосистему вокруг сайта, личного кабинета и мобильного приложения.
Выставлено в номинациях:
— Сайт промышленной/ТЭК компании или дилера
— Лучший сайт для потребителей (b2c)