Умная крыша от ТЕХНОНИКОЛЬ

«Умная крыша» — первый сервис от ТЕХНОНИКОЛЬ, который планирует развиваться в рамках проекта умный дом. Сервисом предполагается установка и отслеживание данных датчиков: снеговой нагрузки, солнечной энергии, мониторинга протечек, и системы обогрева, которая препятствует образованию льда на крыше.

Нам предстояло создать публичный сайт и интерфейс личного кабинета «Умной крыши».

Во время работы над проектом нам нужно было:

— Провести аналитику и понять, с какими болями чаще всего сталкиваются клиенты (большая часть аудитории это промышленные предприятия, например комплексы «МЕГА»).

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

— Собрать внутри ЛК всю важную информацию о крыше: контакты специалистов, документацию, характеристики, планировку;

— Разработать интерфейсы административной панели для специалистов со стороны ТЕХНОНИКОЛЬ, чтобы они могли видеть все объекты и создавать новые, управлять доступами пользователей, также иметь возможность мониторинга статистики, отслеживать активность датчиков.

Работая над проектом «Умная крыша», мы решили, что взаимодействие с заказчиком нужно проводить не только в онлайн, но и в офлайне. Таким образом мы смогли лучше познакомиться с действующими лицами проекта, обсудить с ними концепцию «Умной крыши», узнать как именно работают датчики, в какой момент пользователь попадает в ЛК, что приоритетнее для него, а что важно в админ.панели и так далее.

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

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

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

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

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

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

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

Главная

Здесь пользователя знакомят с основным функционалом сайта и рассказывают о всех преимуществах «Умной крыши». Это точка входа и некий первый контакт пользователя с нашим сервисом. 

Личный кабинет

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

ЛК Контакты

Данные о специалистах, имеющих отношение к объекту, к которым можно обратиться по возникающим вопросам.

Документация

Основная информация о чертежах и узлах, актах службы качества и фотографии ваших объектов. Систематизация всех данных в одном удобном пространстве.

Конструкции

Подробная информация о кровле, фасаде, фундаменте и стенах вашего объекта.

Сервисы

Удобное место выбора сервисов от ТН.

Таблица объектов

Здесь находится основная информация о всех ваших объектах: сам объект, снеговая нагрузка, инженер по эксплуатации с контактными данными. Объекты интерактивны и вы можете ознакомиться с возникшими проблемами или выходными данными подробнее.

И еще более 19 страниц сервиса.

Тут продемонстрировали часть интерфейса ЛК в тёмной теме. 

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

В ЛК пользователь может переключаться между двумя основными графиками:

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

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

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

В будущем «Умная крыша» планирует расширяться и затрагивать протечки.

В процессе работы над проектом мы создали UI-kit. Он помогает придерживаться одной стилистики и одинаковых интерфейсных решений — это ускоряет работу разработчиков. Стоит отметить, что часть элементов принадлежат огромной дизайн системе ТН, которая используются в их экосистеме.

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