L'unica app smart home
con digital twin nativo

Il Brief

Jared ha comprato una casa Zuru
e deve configurare le automazioni

Zuru Tech costruisce case tecnologiche all'avanguardia — finestre motorizzate con controllo angolo preciso, luci RGB programmabili, clima intelligente. Jared ha appena acquistato una di queste case e deve configurare le sue routine quotidiane tramite app.

Task 1: Aprire automaticamente le finestre della cucina alle 8:00 del mattino, con angolo di apertura specifico (30°) e durata limitata (15 minuti), per cambiare aria prima di andare al lavoro.

Task 2: Impostare automaticamente il colore delle luci del soggiorno alle 18:00 per creare un ambiente più caldo e accogliente (warm white).

Il problema: le app smart home esistenti (Google Home, Apple Home) non offrono questo livello di controllo granulare — o lo nascondono dietro menu complessi e configurazioni tecniche.

La sfida

Come rendere il controllo smart
immediato quanto un interruttore?

La sfida non era aggiungere funzionalità — era eliminare la complessità. Un'app smart home deve essere più veloce di alzarsi e premere un pulsante fisico. Altrimenti fallisce.

• Niente planimetrie obbligatorie — troppo cognitive load per setup iniziale
• Accesso diretto ai dispositivi — massimo 2 tap per qualsiasi azione
• Feedback visivo immediato — animazioni che mostrano lo stato reale (finestra che si apre, luce che cambia colore)
• Preset intelligenti — mood predefiniti invece di slider RGB complessi

Competitive Research

5 competitor analizzati
per filosofia e pattern UX

Ho analizzato le principali app smart home per capire punti di forza, debolezze, e opportunità per Zuru:

• Tesla App — Ecosistema chiuso (auto + casa + energia). UI semplice per sistemi complessi, ma zero controllo granulare dispositivi e nessun digital twin casa.
• Loxone — Building automation integrata con HW+SW proprietario. Controllo granulare eccellente (angolo, posizione, schedule) e logica "se X allora Y" senza codice, ma richiede partner certificato per installazione.
• Josh.ai — Luxury home AI-first. Natural Language per descrivere automazioni a parole, context-aware per stanza, ma richiede installazione professionale costosa.
• Google Home — Ecosistema multi-brand con compatibilità universale. Lista dispositivi per stanza (pattern familiare) e routine semplici, ma nessun digital twin e controllo granulare limitato.
• Apple Home — HomeKit con focus privacy. Lista dispositivi per stanza/categoria e tutto on-device, ma ecosistema chiuso (solo HomeKit) e nessun digital twin casa.

Il vantaggio competitivo di Zuru: È l'unico che parte già con il digital twin della casa. Nessun competitor ha questa informazione nativa. La UI dovrebbe costruirsi sopra questo — rendere visibile e semplice ciò che è tecnicamente complesso.

Strategia UX

Punto di ingresso:
lista dispositivi per stanza

Per definire il punto di ingresso ottimale, ho considerato tre fattori:

• 1. Pattern consolidati — Apple Home e Google Home usano liste di dispositivi organizzate per stanza. È un pattern familiare e immediato: l'utente vede subito cosa può controllare senza dover navigare una planimetria.
• 2. Comportamento di Jared — Jared sta pensando "voglio configurare la finestra della cucina". Una lista chiara con "Kitchen Windows" come prima voce gli permette di arrivare subito al dispositivo target senza passaggi intermedi.
• 3. Semplicità implementativa — Una lista di dispositivi è più semplice da implementare e mantenere rispetto a una planimetria interattiva, permettendo di concentrarsi sulla qualità delle automazioni e del controllo granulare.

"Ho scelto la lista dispositivi come punto di ingresso per bilanciare familiarità del pattern, velocità di accesso, e semplicità implementativa. Permette a Jared di completare i task richiesti nel minor numero di tap possibile."

Interactive Components

Animazioni che mostrano
lo stato reale dei dispositivi

Ho progettato componenti interattivi ad alta fedeltà per i controlli principali:

• Window Slider — Vista isometrica della finestra che si apre progressivamente (0°, 30°, 60°, 90°) mentre l'utente trascina lo slider. Feedback visivo immediato dello stato reale.
• Light Mood Cards — Invece di slider RGB complessi, 4 preset predefiniti (Warm Evening, Focus, Cinema, Relax) con preview colore e descrizione. Tap per cambiare mood, slider brightness separato.
• Duration Pills — Selezione rapida della durata automazione (5m, 10m, 15m, 30m, 1h) con preview orario apertura/chiusura.

User Flow — Core

