Проектирование UX устройства Lightpack 2

Установка Лайтпака, управление Лайтпаком и Пикселями. Пульт. Quick Start Guide. Мобильное приложение.
О проекте
Проект компании Woodenshark
Сайт проекта

Статья с детальным описанием работы над инструкцией у меня на Medium

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

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

Задача
Сделать хороший пользовательский опыт для целой системы устройств, разработать Quick Start Guide, разработать мобильное приложение
Проектирование всей системы. Архитектура, функциональности, взаимодействие устройств
Перед тем как приступить к проектированию, я разобрался с тем, что было в проекте до меня. Спроектировано было немного и на самом верхнем уровне. Поэтому прорабатывать систему пришлось почти с нуля. Я старался сохранить по максимуму то, что уже было сделано и соответствовало бы обещанному в кампании на Кикстартере.

Как обычно проработал сценарии, контексты использования, проанализировал пользовательский опыт использования первой версии лайтпака.

После этого приступил к более технической части - прорабатывал список фичей, учитывая, какие способы коммуникации между устройствами возможны. Сложность была в том, что все 4 типа устройств (лайтпак, пиксели, телефон, пульт) должны комуницировать и синхронизироваться друг с другом по беспроводному интерфейсу. Каждый из них должен подключаться в систему или удаляться из нее. Кроме того, были разные конфигурации устройств. У человека могло не быть пикселей, но был лайтпак. Или не быть лайтпака, а только пиксель, который работает с телефоном. Может ли лайтпак управляться двумя разными телефонами? Что если в комнате окажется два лайтпака? Как соединить лайтпак с пикселями? И т.д. Куча вопросов, которые влияют на пользовательский опыт и являются сложными с технической точки зрения. Поэтому все вопросы приходилось решать сразу с обеих сторон: технической и пользовательской. Часть первоначально задуманных решений было значительно упрощено.

Ниже схема возможных конфигураций устройств и интерфейсов:
Документация по взаимодействию устройств между собой:
Состояния и переходы Пикселя:
Прототип и тестирование пикселей
Если у Лайтпака уже был рабочий прототип, то пиксели были только в задумке. И как конкретно они должны работать, предстояло спроектировать.

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

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

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

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

Чтобы сделать понятно и просто, делаю различные варианты кнопок для теста и провожу несколько небольших тестов с картонными прототипами. Просто чтобы понять, как люди, которые отдаленно знают, что такое Лайтпак, воспринимают эти кнопки и их назначение.
Добиваюсь баланса между простотой и понятностью и документирую, чтобы передать дальше в разработку.
Проектирование и тестирование Quick Start Guide
Лайтпак не самый простой продукт, но при этом целью своей ставил уровень понятности "для домохозяек". Инструкция должна в этом помочь. Кроме того, мы хотели сделать инструкцию как у икея - без надписей. Так как Лайтпак должен теоретически поставляться в разные страны, это позволяло не делать поддержки множества языков.

Установка Лайтпака начинается с установки LED-ленты на заднюю стенку телевизора. Устройство должно работать с телевизорами разных размеров, и, чтобы лента в нужном месте светилась нужным светом, Лайтпак должен знать, где у ленты находятся углы. Изначально функцию углов выполняли вспомогательные небольшие устройства Smart Corners и ленту нужно было резать на 4 части и вставлять в эти уголки. Получалась примерно такая схема:
Чтобы с чего-то начать создание Quick Start Guide, мы спроектировали и отрисовали два черновика инструкций по установке ленты с разными концептуальными подходами.

Одна концепция сообщала пользователю шаг за шагом, что нужно делать. Другая - рассказывала, что должно получиться в итоге, и параллельно описывала важные моменты, которые надо учесть. При этом человек сам волен решать, как именно он будет собирать конструкцию, в какой последовательности и где, на столе или на телевизоре, в какой последовательности приклеивать.
Провели тестирование обеих концепций на реальных пользователях.
Вторая концепция оказалось более жизнеспособной. На ее основе мы сделали финальный Quick Start Guide, пройдя еще несколько итераций доработок.

Дополнительный результат тестирования инструкции
В процессе тестирования мы поняли, что многие из начальных решений самого устройства очень сложны и не жизнеспособны при встрече с реальными пользователями. Поэтому мы переделали способ крепления ленты к телевизору. Теперь не нужно было резать ленту на 4 куска, очищать от силиконового чехла, соединять их сложным образом. Крепление ленты стало выглядеть примерно так:
А чтобы Лайтпак знал, где у лены углы, его теперь нужно один раз настроить с помощью пульта.
Мобильное приложение
О мобильном приложении можно узнать здесь
Результаты проекта
Компанией Woodenshаrk была произведена первая партия Лайтпаков с базовыми функциями. Пиксель пока не выпущен. Мобильное приложение выпущено для Андройда. Ниже можно посмотреть полное видео с распаковкой и установкой устройства.