Brian Cardea | UX UI Designer – Web Designer

UX/UI design — app mobile
0.0°C
temp. ambiente

IoTherm

L'app che porta il controllo del riscaldamento di casa nella tasca di chi lo usa ogni giorno.
RuoloUX/UI design app
AmbitoApp mobile, IoT riscaldamento
ClienteKamor Engineering (per lab51)
Il progetto

Un protocollo tecnico, trasformato in gesti semplici.

Brief

Kamor Engineering produce centraline per il controllo del riscaldamento domestico, basate sul protocollo OpenTherm: caldaie, sistemi ibridi, pompe di calore. Per l'agenzia lab51 di Cesena serviva l'interfaccia dell'app di controllo, IoTherm, capace di rendere leggibili stati tecnici complessi, impianti multi-zona, modalità manuale e automatica, funzioni Jolly e Holiday, senza intimidire chi la usa da smartphone.

Il mio lavoro

Ho progettato la UX e la UI dell'app: la gerarchia impianto → zona → dispositivo, la dashboard con i suoi stati, il quadrante di temperatura come elemento centrale, e i flussi di programmazione oraria. Un solo linguaggio visivo per raccontare situazioni molto diverse tra loro.

Il flusso

Dall'account al singolo dispositivo, un passo alla volta.

La struttura dell'app segue la gerarchia reale di un impianto: un account può gestire più impianti, ogni impianto più zone, ogni zona più dispositivi.

1
Accesso
Accesso all'account
2
Selezione impianto
Selezione impianto
3
Selezione zona
Selezione zona
4
Selezione dispositivo
Selezione dispositivo
La dashboard

Lo stesso quadrante, sei situazioni diverse.

Il quadrante di temperatura è il fulcro dell'app: cambia colore e contenuto per raccontare con chiarezza cosa sta facendo l'impianto in ogni momento.

Spento
Sistema spento
Sistema OFF
In attesa
Standby
Solo sanitario, in standby
Attivo
Impianto attivo
Riscaldamento attivo
Manuale
Modalità manuale con Jolly
Manuale, funzione Jolly attiva
Automatico
Modalità automatica
Automatico, in esecuzione
Disattivo
Regolatore climatico disabilitato
Regolatore climatico disabilitato
La programmazione

Una settimana intera, letta come un orologio.

Le fasce orarie di riscaldamento e raffrescamento sono lette come un quadrante circolare, mattina e pomeriggio, invece che come una lista di orari.

Programmazione, vista mattina
Vista mattina (AM)
Programmazione riscaldamento
Riscaldamento, pomeriggio
Programmazione raffrescamento
Raffrescamento, pomeriggio
Altri momenti

Dettagli che tengono insieme l'esperienza.

Attivazione funzione Jolly
Attivazione funzione Jolly
Modalità automatica, vista estesa
Automatico, vista estesa
Registrazione account
Registrazione account
La palette

Un indaco per il brand, un caldo-freddo per la temperatura.

L'indaco identifica l'app in ogni schermata di navigazione; il gradiente caldo-freddo del quadrante comunica lo stato termico a colpo d'occhio, senza bisogno di leggere un numero.

Indaco #3E58ED
Caldo #F6C252 → #F9934A
Freddo #8EE6BB → #4BC98A
Un protocollo tecnico che si legge come un gesto quotidiano.