Flusso semplificato
per configurazione rapida

Ottimizzato per task singoli e veloci come quelli di Jared:

• 1. Home Dashboard — Lista dispositivi organizzati per stanza. Tap su "Kitchen Windows" per accesso diretto.
• 2. Device Control — Slider angolo apertura (0-90°), visualizzazione real-time finestra, pulsante "New Automation".
• 3. Automation Setup — Form semplificato con 3 campi: Orario (8:00 AM), Durata (15 min), Angolo (30°). Giorni settimana selezionabili.
• 4. Confirmation — Riepilogo automazione creata con possibilità di modificare o tornare alla home.

User Flow — Plus

Flusso avanzato
per automazioni multi-dispositivo

Per utenti esperti che vogliono orchestrare scenari complessi:

• Scene Builder — Canvas per aggiungere più dispositivi e definire azioni simultanee. Es: "Good Morning" = Finestre cucina 30° + Luci soggiorno warm + Caffettiera ON.
• Advanced Scheduling — Calendario settimanale con timeline oraria. Drag & drop scene su giorni/orari specifici.
• Conditional Logic — Builder "If-Then" per regole condizionali. Es: "If temperatura > 25° Then apri finestre 60°".

Motivazione separazione Core/Plus: Due flussi per diversi livelli di complessità. Il Core è ottimizzato per task singoli e veloci, mentre il Plus offre potenza per utenti che vogliono scenari multi-dispositivo complessi.

Design System

Token system completo
con Manrope e spacing 4px

Ho creato un design system completo con variabili CSS per garantire coerenza e scalabilità:

• Typography — Font Manrope (Regular → ExtraBold). Scale da 10px (Caption/S) a 30px (Heading/XXL) per leggibilità ottimale su schermi digitali.
• Colors — Palette semantica con Background (#EDECEA), Card (#FFFFFF), Brand Red (#E5173F), Status colors (Green, Orange, Blue).
• Spacing — Sistema basato su multipli di 4px (4px, 8px, 12px, 16px, 20px, 24px, 32px) per allineamento pixel-perfect.
• Border Radius — Valori semantici: r-card (8px), r-pill (100px), r-input (6px) per coerenza tra componenti simili.
• Shadows — 3 livelli (sm, default, lg) per gerarchia visiva chiara.

Ogni componente è responsive e adattato per iPhone (393×852) e iPad (834×1194) con padding e font size specifici per device.

Interactive Prototyping

26 stati componenti
con Smart Animate

Ho creato prototipi interattivi ad alta fedeltà in Figma usando Component Sets e Smart Animate:

• Window Slider — 4 stati per iPhone + 4 per iPad (8 varianti totali)
• Light Mood — 4 mood × 2 device = 8 varianti
• Duration Pills — 5 stati × 2 device = 10 varianti

Totale: 26 stati componenti con transizioni Smart Animate per feedback visivo immediato.

Risultati

Controllo granulare
senza complessità

• Accesso diretto ai dispositivi — lista per stanza invece di planimetria obbligatoria
• Feedback visivo immediato — animazioni che mostrano lo stato reale
• Setup semplificato — niente planimetrie obbligatorie, solo lista dispositivi per stanza
• Preset intelligenti — mood predefiniti invece di configurazioni complesse

Next Steps

Validazione, iterazione
e handoff sviluppo

• User Testing — Test con 5-8 utenti per validare il flusso Core. Task: "Configura apertura automatica finestre cucina alle 8:00". Metriche: tempo completamento, errori, soddisfazione.
• Implementazione Slider Interattivo — Completare le varianti del componente finestra (0°, 30°, 60°, 90°) e collegare lo slider con Interactive Components per feedback visivo real-time.
• Espansione Flow Plus — Progettare Scene Builder e Advanced Scheduling per utenti avanzati. Validare con utenti che già usano sistemi di automazione complessi (es. Home Assistant, Loxone).
• Accessibilità — Audit WCAG 2.1 AA: contrasto colori, navigazione da tastiera, screen reader support. Particolare attenzione a slider e controlli granulari.
• Handoff Sviluppo — Documentare design system in Figma con variabili, componenti, e auto-layout. Preparare specifiche tecniche per API (formato dati automazioni, endpoint device control).

Key Learnings

Quando togliere è meglio
che aggiungere

• La complessità non è una feature — è un bug
• La planimetria interattiva è visivamente impressionante, ma per la maggior parte degli utenti è cognitive overhead inutile
• Le animazioni non sono decorazione — sono feedback essenziale
• Il vantaggio competitivo di Zuru (digital twin nativo) deve essere invisibile all'utente finale