Ottoboni

Ottoboni è un’azienda con una storia solida, in un momento di ridefinizione profonda della propria identità. Il rebranding in corso stava riorganizzando l’offerta attorno a quattro elementi: Aria, Acqua, Terra e Fuoco, trasformando anche il modo in cui lo showroom fisico veniva comunicato e vissuto.

Il sito web doveva seguire questa trasformazione: costruire una presenza digitale coerente con il nuovo posizionamento, capace di raccontare i servizi con chiarezza e di accompagnare l’utente nella comprensione di un’offerta articolata.

Ho coordinato l’intero processo di UI design: wireframe, design system, interfacce e supervisionato il team di sviluppo, lavorando in parallelo con il team composto da copywriter, specialisti SEO, con Elisa come referente lato cliente per la direzione creativa e la comunicazione.

La complessità del progetto non era visiva, ma architetturale. L’offerta di Ottoboni: servizi, prodotti, spazi espositivi, aveva una logica ben precisa nel mondo fisico dello showroom, ma questa logica non si traduceva automaticamente in struttura digitale navigabile.

Il nodo centrale era questo: come organizzare contenuti eterogenei in un sistema che risultasse chiaro per l’utente finale, senza sacrificare la ricchezza e la profondità dell’offerta? Come costruire una gerarchia visiva che guidasse senza imporre, che orientasse senza semplificare troppo?

La risposta è partita dalla struttura stessa del rebranding: i quattro elementi, usati come principio organizzativo non solo estetico, ma anche funzionale.

Il primo passo è stato tradurre la struttura concettuale del rebranding Aria, Acqua, Terra, Fuoco, in un’architettura di pagine concreta e navigabile. Ogni elemento diventa un’area tematica con contenuti propri, logica interna e punti di contatto verso le altre sezioni.

I wireframe hanno definito la gerarchia dei contenuti prima ancora di ragionare sullo stile: quale informazione serve subito, quale può emergere con uno scroll, quale richiede una pagina dedicata. Questo lavoro a monte ha permesso di costruire flussi di navigazione che l’utente percepisce come naturali — perché lo sono, non perché lo sembrano.

Ogni pagina è stata strutturata considerando sia l’utente che arriva da ricerca organica su una specifica categoria, sia chi esplora il sito dall’inizio: due percorsi diversi, un’esperienza coerente.

Il sistema visivo nasce dal rebranding e lo estende nel digitale senza tradirlo.

La palette si costruisce attorno a toni materici, terracotta, beige, grigio pietra, che portano la temperatura del mondo fisico di Ottoboni dentro lo schermo, senza risultare nostalgici né decorativi.

I quattro elementi Aria, Acqua, Terra, Fuoco identificano ciascuno un colore dominante che rende ogni area del sito immediatamente riconoscibile. Non è solo una scelta estetica: è un sistema di orientamento che funziona anche prima che l’utente legga un’etichetta.

La tipografia combina un serif con personalità per i titoli e un sans-serif pulito per il corpo testo.
Il contrasto non è arbitrario: il serif porta autorevolezza e carattere, il sans-serif garantisce leggibilità e fluidità. Insieme definiscono una voce visiva che sa essere formale senza essere fredda.

Le interfacce nascono dal sistema visivo, ma si misurano con un criterio diverso: non quanto sono coerenti con il brand, ma quanto funzionano per chi le usa. Ogni pagina è stata progettata bilanciando contenuto, immagini e tipografia, senza mai sacrificare la leggibilità all’impatto visivo, né viceversa.

Le immagini giocano un ruolo strutturale, non decorativo. I layout ariosi e gli spazi generosi non sono una scelta estetica fine a se stessa: servono a dare respiro ai contenuti, a isolare ciò che è importante, a creare una gerarchia visiva che l’occhio segue senza sforzo.

Il risultato è un’interfaccia che comunica qualità prima ancora che l’utente abbia letto una parola.

Per un brand come Ottoboni, dove la cura del dettaglio è il prodotto, questo allineamento non è secondario, è il messaggio stesso.

Un sito B2B non funziona se l’utente arriva, guarda e riparte senza aver capito cosa fare. Ogni pagina di Ottoboni è progettata con un obiettivo preciso: informare, orientare, convertire — in quest’ordine.

La struttura modulare permette di organizzare servizi, prodotti e progetti in modo flessibile, adattando il layout alle esigenze di ogni sezione senza perdere coerenza complessiva. I punti di contatto — richiesta di informazioni, supporto ai professionisti, visita dello showroom — sono integrati nel flusso naturale della navigazione, non aggiunti in fondo come ripensamento.

L’obiettivo finale è che ogni utente, qualunque sia il suo punto di ingresso nel sito, trovi un percorso chiaro verso il passo successivo.

Il progetto è stato pensato mobile-first fin dall’impostazione dei wireframe. Non si è trattato di “adattare” un layout desktop allo schermo del telefono, ogni breakpoint ha le sue logiche, le sue gerarchie, il suo ritmo visivo.

Su mobile, i contenuti si riorganizzano senza perdere peso: le immagini mantengono il loro ruolo strutturale, la tipografia scala in modo che la gerarchia resti leggibile, i touchpoint di contatto restano accessibili senza bisogno di cercare.
L’esperienza non si riduce, si adatta.

Progettare per un brand con una storia richiede un approccio preciso: capire cosa non va cambiato è spesso più importante di decidere cosa innovare. Il sito Ottoboni è il risultato di questo equilibrio, un’interfaccia che porta online la stessa cura che l’azienda mette nei suoi spazi e nei suoi materiali.

Una selezione di case study in cui brand identity, architettura dell’informazione e UI design convergono per costruire esperienze digitali chiare, coerenti e orientate agli obiettivi del cliente.

Per Pane al Pane, storica pasticceria di Mantova, ho progettato il sito web con l’obiettivo di valorizzare l’identità del brand e rafforzarne la presenza online — creando un’esperienza digitale che genera nuove opportunità di vendita e amplia il mercato di riferimento.

Per Heidi Di Nicola, psicologa italiana con sede ad Amsterdam, ho progettato l’identità di brand e il sito web: un’esperienza elegante e misurata, pensata per comunicare con chiarezza la sua professionalità e facilitare il primo contatto con nuovi clienti.