Energia sostenibile che modella il domani
L’energia sostenibile può sembrare distante e complessa. SMS Energy ha visto un’opportunità per cambiare le cose con una nuova iniziativa: Metis, una piattaforma di energy-as-a-service progettata per rimuovere le barriere e offrire energia pulita senza costi iniziali.
L’obiettivo era rendere l’energia rinnovabile più chiara, più accessibile e più facile da attivare — e si sono rivolti a CI&T per trasformarla in realtà.
Il concetto era semplice: una soluzione per l’energia verde che offre pannelli solari e batterie completamente finanziati, senza costi anticipati. Gli utenti pagano una tariffa mensile fissa — come farebbero per un servizio in abbonamento — e ottengono accesso all’energia pulita direttamente a casa. Il piano a pagamento diretto elimina la necessità di prestiti bancari o soluzioni di finanziamento complesse. L’obiettivo era creare un’esperienza di branding per l’energia rinnovabile semplice e accessibile, capace di aiutare le persone a compiere scelte più intelligenti e trasparenti.
Sono entrato nel progetto come Senior UI Designer, collaborando con il Lead Designer e un illustratore. Insieme, abbiamo lavorato per trasformare un tema tecnico in un’esperienza umana — in grado di aiutare più persone ad adottare l’energia solare, senza complicazioni.
Prima di passare al design, il team ha condotto un’estesa ricerca UX per definire le basi del brand. Nell’arco di diversi mesi, sono state realizzate decine di interviste approfondite, analizzate tramite Loop, uno strumento AI pensato per far emergere pattern di comportamento, insight e punti critici. Questa fase ha permesso di identificare i bisogni sia degli utenti finali che dei proprietari, costruendo così una struttura chiara e razionale su come il brand dovesse comunicare, internamente ed esternamente — radicata in valori reali.
Una volta sintetizzati i dati, io e Pete Sampson abbiamo lavorato sulla strategia di brand e sul posizionamento. L’obiettivo era definire un’identità visiva e concettuale attraverso un branding guidato dallo scopo, capace di esprimere al tempo stesso fiducia e trasformazione.
Attraverso questo approccio centrato sull’utente, abbiamo identificato due archetipi chiave:
- Il Saggio, che rappresenta conoscenza, chiarezza e insight
- Il Mago, che incarna visione, creatività e cambiamento
Abbiamo sperimentato direzioni visive audaci e strategiche, capaci di unire questi due mondi — bilanciando la concretezza del Saggio con la scintilla di possibilità del Mago. Questa dualità è diventata il filo narrativo portante dell’intero brand e ha guidato lo sviluppo completo del sistema di identità visiva di Metis.
Identificare gli archetipi del Saggio e del Mago ci ha dato un punto di partenza chiaro — ma prima di fonderli, volevamo comprenderne appieno il potenziale. Attraverso una fase di esplorazione progettuale approfondita, abbiamo sviluppato due direzioni distinte, ciascuna con il proprio linguaggio visivo, sistema tipografico e strategia cromatica — riflettendo, da un lato, chiarezza e fiducia; dall’altro, trasformazione ed energia.
Questa analisi comparativa ci ha permesso di mettere in discussione le ipotesi iniziali e validare le scelte progettuali. Ha anche aiutato il team a definire i limiti e il potenziale espressivo di ciascun archetipo attraverso formati differenti, dal web al motion.
Una volta articolate le due direzioni in modo completo, abbiamo iniziato a progettare un sistema di identità ibrido — capace di bilanciare logica e immaginazione. Il risultato è stato un sistema di design modulare e scalabile, adattabile ai vari touchpoint digitali, mantenendo al tempo stesso coerenza e personalità.
Archetipo 1
|
Il saggio
Archetipo 2
|
Il mago
Il risultato finale non è stato solo un lifting visivo, ma un sistema di design completo, costruito da zero con componenti modulari e design token scalabili, pensati per essere accessibili e pronti a crescere. Ho guidato la creazione di questo sistema, assicurandomi che ogni elemento — dalla tipografia all’uso del colore — fosse intenzionale e coerente su tutti i touchpoint, digitali e fisici.
Un elemento visivo centrale era un set di gradienti audaci e vibranti, usati non solo per creare interesse visivo, ma anche per trasmettere energia e movimento. L’accessibilità è rimasta un pilastro fondamentale: ogni combinazione cromatica è stata testata per contrasto e leggibilità. I gradienti sono stati abbinati a un carattere distintivo, “blimp”, utilizzato in modo selettivo per evidenziare messaggi chiave con un tono amichevole, quasi gonfiabile — aggiungendo calore e personalità al tono di voce.
Abbiamo introdotto un elemento distintivo a forma di linea fluida, simbolo di connessione: tra le persone, le loro case e l’ecosistema energetico più ampio. Questa linea ha supportato una narrazione interattiva, accompagnando in modo discreto l’utente attraverso l’esperienza del brand.
Il brand è stato ulteriormente arricchito da un set di illustrazioni su misura realizzate da Nick Toye, pensate per umanizzare l’esperienza legata all’energia. Per completare l’effetto, ho sviluppato un concept di motion design, parte di un sistema più ampio: i colori dei gradienti all’interno delle illustrazioni cambiano gradualmente nel tempo. Questo movimento continuo e ambientale rappresenta visivamente l’energia come una forza viva.
Il risultato è un prodotto digitale per la sostenibilità — un brand che non solo appare moderno e chiaro, ma anche vivo — ancorato a un’architettura solida e flessibile, capace di dare forza sia agli utenti che al business.
Per concludere, abbiamo progettato quella che è diventata la parte più strategica dell’intera esperienza: il percorso del calcolatore di risparmio. Non si trattava di una feature isolata, ma di un’esperienza focalizzata sulla conversione — il momento decisivo in cui UX, design persuasivo e chiarezza del brand dovevano allinearsi per trasformare l’intenzione in azione.
Il flow era volutamente semplice e orientato all’utente: un percorso in sei step in cui le persone condividevano solo le informazioni necessarie — dimensione del tetto, composizione domestica, dati del contatore, eventuale possesso di un’auto elettrica — per generare una stima personalizzata del risparmio. Invece di sommergere l’utente con moduli e frizioni, abbiamo costruito un percorso che privilegia chiarezza, autonomia e fiducia.
Lo schermo finale rivelava molto più di un semplice numero: presentava un risultato su misura, con vantaggi concreti, campi editabili e un passo successivo chiaro — trasformando i dati in valore.
Per supportare questo, abbiamo introdotto alcune decisioni UX chiave:
- Flusso progressivo per ridurre il carico cognitivo e aumentare la chiarezza
- Domande opzionali per mantenere l’utente al centro dell’esperienza
- Più fiducia attraverso la trasparenza: nessuna email richiesta per visualizzare i risultati
- Una pagina dei risultati in tempo reale, testata e iterata per chiarezza e facilità d’uso
Questo strumento è diventato un asset strategico per Metis: non solo un calcolatore, ma un touchpoint ad alto impatto — capace di trasformare l’interesse in azione grazie a un design misurabile, pensato per la conversione e l’esperienza utente.
Crediti
| Cliente | Metis (SMS Energy) |
|---|---|
| Agenzia | CI&T |
| Strategia di brand & identità visiva | Matteo Miele & Pete Sampson |
| UI design & sistema di design (lead) | Matteo Miele |
| Illustrazioni | Nick Toye |
Italian 
English