Water Fleet Control

Керування парком підключених очищувачів води

WEB
Water Fleet Control
Роль: Product Designer, єдиний дизайнер продуктуПлатформа: B2B вебплатформа для підключених пристроївНапрям роботи: Дослідження, структура продукту, UX/UI, дизайн-система, сповіщення

Система керування парком підключених очищувачів води: близько 15 000 пристроїв в офісах, школах і клініках по Європі. Кожен пристрій передає свій стан. На платформі виробник, сервісні партнери й підтримка бачать ці дані та працюють із ними.

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

Операційна модель

Один запис від заводу до сервісного візиту

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

  1. 01

    Виробництво

    Модель, партія, контроль якості

  2. 02

    Склад

    Зберігання, сканування, наявність

  3. 03

    Призначення

    Клієнт, сервісний партнер, план

  4. 04

    Моніторинг

    Зв’язок, телеметрія, помилки

  5. 05

    Обслуговування

    Фільтри, гігієна, віддалені налаштування

  6. 06

    Сервіс

    Завдання, візити, підтвердження

01 · Почати з усього парку

П’ятнадцять тисяч пристроїв на карті

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

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

Огляд парку: глобальні показники, карта концентрації пристроїв у Європі з відкритими сповіщеннями, регіони та їхні партнери

Від глобального до конкретного

Регіон → партнер → пристрої → один пристрій. Кожен рівень відповідає на своє питання.

Карта як точка входу

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

Окремі проблеми переходять у завдання

Окремі проблеми доходять до людей через сповіщення й сервісні завдання, а не через огляд парку.

02 · Регіон і партнер

Керувати парком через людей, які його обслуговують

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

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

Партнери в DACH: список партнерів і вибраний партнер із показниками, клієнтськими локаціями та тижневим завантаженням
03 · Пристрої

Детальні фільтри для тисяч пристроїв

Саме у списку пристроїв оператори керували парком, тому фільтрація мала бути точною. Зв’язок, стан, ресурс фільтра, модель, тип локації й прошивка завжди були на виду разом із живими лічильниками. Оператор бачив майбутню вибірку ще до її відкриття, а контекст із попереднього рівня, наприклад партнер, залишався окремим чипом.

Я поєднав пошук за ID пристрою та MAC-адресою з фільтрами, живими лічильниками й налаштовуваними колонками. Також додав запит звичайними словами, який перетворювався на ті самі видимі фільтри. Після вибору пристроїв оператор міг масово змінити налаштування, створити сервісне завдання чи спланувати маршрут.

Пристрої одного партнера: детальні фільтри з лічильниками, запит звичайними словами, перетворений на фільтри, і масові дії для 7 пристроїв
04 · Паспорт пристрою

Відкрити пристрій, не втрачаючи список

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

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

Паспорт пристрою: прогноз фільтра за споживанням, стан гігієни й виявлене поступове зниження температури гарячої води
05 · Віддалені налаштування

Зробити віддалені зміни безпечними

Охолодження, розклад енергозбереження й пресети порцій можна змінити віддалено, для одного пристрою чи цілої групи. Помилка тут впливає на реальні кухні, тому сценарій побудований довкола впевненості. «Хлібні крихти» й кроки показують, звідки оператор прийшов і що лишилося; вибірка завжди на виду й редагується; перевірка показує, що саме зміниться, що буде з пристроями офлайн і як відкотити зміни.

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

Зміна налаштувань для 42 пристроїв: «хлібні крихти» й кроки, поточна вибірка, підсвічені зміни, доставка на офлайн-пристрої і шлях назад
06 · Склад і призначення

Супроводжувати пристрій протягом усього життя

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

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

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

Покликайте адмінку

Ті самі екрани, тільки пов’язані: перемикайте регіони на панелі карти, відкривайте партнера, фільтруйте пристрої, відкривайте паспорт пристрою чи масову зміну налаштувань. Дані — демо-знімок; нічого нікуди не надсилається.

FleetEuropeDACH

DACH 9,094 devices · 3,420 customers

AllBusinessHome7 daysPartner, customer, serial…ExportNew service task
Devices9,094+148 this monthOnline8,83997.2% · target 98%Offline25541 longer than 24 hIn service1282 overdueCustomers3,4201,180 business · 2,240 homeWater this week1.24 M L+3% vs last week
Munich12Berlin4FrankfurtVienna3HamburgCologneZurich51213

