Omnivise

О чем продукт?

Мобильное приложение разработано, чтобы обеспечить мониторинг стабильности оборудования. Оно позволяет оперативно проверять нужные клиенту метрики (КПИ), которые отображают состояние оборудования на заводе. Клиенты могут получать быстро информацию о работе, а также оперативно реагировать на возможные проблемы, связанные со стабильностью работы, обращаясь в поддержку. Кроме того, приложение генерирует и сохраняет автоматически данные в отчетах, что позволяет не терять данные.

Контекст

Если кратко, то этот кейс и проблема возникала потому, что владельцы заводов не всегда находятся поблизости и в целом на работе или лица, ответственные за управление. Например, ты можешь находиться у себя на заводе в Ораландо, Флорида в США, но проблема у тебя на заводе в Германии и т.д. Ничего сложного в работе не было. Отличная коммуникация с командой и клиентами.

Какие проблемы и задачи решал?

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

Какой был процесс?

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

Список заводов

У клиента обычно несколько заводов, которые конфигурирются вручную, то есть “продажа” происходит вручную. Тут повлиять на процесс нельзя было на данном этапе. После конфигурации, юзер получал логин/пароль на свою организацию, где его уже ждали подключенные заводы/предприятия. Ничего сложного: просто карточка, где важен статус и значение мощности предприятия, по которым определяли то, стоит ли углубляться или нет.

Список турбин

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

Список виджетов

Каждый юнит может кастомизироваться через тап по кнопке шестиренки. Собственно, юнит и представляет из себя ряд виджетов, которые юзер добавит на экран и настроит выбрав сенсор, название, тип визуализации и размер.

Конструктор виджетов

Настройка виджетов происходит на отдельном экране, где юзер может добавлять, удалять и переставлять виджеты в любом порядке. Чтобы избежать ручной настройки, можно скопировать типовую настройку с помощью «Copy to» на другие устройства.

Фича копирования настроек.

Виджет в виде радиального графика.

Виджет в виде линейного графика.

Виджет переменных из пары ключ:значение.

Скетчи умерли, да здравствуют скетчи!

Начиная с этого проекта, я начал переходить на balsamiq - инструмент для вайрфреймвов/скетчей. Бумага это круто и я по прежнему использовал ее, но для мобилок мне прям понравилось:

• Возможность делать вайрфреймы по виду как скетчи.
• Минимальный набор вещей, которые просто работают.
• Легко “выбрасывать” и переделывать, прямо как с бумагой.

Фича репортов. Слева пару вайрфреймво, а справа UI. Данные моковые.

Автоматизация рутины

Приложение не маленькое как видно и росло…

Но благодаря автоматизациям я сократил геморой, когда нужно было показывать команде то, как выглядит приложение в разных темах. Я люблю упрощать или оптимизировать процессы. Для этого я перерыл кучу плагинов для Figma, но они либо платные, либо отваливаются, либо не до конца выполняют свои задачи, что вело к цепочке из плагинов, а я хотел “вжух” и готово, и нашел - Automator. Плагин платный, но это того стоило. Пример: у нас 30 экранов мобилки под iOS в светлой теме. Предположим, что нам надо сделать версию под Android в светлой теме, а также перевести эти экраны в темную тему под каждую платформу, то есть математика экранов такая: 30 (iOS, светлая) + 30 (Android, светлая) + 30 (iOS, темная) + 30 (Android, темная) = 120 экранов! Ниже будет видео, которое демонстрирует работу оптимизации, которая выполняется за 10-15 секунд. Просто засеки: сколько у тебя (смотрящий) займет следующее: продублировать экран iOS, изменить его размеры, сменить все компоненты внутри под Android, а затем продублировать готовые 2 экрана и сменить тему в каждом компоненте? Думаю, что дольше 10-15 секунд. 😎

Немного UI-кита

Выводы

✅ Автоматизируй это!

Выше показал одну из автоматизаций на примере работы с темами и компонентами платформ операционных систем. Ценность любой автоматизации заметна в долгосроке, а на момент когда я заканчивал работать над приложением, уже были заложены фичи на 5ю версию (я работал с 0 до 4ой версии).

✅ Начал собирать UI-kit, примеры которых я тизернул в конце

Под проект я начал собирать ui-kit, а позже меня заметил департмаент бренда Siemens Enery и предложил сделать масштабное руководство по проектированию мобильных устройств, а в последствии и веб-приложений, но это другая история.