Olinda è molto più di un’organizzazione: è un ecosistema che intreccia inserimento lavorativo, cultura, ristorazione, ospitalità e rigenerazione urbana all’interno degli spazi dell’ex ospedale psichiatrico Paolo Pini di Milano. Un sistema vivo, composto da realtà diverse come Jodok, OstellOlinda, TeatroLaCucina e il festival “Da vicino nessuno è normale”, ognuna con una propria identità, ma tutte parte di una visione comune.
La sfida non era solo progettare nuovi siti, ma dare forma a un ecosistema complesso, rendendone leggibili relazioni, obiettivi e strumenti. Attraverso un percorso di workshop e analisi, abbiamo lavorato insieme al team Olinda per costruire una visione condivisa e definire una strategia digitale capace di tenere insieme identità diverse senza perdere coerenza.
Su queste basi abbiamo progettato e sviluppato un sistema WordPress Multisite, basato sull’infrastruttura Flying di PaperPlane, pensato per supportare la crescita dell’ecosistema mantenendo riconoscibilità, autonomia e sostenibilità nel tempo.
Richiesta
Costruire una strategia digitale capace di dare coerenza a un ecosistema complesso, chiarendo la relazione tra le diverse anime di Olinda e semplificando architettura, gestione dei contenuti e percezione complessiva del sistema.
Risultato
Un ecosistema digitale strutturato e scalabile che rende leggibile la complessità, rafforza la riconoscibilità dei brand e semplifica la gestione dei contenuti, supportando una crescita sostenibile nel tempo.
Workshop e analisi
Il progetto è iniziato con una fase di workshop strategici che ha coinvolto il team di Olinda in un lavoro di allineamento su missione, priorità e architettura dei contenuti. L’obiettivo era chiarire le relazioni tra approccio, percorsi e progetti concreti, distinguendo ciò che rappresenta la visione di Olinda da ciò che costituisce la sua operatività quotidiana.
Abbiamo ridefinito l’architettura informativa partendo da una domanda semplice: come rendere leggibile un sistema complesso senza generare sovraccarico cognitivo? La risposta è stata costruire una struttura gerarchica chiara, capace di separare identità, percorsi di cura, progetti, servizi business e donazioni, mantenendo connessioni logiche ma non ridondanti.
Il sito principale diventa così hub narrativo e istituzionale, mentre i singoli brand verticali approfondiscono la propria offerta con un linguaggio e un tono coerenti con il loro pubblico di riferimento, facilitando l’orientamento e la comprensione dell’intero ecosistema.
Mappatura dell’identità e della proposta di valore attraverso il modello del Golden Circle (Perché, Come, Cosa).
Identificazione dei driver di successo (vento), delle criticità interne (ancora) e delle minacce esterne (squali) per la sostenibilità del progetto tramite la metafora della barca a vela.
UX
La progettazione UX ha lavorato per semplificare i flussi decisionali e ridurre il carico cognitivo, in un ecosistema che coinvolge pubblici molto diversi. Donatori, aziende, spettatori, clienti del ristorante, ospiti dell’ostello e persone in cerca di supporto devono poter individuare rapidamente il proprio percorso.
Abbiamo strutturato le pagine affinché il racconto valoriale fosse sempre accompagnato da azioni concrete: sostenere, prenotare, scoprire, partecipare. La gerarchia dei contenuti, la chiarezza delle CTA e la trasparenza sui risultati rafforzano la fiducia e rendono l’esperienza orientata all’azione.
Particolare attenzione è stata dedicata alla coerenza semantica e alla leggibilità, elementi fondamentali per facilitare l’orientamento e rendere accessibile un ecosistema che parla di fragilità, inclusione e responsabilità sociale.
UI
Il progetto ha portato alla costruzione di un design system modulare capace di declinarsi su tutti i siti dell’ecosistema.
Abbiamo progettato moduli e componenti riutilizzabili – hero narrativi, card progetto, sezioni di approfondimento, template menu e layout dedicati – che garantiscono coerenza visiva e funzionale tra i diversi brand. La struttura rimane riconoscibile, ma ogni sito esprime una propria personalità attraverso palette, ritmo tipografico, immagini e tono visivo.
Olinda mantiene una dimensione più istituzionale e narrativa. Jodok valorizza accoglienza e convivialità. OstellOlinda comunica ospitalità e integrazione. TeatroLaCucina e il festival esprimono energia culturale.
Il sistema non uniforma: definisce una grammatica comune che consente a ogni brand di parlare con voce propria restando parte di un’unica identità. La collaborazione con Carlo Gazzi, autore delle illustrazioni, ha rafforzato ulteriormente questa coerenza, contribuendo a costruire un linguaggio visivo riconoscibile e trasversale a tutto l’ecosistema.
Questo approccio rende il sistema scalabile, facilita l’introduzione di nuovi progetti e accompagna l’utente in un’esperienza coerente anche nel passaggio tra i diversi siti.
Le illustrazioni non sono un elemento decorativo, ma parte integrante del design system. Abbiamo progettato un impianto modulare collegato ai componenti dell’interfaccia – CTA, citazioni, separatori, highlight e aperture – replicabile su tutti i siti dell’ecosistema.
Ogni brand dispone di un proprio set, costruito secondo proporzioni e regole comuni. Questo garantisce riconoscibilità trasversale e continuità visiva, assicurando al tempo stesso identità e carattere specifico per ciascuna realtà.
Il lavoro sulle palette è partito dai colori di brand esistenti, quando presenti, oppure dalla loro definizione strategica. Attorno al colore principale abbiamo costruito accenti e tonalità di servizio coerenti con il posizionamento di ciascun brand.
Ogni scelta cromatica è stata validata in ottica accessibilità: il colore di brand garantisce un contrasto minimo di 3:1 rispetto al fondo bianco, rendendolo idoneo per titoli di modulo, highlight e componenti grafici ad alta visibilità. Allo stesso modo, la relazione tra colore di brand e colore di accento è stata calibrata per mantenere distinguibilità e gerarchia visiva, in particolare negli elementi interattivi come bottoni e call to action.
Il risultato è un ecosistema cromaticamente armonico, riconoscibile e accessibile by design, dove il colore non è solo identità ma anche strumento funzionale.
Sviluppo
L’architettura tecnica è stata progettata per riflettere la natura modulare di Olinda. Abbiamo scelto di sfruttare l’infrastruttura WordPress multisite, insieme al nostro framework Flying, per centralizzare la gestione del codice pur lasciando massima libertà espressiva per i singoli siti.
Questa scelta garantisce un importante vantaggio in termini di sostenibilità economica, un aspetto cruciale per una OdV (Organizzazione di Volontariato): per questo abbiamo progettato una rete che poggia su un’unica installazione, permettendo di abbattere i costi di hosting e di manutenzione rispetto alla gestione di molteplici istanze separate. Gli aggiornamenti di sicurezza e le ottimizzazioni vengono eseguiti una sola volta, riflettendosi istantaneamente su tutti i nodi dell’ecosistema.
Per evitare la proliferazione di fogli di stile ridondanti, abbiamo realizzato un sistema di custom properties (variabili CSS). Questo approccio permette al core del tema di rimanere unico, mentre l’identità visiva (colori, font, asset grafici) cambia dinamicamente in base alla classe applicata al body di ogni sito.
Questa architettura ci ha permesso di gestire in modo centralizzato due aspetti fondamentali dell’identità visiva:
In un ecosistema integrato, le informazioni non devono vivere in silos isolati. Abbiamo sviluppato un sistema di distribuzione asincrona dei contenuti che permette di far dialogare i diversi siti del network senza appesantire il database.
Un caso d’uso emblematico è il modulo “Cosa succede a Olinda”. Attraverso un’integrazione personalizzata delle REST API di WordPress, recuperiamo le notizie e gli eventi in tempo reale dal sito principale e li distribuiamo sugli altri touchpoint (Jodok, TeatroLaCucina, OstellOlinda).
L’implementazione via JavaScript permette di filtrare i contenuti in base alla pertinenza temporale direttamente lato client, assicurando che l’utente visualizzi solo le iniziative ancora attive e garantendo, al contempo, prestazioni elevate durante il rendering delle pagine.
Efficienza operativa: grazie a questa architettura e alla natura semplificata di gestione richiesta da una OdV, il flusso di lavoro è ridotto all’essenziale: il team pubblica un contenuto una sola volta e questo viene automaticamente propagato in tutto l’ecosistema, minimizzando lo sforzo dei collaboratori e garantendo informazioni sempre aggiornate.
Alex Bellini | Siti Web
Rita's Tiki Room | Siti WebBrand Identity