Regions

Devices · online
DACH9,09497.2%
AquaService Süd1,28486%RebalanceWasser Technik Berlin1,10254%Donau Filter96861%Direct · homes2,5602,240 ownersSelf-serviceAll 18 partners in DACH
Central & Eastern Europe3,14098.4%
Benelux1,02098.9%
Southern Europe79097.9%
France69098.6%
Nordics55099.1%
DevicesAlerts
Devices per cityOpen alertsHomes appear only in city totals
+−

Alerts

All 19 alerts
Faults7Offline8Filters4
Opened 77Resolved 755 older than 24 h
MonTueWedThuFriSatSun

Handled by partners 13 · by owners in the app 6

Service pipeline

Service tasks
New12
Assigned18
Technician en route5
Done this week64
Overdue2 · AquaService SüdMedian response6 h 40 min SLA 8 h

Coming up · 30 days

Stock
Filter replacements340due
In stock · DACH280filters
Short by 60
Create order for 60 filters
Hygiene service42 this weekHome subscriptions1,120 ship automatically
Вільне демо · регіони, партнери, пристрої й паспорт пристрою
07 · Сервісна мережа й сповіщення

Замкнути цикл із людьми на місці

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

Також я спроєктував систему сповіщень. Ми повідомляли кожній ролі про рішення в її зоні відповідальності, а не про кожну подію в системі.

Оператор

Пристрій офлайн понад 24 години, повторні помилки, прострочені завдання.

Сервісний партнер

Нове завдання, маршрут на тиждень, пристрій, який потрібно перевірити під час візиту.

Клієнт

Скоро заміна фільтра, запланований візит, налаштування змінив сервіс.

08 · Клієнтський застосунок · концепт

Дати власникам контроль над своїми пристроями

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

Застосунок працює на тій самій моделі даних, що й адмінплатформа, тож кожна зміна в застосунку з’являється в історії пристрою, а кожен візит, запланований партнером, видно клієнту.

Пристрої
Пристрої
Дашборд
Дашборд
Статистика
Статистика
Обслуговування
Обслуговування
Налаштування
Налаштування
Сценарій · Споживання

Побачити, як використовується вода

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

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

Сценарій · Налаштування

Налаштувати в безпечних межах

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

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

Дизайн-система

Спільна операційна мова для пристроїв і сервісу

Water Fleet супроводжує пурифаєр від виробництва й призначення до років телеметрії, обслуговування та виїздів партнерів. Візуальна система допомагає однаково читати стан пристрою, майбутній сервіс і відповідальність у вебплатформі та клієнтському застосунку.

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

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

Поверхні флотуХолодна світла робоча область із білими картками; один темно-синій рівень залишено для глобальної навігації.
  • navy.950#0e1a2aГлобальна навігація
  • navy.900#0f1c2cОсновний текст
  • slate.100#f3f6f9Фон робочої області
  • slate.050#ffffffКартки, таблиці
  • slate.300#e6ebf1Межі, роздільники
  • slate.600#6b7a8cДругорядний текст
Семантичні токениЕкрани використовують ролі, а не hex-значення.

Фон і поверхні

  • color.background.appslate.100
  • color.surface.primaryslate.050
  • color.navigationnavy.950
  • color.surface.selectedblue.050

Текст і межі

  • color.text.primarynavy.900
  • color.text.secondaryslate.600
  • color.border.defaultslate.300

Дії й статуси

  • color.action.primaryblue.500
  • color.status.healthygreen.500
  • color.status.serviceamber.500
  • color.status.criticalred.500
  • color.status.offlineslate.500
Шкали пристроїв і сервісуЗв’язок, технічний стан і терміновість сервісу лишаються окремими вимірами в усьому продукті.

Стан пристрою

  • Справний#1f9d63
  • Потребує сервісу#e0921c
  • Критичний#e2483d
  • Офлайн / неактивний#9aa6b4

Зв’язок

  • Онлайн
  • Затримка
  • Офлайн

Терміни сервісу

  • Заплановано
  • Скоро
  • Прострочено

Як ми вимірювали цінність продукту

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

  1. 01Сигнал виявлено
  2. 02Завдання створено
  3. 03Партнера призначено
  4. 04Візит підтверджено
  5. 05Пристрій знову в нормі

Що демонструє цей кейс

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

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