Piattaforma IoT per lo smart lighting · 2025
Hubsense – Inventronics
Piattaforma IoT per lo smart lighting, redesign di web app e app mobile
Ridisegnare l'esperienza di commissioning e di gestione di un ecosistema di illuminazione Bluetooth Mesh, da un audit AS-IS fino a un design system scalabile e white label.
PROBLEMA CENTRALE
Un'esperienza frammentata tra tre utenti e due piattaforme
Hubsense è l'ecosistema di illuminazione Bluetooth Mesh di Inventronics: un configuratore web, un'app mobile e una gamma di dispositivi sul campo. È cresciuto attorno al firmware, non attorno ai flussi di lavoro reali. I problemi principali:
- Tre tipi di utente (Manager, Installatore, Utente finale), senza una divisione chiara dei permessi.
- Web e mobile coprivano funzionalità diverse, costringendo a passare di continuo dall'uno all'altro.
- Nessuna panoramica utilizzabile per i progetti grandi (oltre 200 dispositivi). Nessuna vista a tabella, nessuna azione massiva.
- Nessuna diagnostica per un sistema mesh. I nodi guasti restavano invisibili.
- Nessuna struttura per il white label. Brand e UI di base erano intrecciati fra loro.
DISCOVERY
Ho analizzato l'AS-IS della web app e dell'app mobile, condotto un benchmark su strumenti mesh simili e intervistato operatori reali, tra cui un technical manager con oltre 20 anni in Inventronics. Le lacune principali: nessuna planimetria navigabile in profondità, nessun modo di duplicare la configurazione di una zona, nessun controllo dei nodi dal web, nessun feedback quando un nodo si guastava.
Questi risultati hanno dato forma al customer journey to-be alla base della fase di concept.
DECISIONI UX
Divisione per capacità, con una zona di sovrapposizione.
Il mobile copre la pianificazione di progetto, area e zona, il commissioning dei dispositivi e il controllo dal vivo sul posto. Il web rispecchia le stesse capacità di pianificazione tranne il commissioning, che resta solo mobile perché richiede la vicinanza fisica al dispositivo. Tutto ciò che viene creato su una piattaforma si sincronizza e si riflette sull'altra.
Gerarchia in scala: Progetto → Area → Zona → Dispositivo, con hotspot di stato e una vista a tabella per i progetti grandi.
Diagnostica come flusso centrale: i dispositivi guasti e il segnale debole sono diventati stati visibili e su cui agire, insieme a un test di Mesh Quality su mobile.
UI basata sul ruolo: Manager, Installatori e Utenti finali hanno ciascuno un'esperienza circoscritta al proprio raggio d'azione.
IMPLEMENTAZIONE
Il progetto è stato portato avanti in agile, con PM, sviluppatori e tester. Ero l'unica designer.
Concept design
Ho disegnato i wireframe delle due piattaforme in parallelo e validato i flussi principali con il cliente. Tre aree hanno prodotto i guadagni di UX più grandi: la pianificazione delle zone, ristrutturata attorno a una gerarchia chiara che va dall'edificio al nodo; il commissioning dei dispositivi, ridotto a un unico flusso guidato invece che a passaggi sparsi; e il monitoraggio delle aree, portato direttamente sulla planimetria per una lettura dello stato dal vivo e nello spazio. Anche i comportamenti e gli scenari delle zone sono stati semplificati con la progressive disclosure: le impostazioni comuni in primo piano, quelle avanzate a un tap di distanza.
Design system e UI
Ho costruito il design system con Claude, generando token e componenti in fretta.
Il white label è diventato una regola di architettura, non una pelle finale: il colore di brand di un tenant è un solo token di accento, usato unicamente per identità e selezione (splash, tab attiva, focus ring, stati selezionati). Le azioni primarie restano neutre per ogni tenant. Così si mantiene un unico standard di accessibilità, si protegge la gerarchia visiva e si evita che gli stati di emergenza entrino mai in competizione con un colore di brand.
IMPATTO
- commissioning per progetto più rapido, dopo aver chiuso il divario tra web e mobile
- 40%
- ticket di supporto in meno sui nodi guasti, dopo l'introduzione della diagnostica mesh
- 28%
- più rapido individuare una zona o un dispositivo nei progetti grandi, con la nuova vista a tabella
- 50%+
RETROSPETTIVA
- Ridisegnare un prodotto vivo significa pesare ogni cambiamento sulle abitudini reali degli installatori, non su un flusso ideale.
- Essendo l'unica designer in un grande team agile, le sprint review hanno tenuto le decisioni ancorate alla realtà e intercettato presto le derive di scope.
- Trattare il white label come una regola a livello di token ha reso gli stati critici per la sicurezza non negoziabili per costruzione.