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.

Cliente
Inventronics
Settore
IoT e smart lighting
Mercato
B2B / B2B2C
Anno
2025
Due mani reggono un telefono con l'elenco dei progetti Hubsense, accanto a un laptop che mostra gli stessi progetti nella web app su sfondo arancione.

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.

La pianificazione delle aree nella web app e lo stesso progetto su mobile: header con stato, gateway e numero di dispositivi, e una card di planimetria per ogni area.
Le impostazioni di comportamento di una zona su web e mobile: scenario, fade time, timeout e livello di luce, con parametri generali e impostazioni di scena sul telefono.
Il commissioning delle zone sulla planimetria: hotspot di stato sulla pianta del primo piano nel web, e la stessa vista a mappa delle zone su mobile.

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.