Мобильные приложения для устройств Boxy и Lightpack

Проектирование веб-приложения, мобильного приложения. Взаимодействие приложений и устройств
Многие современные устройства работают с приложениями. Для некоторых устройств приложения - это дополнение, а для некоторых - основной интерфейсы взаимодействия.

Для Лайтпака приложение - это пульт дистанционного управления с расширенными возможностями.

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

Особенность работы над мобильными приложениями для устройств в том, что нельзя просто сделать отдельно устройство, отдельно приложение. Нужно сразу проектировать обе части и четко понимать как они будут взаимодействовать друг с другом. У устройств обычно много различных состояний и приложение должно реагировать на все эти состояния определенным образом. Поэтому лучше всего сделать так, чтобы обе части системы делал один проектировщик, который хорошо разбирается и в железной части и в софтовой.
Приложение для "Бокси"
О проекте
Бокси - это небольшой вендинговый аппарат для тех мест, где мы можем доверять клиентам. Например, квартиры AirBnB, хостелы, ресепшен. Устройство представляет из себя контейнер без деления на отсеки. Человек получает доступ одновременно ко всем товаром внутри устройства.

Схема взаимодействия с устройством следующая:
- Человек подходит к устройству и сканирует QR, расположенный на нем
- QR-код ведет его на страницу данного устройства, где человек может выбрать товар, который он хочет купить
- Человек совершает оплату с помощью карты, Apple Pay и других доступных способов оплаты
- Устройство открывается, человек берет те товары, которые он приобрел и закрывает крышку.

На самом устройстве нет интерфейсов управления. Есть только световая и звуковая индикация.

Я также проектировал само устройство.

Задача
Спроектировать приложение для взаимодействия с устройством, а также поведение самого устройства во время взаимодействия с пользователем.

Решение
В случае с Бокси мы делали не нативное приложение, а веб приложение. Таким образом человеку, чтобы купить товар из устройства, не нужно скачивать приложение.

Но прежде, чем делать приложение, нужно спроектировать функциональности самого устройства, то как оно связывается с сервером, как передает данные, продумать архитектуру. Я спроектировал концепции двух вариантов реализации коммуникации. От выбранного решения зависела вся дальнейшая разработка. Ниже на картинке две разные схемы. Для каждой схемы снизу я прикидываю, какое влияние выбранная концепция будет влиять на веб-приложение.
После того, как мы с командой и заказчиком выбираем более подходящую схему, я перехожу к высокоуровневому проектированию сценариев.
У нас 2 роли пользователей: 1) хост - тот, кто обслуживает устройство и 2) покупатель. Также я сразу проектирую поведение устройства.
Для проверки навигации делаю интерактивные прототипы в Figma. Проверить полноценное взаимодействие с самим устройством пока невозможно, так как прошивка не готова.

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

Проект и сами устройства (предсерийные образцы) находятся в стадии альфа-тестирования в полевых условиях. Для этого проекта я также занимался проектированием самого устройства.
Приложение для устройства "Лайтпак 2"
О проекте
Лайтпак 2 это устройство для подсветки стены за телевизором во время просмотра видео или игры. Цвета подсветки соответствуют цветам на экране. Вместе с Лайтпаком можно купить небольшие смарт-лампочки - "Пиксели". С ними Лайтпак становится полноценной системой для освещения комнаты.
Задача
Спроектировать нативное приложение, которое будет являться пультом дистанционного приложения для Лайтпака и пикселей с расширенными возможностями.

Решение
Также, как и для Бокси, для Лайтпака я проектировал не только взаимодействие пользователя, но также и взаимодействие всех систем друг с другом, так как состояния приложения напрямую зависят от состояний остальных устройств.

Ниже на картинке схема поведения приложения в зависимости от того, какие устройства привязаны к нему.
Делаю список экранов и навигацию. Навигацию сразу в прототипе в InVision.
Отдельное внимание уделяю стартовому сценарию. Он сложный и развесистый. Нужно подключить устройства, рассказать, как их настроить. Обработать негативные сценарии при подключении.
Финальный дизайн делали совместно с моим постоянным партнером по UI дизайну.
Приложение разработано и выложено в Google Play. При этом оно помечено как находящееся в разработке, так как само устройство еще находится в производстве и в приложение вносятся доработки.

Также вы можете посмотреть, какие работы я делал по проектированию самого Лайтпака 2.