Умная крыша от ТЕХНОНИКОЛЬ | Сервис для отслеживания снеговой нагрузки на крыше
- Заказчик
- ТЕХНОНИКОЛЬ — ведущий международный производитель надежных и эффективных строительных материалов и систем
- Задача
- Нам предстояло создать публичный сайт и интерфейс личного кабинета «Умной крыши».
Задача
«Умная крыша» — первый сервис от ТЕХНОНИКОЛЬ, который планирует развиваться в рамках проекта умный дом. Сервисом предполагается установка и отслеживание данных датчиков: снеговой нагрузки, солнечной энергии, мониторинга протечек, и системы обогрева, которая препятствует образованию льда на крыше.
Нам предстояло создать публичный сайт и интерфейс личного кабинета «Умной крыши».
Решение
Во время работы над проектом нам нужно было:
— Провести аналитику и понять, с какими болями чаще всего сталкиваются клиенты (большая часть аудитории это промышленные предприятия, например комплексы «МЕГА»).
— Визуализировать данные получаемые с датчиков в удобном формате, плюс дать доступ к истории показателей и возможность анализировать статистику;
— Собрать внутри ЛК всю важную информацию о крыше: контакты специалистов, документацию, характеристики, планировку;
— Разработать интерфейсы административной панели для специалистов со стороны ТЕХНОНИКОЛЬ, чтобы они могли видеть все объекты и создавать новые, управлять доступами пользователей, также иметь возможность мониторинга статистики, отслеживать активность датчиков.
Работая над проектом «Умная крыша», мы решили, что взаимодействие с заказчиком нужно проводить не только в онлайн, но и в офлайне. Таким образом мы смогли лучше познакомиться с действующими лицами проекта, обсудить с ними концепцию «Умной крыши», узнать как именно работают датчики, в какой момент пользователь попадает в ЛК, что приоритетнее для него, а что важно в админ.панели и так далее.
Благодаря этому нам удалось в лучшей мере создать интерфейс, который будет удобен конечному потребителю, ведь мы полностью поняли его основные потребности.
Анализ конкурентов
В начале работы провели анализ конкурентов. Среди конкурентов были выбраны крупнейшие компании, разрабатывающие свои умные дома. Основное, что нас интересовало — как отображаются подключенные устройства, как работают устройства с определенной зоной действия (например, робот-пылесос), как контролируется освещение в разных комнатах и так далее. Нам было важно учесть это, чтобы применить лучшие решения в реализации мониторинга показателей датчиков.
Проектирование
На основе аналитики, коллов и встречи с создателями проекта, начали разрабатывать первые прототипы.
Начали с детализированных прототипов, чтобы максимально быстро и с минимальными затратами визуализировать интерфейс кабинета, отразить все функциональные возможности и данные поступающие с каждого датчика.
Переосмыслили личный кабинет пользователя. Теперь им доступны 2 основные функции:
— Мониторинг снеговой нагрузки в режиме реального времени (реализовано в 2 форматах — график и карта)
— Хранение информации об объекте
Каждому прототипу сделали небольшой онбординг для заказчика, чтобы он лучше понимал, как будут работать те или иные функции:
Кроме того, на сегодняшний день мы продолжаем ежедневную работу над проектом. Поэтому разрабатываем новые макеты для будущего функционала «Умной крыши».
Дизайн
Далее перешли к реализации дизайна. Основной задачей было сделать интерфейс понятным для рядового пользователя, чтобы были верно расставлены визуальные акценты и мониторинг датчиков был простым.
Главная
Здесь пользователя знакомят с основным функционалом сайта и рассказывают о всех преимуществах «Умной крыши». Это точка входа и некий первый контакт пользователя с нашим сервисом.
Личный кабинет
ЛК разделен на 5 основных секций. Каждая содержит свой функционал и кликабельные элементы. В основе лежит мониторинг конкретной системы. Например, снеговой нагрузки. Мониторинг интерактивный. Вы можете изменить вид отображения данных с карты на график, чтобы подробнее ознакомиться с нагрузкой на выбранный промежуток времени.
ЛК Контакты
Данные о специалистах, имеющих отношение к объекту, к которым можно обратиться по возникающим вопросам.
Документация
Основная информация о чертежах и узлах, актах службы качества и фотографии ваших объектов. Систематизация всех данных в одном удобном пространстве.
Конструкции
Подробная информация о кровле, фасаде, фундаменте и стенах вашего объекта.
Сервисы
Удобное место выбора сервисов от ТН.
Таблица объектов
Здесь находится основная информация о всех ваших объектах: сам объект, снеговая нагрузка, инженер по эксплуатации с контактными данными. Объекты интерактивны и вы можете ознакомиться с возникшими проблемами или выходными данными подробнее.
И еще более 19 страниц сервиса.
Мониторинг
Умная крыша — система отслеживания поверхности крыш. Работает через датчики, которые в режиме реального времени мониторят ситуацию сверху. Датчики отслеживают все лишние объекты на кровле и своевременно предупреждают пользователей о выпавшем снеге / возникновении протечки. Для этого нужно было разработать детальную страницу в личном кабинете с графиками, которые затрагивают все процессы мониторинга.
В ЛК пользователь может переключаться между двумя основными графиками:
— Первый выполнен в стандартной форме — каждый датчик это отдельная цветовая линия. Здесь можно выбрать период, за который вам нужна информация по снеговой нагрузке, а также фильтры.
— Второй — интерактивная карта, на которой показывается расположение датчиков. Каждая точка на карте интерактивна и если на неё нажать, пользователь увидит подробную информацию о ситуации на этом участке.
Также показали, как карта будет выглядеть в режиме схемы, спутника и с большим количеством датчиков:
В будущем «Умная крыша» планирует расширяться и затрагивать протечки.
UI-kit
В процессе работы над проектом мы создали UI-kit. Он помогает придерживаться одной стилистики и одинаковых интерфейсных решений — это ускоряет работу разработчиков. Стоит отметить, что часть элементов принадлежат огромной дизайн системе ТН, которая используются в их экосистеме.
Результат
Нам удалось разработать интерфейс кабинета «Умной крыши», который ежедневно помогает владельцам домов и промышленных объектов отслеживать ситуацию на крыше и экономить за счет этого время и деньги.
