Простое управление сложной системой: новое приложение Climatec

1. Вводная задача от заказчика, проблематика, цели

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

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

Ранее мы уже обновили дизайн и разработали для Climatec новый сайт с 3D‑анимацией на секвенции и экологичным визуалом. Он решил задачи первого контакта, продаж и позиционирования на рынке.

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

Что было не так со старым приложением:

У Climatec уже было мобильное приложение, но оно не решало задачи пользователей и бизнеса.

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

2. Отсутствие обратной связи. Иногда, когда человек устанавливал влажность, команда не доходила до оборудования, но пользователь об этом не знал. То есть приложение просто возвращало старое значение без уведомлений. Это подрывало доверие к системе и вызывало сомнения в надежности оборудования.

3. Нет персонализации. Пользователи не могли называть помещения по-своему и добавлять фото. Для владельцев домов или офисов с десятками зон это важный функционал.

4. Одинаковый интерфейс для всех ролей. Владелец, гость и диспетчер видели один и тот же интерфейс, хотя их задачи и уровень доступа различались. То есть приложение не учитывало сценарии разных типов пользователей.

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

Что это значило для бизнеса:

– люди реже заходили в приложение или постепенно переставали им пользоваться;

– росла нагрузка на колл-центр, потому что не было push-уведомлений и поддержки;

– появлялось больше негативных отзывов от клиентов, которые жаловались на работу приложения.

Какая задача перед нами стояла:

Нам нужно было разработать новое приложение, которым удобно пользоваться:

– сократить путь до нужного действия в 1-2 тапа;

– уменьшить нагрузку на поддержку с помощью встроенной коммуникации и push-уведомлений;

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

АНАЛИТИКА И UX

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

Мы проанализировали текущий функционал и зафиксировали основные сценарии:

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

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

ДИЗАЙН

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

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

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

В каждой комнате можно настроить уровень влажности и задать время работы системы — она будет включаться автоматически.

В помещениях можно настроить дни и время работы оборудования

Общий ползунок. На главном экране есть кнопка «Задать влажность везде» — она открывает окно с общими настройками для выбранного объекта. Внутри — удобный ползунок, который позволяет задать уровень влажности сразу для всех зон.

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

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

Разделение ролей. Интерфейсы адаптированы под три типа пользователей — каждый видит только нужный функционал:

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

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

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

РАЗРАБОТКА

Приложение разработали на React Native. Системы Climatec подключены к серверу ОВЕН, который получает данные с оборудования и передает их в приложение.

Раньше команды могли теряться, например, пользователь нажимал «Увеличить влажность», видел новое значение, но запрос не доходил.

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

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

Логин выдает диспетчер при заключении договора. Пароль можно изменить при первом входе в приложение

Чтобы изменить пароль, нужно ввести код подтверждения из смс.

На экране восстановления пароля 3D-ключ визуально подтверждает успешное действие.

Интегрировали техподдержку. Если возникла проблема, пользователь может отправить сообщение — все обращения поступают в админку Climatec. С ее помощью оператор также прикрепляет документы по оборудованию: акт ввода в эксплуатацию, данные о прохождении ТО и другие файлы. Благодаря этому пользователи всегда имеют к ним доступ и получают уведомления о плановом обслуживании.

Настроили push-уведомления. Приложение напоминает о плановом обслуживании, предупреждает о просрочках и авариях.

Разработали Tелеграм-бота. Чтобы пользователь не пропускал важные сообщения, система дублирует уведомления в бота. Даже если приложение закрыто, уведомления о ТО и ошибках приходят вовремя.

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

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

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

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

Адаптировали приложение под планшеты. Сохранили функциональность и удобную навигацию.

3. Результаты сотрудничества

Климатек получил цифровой сервис, который решает задачи бизнеса и пользователей.

Путь до целевого действия сократился. Теперь изменить параметры можно за 1–2 тапа вместо 5. Пользоваться приложением стало проще и удобнее.

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

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

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

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

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

• Среднее время на выполнение целевого действия сократилось на 20 секунд.
• Ошибки управления сведены к минимуму.
• Пользователи вовремя получают уведомления и не теряют гарантию.
• Снизилась нагрузка на поддержку благодаря уведомлениям и чату (особенно по ТО).
• Диспетчеры видят статусы десятков объектов и быстро реагируют.
• Единый опыт на устройствах: мобильное и веб — одинаково предсказуемые.
• Климатек получил конкурентное преимущество: удобный цифровой сервис, который укрепляет лояльность клиентов.