Тестовое задание для продуктового дизайнера в SberDevices
Умная панель управления домом
Я уже знаю про умный дом и умные устройства (знакомый создавал себе целую систему, делился опытом), поэтому погружаться сильно в тему умных устройств не буду.
Обозначу задачу, требования, проанализирую конкурентов и представлю решение. Дедлайн - 3 дня. Но фактически у меня было только 2 дня из-за непредвиденных дел.
Задача
Создать дизайн-макет умной панели управления домом
Требования к дизайну
1. Главный экран панели должен содержать информацию о состоянии
всех устройств в доме, календарь встреч, погоду и др.
2. Пользователь должен иметь возможность управлять каждым устройством
в доме.
3. Панель должна иметь возможность подключаться к умным устройствам разных производителей.
Требования к функциональности
1. Пользователь должен иметь возможность включать и выключать устройства.
2. Пользователь должен иметь возможность изменять настройки каждого устройства (например, температуру в комнате или яркость света).
3. Пользователь должен иметь возможность планировать встречи.
Дополнительные требования
1. Написать краткий отчет о проделанной работе и обосновать свои дизайн-решения.
2. Представить дизайн-макет в формате Figma или png.
В задании нет требований к формату макета. Но, очевидно, что панель управления умным домом - это пульт, который всегда под рукой. Значит,
в первую очередь, она должна быть реализована на мобильном устройстве.
Узнаем о компании
SberDevices - это дочерняя компания Сбербанка, которая занимается разработкой и производством устройств для умного дома и других инновационных устройств. Компания была основана в 2018 году, и ее продукты включают в себя умные колонки, умные часы, умные датчики и другие устройства, которые используют технологии искусственного интеллекта, голосового управления и интернета вещей.
Кроме того, SberDevices запустила программу SberSmartHome, которая позволяет пользователям управлять умным домом с помощью мобильного приложения.
Небольшой анализ приложения "Салют! Умные устройства" и его конкурентов
Я решила проанализировать существующее приложение Сбера для умного дома и нескольких его конкурентов, но только по необходимым мне критериям (приложения все очень разные и полный анализ вылился бы в целую статью о каждом и сравнительную таблицу):
- главный экран
- управление устройствами
- подключение к устройствам других производителей
- возможность планирования встреч.
Здесь я разберу только 4 приложения, большая часть - российские. Зарубежных очень много, но все они показались мне менее удобными и интересными для такого быстрого анализа :)
Салют! Умные устройства
У меня нет умных устройств, которые я могла бы подключить, чтобы хорошо протестировать работу приложения, поэтому буду опираться на скрины в Play Market и статью от SberDevices (а также на Телеграм-канал).
1) Главный экран содержит информацию о комнатах, подключенных устройствах и их состояниях, есть возможность включить и выключить устройства. Ещё есть календарь.
2) Подключение к другим устройствам
3) Салют может записать ко врачу или к косметологу, значит, функция планирования встреч есть
Умный дом с Алисой
У моих родителей есть Станция Алиса, поэтому этим приложением я пользуюсь. Но умных розеток, лампочек и прочего у них нет, поэтому информацию о состоянии устройств я посмотреть не могу.
Буду анализировать на основе моего аккаунта и видеообзора на приложение.
1) На главном экране есть информация о комнатах, состоянии устройств, есть возможность включить и выключить их. Добавлен быстрый фильтр по типу устройств "розетки, ТВ, свет, колонки".
2) Добавление устройств происходит через плюсик на главном экране. Пользователю предлагается выбрать, что подключить: умную колонку, устройство или вообще создать новый дом, комнату или сценарий.
Предусмотрено подключение к устройствам разных производителей.
3) Нет функции планирования встреч
4) Прогноз погоды можно только узнать только спросив Алису
Rubetek Home
Система домашней автоматизации. Прежде не слышала о ней. Для анализа
я скачала приложение и посмотрела видеообзор
1) Главный экран дает информацию о комнатах, кратком состоянии устройств (вкл./выкл.) с возможностью включать и выключать их. Очень простой интерфейс.
2) Подключение новых устройств доступно через кнопку "плюс" на главной. Есть разделение по типу устройств, которое вы хотите подключить: управление, освещение, видеонаблюдение и т.д.
3) Функция планирования встреч - нет
Sprut.home
Это приложение сделали энтузиасты из России, потому что им не понравилось Apple Home. И сделали блестяще.
1) Комнаты на главном экране и легким движением руки можно раскрыть каждую комнату, чтобы увидеть состояние устройств.
2) Отображены показатели в каждой комнате
Более подробно почитать о нем можно здесь.
Приложений для управления умным домом существует очень много. Моей задачей было обозначить их общие черты:
1) Разделение на комнаты и дома
2) Возможность видеть статус устройств на главном экране
3) Возможность добавить новое устройство
5) Простой и быстрый интерфейс
6) Отдельно понравилось отображение показателей комнаты прямо на главном экране.
Все это мне нужно включить в свое решение.
Мое решение
Вайрфреймы
Посмотрела конкурентов, референсы на Pinterest, сделала вайрфреймы (очень помогли в этот раз упорядочить процесс). Нижнее меню вставила от ВК, просто чтобы пока было.
1 экран
Комната и устройства в ней. Пока всё сыренько и не очень продуманно. Но уже почетное место занимают встречи, сценарии и погода.
Для чего здесь погода? Я тоже так сначала подумала. А потом поняла, что очень удобно контролировать температуру и влажность, если тебя дома нет, сегодня жарко, а у тебя коты такие:
2 экран
Мне понравилась идея таких переключателей для настройки устройств. Ими удобно управлять одной рукой и они будут издавать вибрацию и пощелкивания для имитации реального пульта.
3 экран
Обычное добавление устройства, сценария, дома или комнаты через плюсик.
Сценарии — это крутой способ автоматизации умного дома. С их помощью можно сделать так, чтобы устройства включались, выключались или меняли режим работы по придуманной вами голосовой команде, регулярно по расписанию или если датчиками зафиксировано какое-то событие.
4 экран
Добавление новых устройств от разных производителей. Мне понравилось, как эта функция реализована у Яндекса.
Вайрфреймы для календаря и назначения встреч я не делала, потому что примерно представляю, как это должно выглядеть.
Макет
1) Главный экран
Комнаты
В некоторых зарубежных приложениях на главном экране можно увидеть огромный список всех устройств, который устаешь листать. Становится очевидно, что разделение на комнаты - это важно и удобно. Лучше всего оно реализовано в Sprut.home, я попробовала сделать что-то отдаленно похожее.
При нажатии на комнату, раскрывается информацию обо всех устройствах в ней. По задумке, повторное нажатие все сворачивает.
Но эти стрелочки... А если комнат 10? Я решила их не использовать.
Удобно видеть показатели влажности и освещенности сразу, не переходя на экран комнаты. Так можно удостовериться, все ли в порядке, и только после этого перейти в настройки устройств.
Если в комнате нет устройств, которые могут передавать показатели, карточка комнаты остается пустой.
Возможность включить и выключить устройство с главного экрана
У пользователя есть возможность включить и выключить устройство, а также увидеть статус состояния, не переходя в настройки.
Решила вынести их наверх, не прятать в меню или плавающих иконках. Думаю, было бы хорошо показывать дату ближайшей встречи. Или писать "сегодня", если она сегодня.
Разделение на дома - тоже важно. Это может быть дом родителей или друзей. Добавить новый дом можно через плюсик на главном экране (как и устройство, комнату и сценарий).
В другом доме также можно посмотреть показатели и настроить устройства.
Нижнее меню - зачем? Все необходимое есть на главном экране, а для добавления новых устройств или комнат есть кнопка "плюс".
Настройки профиля я разместила в верхнем правом углу.
2) Добавление устройств разных производителей
Кнопка "плюс" открывает выпадающее меню, в котором мы можем выбрать, что добавить: устройство, сценарий, комнату или дом.
Добавление устройств разных производителей удобно реализовано у Яндекса. Показаны все популярные производители и дана инструкция, как подключить устройство. Я просто сделала так же.
Я не успела найти остальных производителей и вставить их логотипы, поэтому пока здесь много Xiaomi :)
3) Настройка устройства
Не горжусь этим экраном в плане UI :)
Но задумку он показал хорошо. Такие ползунки для регулирования яркости и цвета лампы удобны для управления одной рукой.
Так же будут реализованы настройки кондиционера и других устройств. Только там будет уровень влажности и температура, например.
Идея во вайрфрейме мне нравилась больше, но на качественную реализацию нужно больше времени.
4) Назначение встреч
Без голосового помощника назначать встречи приходится вручную. Значит, должен быть календарь, где отмечены предстоящие встречи, и их список.
Календарь отображает только настоящую неделю, но его можно развернуть.
Встречи можно удалить через иконку крестика.
Редактировать - через три точки в правом верхнем углу.
Новая встреча создается максимально просто:
Пользователю предлагается ввести название и выбрать дату и время. Всё.
Дополнительно
Я сделала два варианта цветового оформления: с градиентом и уходом в фиолетовые оттенки:
И без градиента в глубоких синих тонах, который показала вам с самого начала:
Мои мысли
Я не успела проработать экраны настроек профиля и сценариев. Добавлю их позже, когда буду создавать кейс для портфолио.
Тестовое мне понравилось. Жаль, что выпал один день, и пришлось ужиматься
в исследовании и UI-составляющей. Можно было бы опросить пользователей умных устройств, какие приложения они используют, выявить плюсы и минусы.
В общем, провести более глубокий анализ и исследование.