~✺~.+°:~.~ ✺:✺.+

Огляд

Visor - це B2B вебзастосунок, створений для регіональної служби з утримання доріг, відповідальної за моніторинг стану доріг цілого регіону. Як єдиний дизайнер у команді з чотирьох осіб я вів дизайн повного циклу - від початкової концепції до успішно запущеного продукту - а також узяв на себе продуктову стратегію, координацію команди й презентацію клієнту.

Терміни: 11 місяців
Команда: 4 особи (дизайнер / PM, бекенд-розробник, фронтенд-розробник, DevOps)
Моя роль: UX/UI-дизайн, продуктова стратегія, дослідження користувачів, презентація клієнту

Проблема

Працівники компанії відповідають за безпеку й стан дорожнього покриття на сотнях кілометрів. Щоб виконувати свою роботу, вони покладаються на мережу з понад 100 камер спостереження, розташованих уздовж автомагістралей і регіональних доріг.

Їхній наявний інструмент був мобільним застосунком з єдиним пласким списком назв камер - без пошуку, фільтрації, сортування й візуального контексту. Знайти потрібну камеру означало щоразу гортати нескінченний неструктурований список.

У роботі, де час реакції має значення - швидко помітити ожеледь, аварію чи погодні пошкодження - кожна змарнована на пошук камери хвилина - це хвилина, коли дорога лишається без нагляду.

Ключове питання: як перетворити дратівливий, марнотний процес пошуку на інтуїтивну, просторово орієнтовану систему моніторингу?

Дослідження

Виклик закритого ринку

Системи моніторингу доріг сервісного рівня закриті для широкого загалу з міркувань безпеки. Не було конкурентних продуктів, на які можна було б просто зареєструватися й проаналізувати. Це означало, що до дослідження довелося підійти креативно.

Я вивчав загальнодоступні застосунки для перегляду камер - дорожні камери, платформи міського відеоспостереження, інструменти моніторингу погоди - і вилучав патерни взаємодії, які можна було перенести в наш контекст. Я шукав відповіді на конкретні питання: як організувати 100+ камер на одному екрані? Як обробляти кластеризацію, не втрачаючи контексту? Які метадані найважливіші з першого погляду?

Розмови зі справжніми користувачами

Ми мали прямий доступ до працівників компанії - людей, які насправді користуватимуться цим інструментом щодня. Через інтерв’ю та спостереження виринуло кілька ключових інсайтів:

Розташування - це все. Працівники мислять категоріями доріг і кілометрових позначок, а не ID камер. Коли щось трапляється на автомагістралі М-01 на 130-му кілометрі, їм треба миттєво знайти цю камеру - а не пригадувати, що вона зветься «CAM-07-HWY-OBS».

Погода - частина роботи. Моніторинг доріг - це не лише спостереження за рухом. Працівникам треба знати, чи був дощ, сніг, чи не впала температура покриття нижче нуля. Дані про опади й температуру - це не «приємний бонус», а основа робочого процесу.

Швидкість не обговорюється. Старий застосунок був таким повільним і дратівливим, що працівники виробили обхідні шляхи - закладки на камери, рукописні списки. Будь-яке нове рішення мало бути значно швидшим, а не лише трохи кращим.

Рішення

Інтерактивна мапа як основний інтерфейс

Центральним дизайн-рішенням стала заміна плаского списку інтерактивною мапою. Кожна камера розміщена в реальному географічному місці, що дає працівникам миттєве просторове розуміння покриття по всьому регіону.

Камери кластеризуються за близькістю й розгортаються в міру наближення, що запобігає візуальному перевантаженню, лишаючи доступ до кожної камери. Кожен кластер показує агреговані погодні дані - температуру повітря й температуру дорожнього покриття - тож працівники можуть оглянути умови по всій області з одного погляду.

[ tap to open ]

Режим живого моніторингу - мапа з активними камерами та бічна панель із нещодавніми відеопотоками.

Структурована навігація

Не кожне завдання починається з мапи. Інколи ви знаєте дорогу - треба лише знайти потрібну ділянку. Бічна панель надає організований список усіх камер з пошуком, згрупований за позначенням дороги (М-01, М-02, Р-56 тощо) і розбитий за кілометровими позначками й назвами місць.

Ця подвійна навігація - мапа для просторового орієнтування, список для цільового пошуку - означає, що до потрібної камери завжди є швидкий шлях, незалежно від того, як працівник підходить до завдання.

[ tap to open ]

Список об'єктів - камери, згруповані за позначенням дороги й кілометровими позначками.

Повноекранне відео з контекстом

Вибір камери відкриває повноекранний відеопотік з усім, що потрібно працівнику, навколо нього: перемикач живе/записане, керування відтворенням зі змінною швидкістю та швидку навігацію до сусідніх камер на тій самій дорозі (Попередня / Наступна).

Часова шкала внизу виконує подвійну роль - це і скрабер відео, і відображення історії погоди, що показує температуру й умови з часом. Це дає працівникам змогу швидко прокрутити назад до моменту, коли почав падати сніг або падала температура, не перемикаючись між окремими інструментами.

[ tap to open ]

Повноекранне відтворення камери з часовою шкалою, накладеною температурою й керуванням перемоткою подій.

Ключові деталі, видимі завжди: затримка з’єднання, температура повітря, температура дорожнього покриття, позначення дороги, кілометрова позначка й назва місця.

Результати

Цікаво, звідки така величезна різниця в часі? Пограйтеся з демо й відчуйте це.

Рефлексія

Це був проєкт, у якому моє розуміння дизайну перейшло з теоретичного в практичне.

Робота єдиним дизайнером і водночас управління продуктовою стратегією й координацією команди навчили мене, що добрий UX не існує у вакуумі - він живе на перетині потреб користувачів, технічних обмежень і бізнес-життєздатності. Кожне дизайн-рішення мало пережити не лише юзабіліті-тести, а й обговорення бюджету та терміни розробки.

Якби я починав цей проєкт сьогодні, я б дослідив інтеграцію виявлення на основі ШІ - автоматичне розпізнавання погодних подій, стану дорожнього покриття та дорожніх інцидентів просто з камер. Дані моніторингу вже є; наступна еволюція - зробити систему проактивною, а не реактивною.