UX/UI дизайн приложения для управления умным домом
«Микро Лайн» — российский производитель микроэлектроники и IoT решений, которые применяются в умных домах и на коммерческих предприятиях.
12 дек. 2021
сервисы
Кейс
Спроектировать и разработать дизайн нового мобильного приложения ZONT для управления умным домом. Создать удобный и современный интерфейс, который повысит качество сервиса и лояльность пользователей.
Из опроса клиентов мы узнали, что треть из них мануально включают и выключают оборудование потому что считают приложение неудобным. Важно было сохранить функционал, остаться в цветах «Микро Лайна», но сделать продукт дружелюбным.
Из опроса клиентов мы узнали, что треть из них мануально включают и выключают оборудование потому что считают приложение неудобным. Важно было сохранить функционал, остаться в цветах «Микро Лайна», но сделать продукт дружелюбным.
Задача
Владислав Гетманенко
Design Lead
В ходе проектирования мы углубились в бизнес–цели проекта, провели исследование действующего решения, конкурирующих продуктов, познакомились с аудиторией «Микро Лайна» и их паттернами взаимодействия с оборудованием. Мы определили, что точно придётся переработать, а что можно оставить, не нагружая разработку.
Продуктовый подход
Чтобы понять, как работают элементы интерфейса, и какую проблему пользователя они должны решать мы провели несколько сессий с техническими специалистами по оборудованию. Мы узнали формулы расчета температурных отклонений и трендов энергопотребления, чтобы спроектировать самый простой способ их отображения для клиента.
UI-элементы нового приложения ZONT
«Микро Лайну» было важно, чтобы команда могла работать
с технически-сложными продуктами и умещать громоздкие данные в современный интерфейс, который соответствует гайдлайнам iOS и Android, а также попадает в цвета бренда.
Ограничением в дизайне для нас были используемые языки разработки и невозможность создать некоторые инновационные дизайн–решения на действующей архитектуре. Несмотря на это мы предложили редизайн–концепции в течение 2 недель, и нас выбрали в качестве подрядчика.
с технически-сложными продуктами и умещать громоздкие данные в современный интерфейс, который соответствует гайдлайнам iOS и Android, а также попадает в цвета бренда.
Ограничением в дизайне для нас были используемые языки разработки и невозможность создать некоторые инновационные дизайн–решения на действующей архитектуре. Несмотря на это мы предложили редизайн–концепции в течение 2 недель, и нас выбрали в качестве подрядчика.
Дизайн–концепция
Проектируя дизайн-систему мы искали способ, как связать между собой совершенно разные по своей сути модули оборудования. Например, модуль управления светом и модуль управления тёплым котлом имеют отличительный функционал, и на первый взгляд, требуют разного подхода к дизайну интерфейса.
Но такое видение привело бы к тому, что итоговое приложение будет выглядеть рассинхронным и невыразительным, а при добавлении нового оборудования пользователь начнёт теряться, поскольку не встречал подобного интерфейса прежде. Для решения этой проблемы мы разработали правила оформления модулей оборудования, упрощая и стандартизируя их под задачи клиентов.
Но такое видение привело бы к тому, что итоговое приложение будет выглядеть рассинхронным и невыразительным, а при добавлении нового оборудования пользователь начнёт теряться, поскольку не встречал подобного интерфейса прежде. Для решения этой проблемы мы разработали правила оформления модулей оборудования, упрощая и стандартизируя их под задачи клиентов.
Разработка дизайна
Варианты элементов интерфейса
Таким образом отклонения элементов в рамках дизайн-системы выглядели органично и воспринимались как единый организм, что играло ключевую роль в онбординге и пользовательском опыте при работе с новым оборудованием.
Всего мы разработали 13 уникальных экранов приложения и 10 возможных состояний на базе iOS, после чего сделали адаптацию под темную версию, планшеты и операционную систему Android.
Всего мы разработали 13 уникальных экранов приложения и 10 возможных состояний на базе iOS, после чего сделали адаптацию под темную версию, планшеты и операционную систему Android.
Одним из вынужденных дизайн-решений продукта стала разработка бокового меню с объёмным функционалом внутри: поиском и сортировкой устройств. В итоге мы получили неплохую альтернативу полноценному экрану с быстрым доступом из любой части приложения.
Боковое меню
Для подтверждения UX-гипотез по упрощению работы с интерфейсом мы провели опрос среди нескольких сегментов пользователей:
• пользовались продуктами компании ранее
• пользуются оборудованием сейчас, но не пользуется приложением
• сейчас пользуются оборудованием и приложением
Такое разделение позволило нам получить репрезентативную выборку и найти дополнительные точки для доработок интерфейса. Общий результат показал, что интерфейс стал удобнее для привычных сценариев, и клиенты хотели бы его попробовать в деле.
• пользовались продуктами компании ранее
• пользуются оборудованием сейчас, но не пользуется приложением
• сейчас пользуются оборудованием и приложением
Такое разделение позволило нам получить репрезентативную выборку и найти дополнительные точки для доработок интерфейса. Общий результат показал, что интерфейс стал удобнее для привычных сценариев, и клиенты хотели бы его попробовать в деле.
Тестирование
Перед передачей макетов Figma в разработку, мы отструктурировали информацию и описали UI-кит. А в процессе самой разработки консультировали по вёрстке front-end составляющей и дорабатывали элементы под запросы инженеров.
Мы верим, что релиз нового интерфейса ZONT станет драйвером роста индекса NPS, поскольку новое приложение трансформирует уровень сервиса, и станет конкурентным преимуществом «Микро Лайна» на рынке микроэлектроники и IoT решений.
Прогнозирование результатов
Контакты
Art & UX
thats@artux.ru
Москва, Мясницкая, 46с1
Владислав Гетманенко
Руководитель проектов