Architettura & Gestione di un Design System multipiattaforma
L'azienda è una multinazionale leader nel settore AEC (Architecture, Engineering, Construction) e opera su scala globale, offrendo soluzioni software avanzate per la progettazione architettonica e la prefabbricazione automatizzata. La sua suite include strumenti complessi di modellazione 3D, software per la gestione della produzione e interfacce di controllo che integrano il mondo del digital design con i processi industriali fisici.
Tra il 2022 e il 2023 ho ricoperto il ruolo di Design System Manager, assumendo la responsabilità dell'ottimizzazione e della governance dell'intero ecosistema digitale multipiattaforma.
L'obiettivo principale del mio intervento era centralizzare il design attraverso un Design System scalabile, garantendo coerenza e accessibilità all'interno di un contesto tecnologico di frontiera. Il mio compito ha previsto il coordinamento dei designer sul corretto utilizzo dei componenti e la creazione di una documentazione tecnica granulare per il team di sviluppo.
Una sfida cruciale è stata educare il team all'implementazione dei componenti all'interno di un ambiente di sviluppo in Unreal Engine 5, traducendo le logiche di design in un ambiente nativo e gestendo sistematicamente i limiti tecnici e le prestazioni richieste dal software.
Esempio di applicazione dei principi del Design System. Il contenuto effettivo è protetto da NDA.
Modena, Italia
AEC Software
$ 1,3+ B (2023)
Obiettivo del progetto
L'incarico ha previsto la supervisione e l'evoluzione del Design System per una realtà tecnologica operante su scala internazionale. La sfida principale è consistita nel garantire la coerenza visiva e funzionale tra diverse piattaforme software complesse, gestendo contemporaneamente il trasferimento delle informazioni tra un team di design dislocato in Europa e un team di sviluppo con sede in India.
Il mio ruolo
In qualità di responsabile della libreria dei componenti, il mio compito non è stato solo la creazione di asset grafici, ma la gestione dell'intera governance dell'ecosistema digitale, agendo da ponte tecnico tra design e reparto sviluppo.
Metodologia: Atomic Design
Per garantire scalabilità e manutenibilità, ho strutturato l'intera libreria seguendo rigorosamente i criteri dell'Atomic Design.
Questo ha permesso la creazione di una gerarchia logica e modulare:
Atomi
Definizione dei token fondamentali (Colori, Tipografia, Spaziatura, Ombre, Border-radius).
Molecole
Aggregati di atomi in componenti funzionali semplici (campi di input, set di pulsanti, tooltip).
Organismi
Sezioni complesse e indipendenti (barre di navigazione, tabelle dati, finestre modali).
Template & Pagine
Validazione strutturale dei layout per garantire che ogni nuova interfaccia rispetti i vincoli del sistema predefinito.
Workflow & Design Governance
Il mio lavoro quotidiano era strutturato in tre pilastri principali, per mantenere l'integrità del sistema:
Auditing & Revisione
Monitoraggio costante dei template prodotti dai colleghi designer. Ho verificato che ogni elemento utilizzato fosse coerente con il design system e che le regole di layout fossero applicate correttamente.
Creazione dei componenti
Analisi dei nuovi requisiti di business e di design e pianificazione dei nuovi componenti su richiesta, valutando l'impatto sulla libreria esistente per evitare ridondanze.
Gestione cross-platform
Gestione della complessità derivante dalla necessità di adattare i componenti alle diverse piattaforme (Web, Desktop, Mobile), mantenendo al contempo un linguaggio visivo unificato.
Handoff tecnico & collaborazione internazionale
Un pilastro fondamentale della mia attività è stata la collaborazione con il team di sviluppo, un processo che ha richiesto un rigore comunicativo assoluto per superare le barriere geografiche e tecniche.
Il coordinamento avveniva attraverso sessioni settimanali in lingua tecnica (ENG), durante le quali conducevo un'analisi approfondita dei componenti per illustrarne i comportamenti e gli stati dinamici, come le transizioni tra i classici stati di Idle, Hover, Focus (tramite il tasto di attivazione Tab ↹ per la navigazione da tastiera) e molti altri.
Questo passaggio di consegne non si limitava all'estetica ma entrava nel merito della "grammatica" del design, definendo regole logiche e limitazioni tecniche.
Questo approccio è stato decisivo per ridurre gli attriti interpretativi tra il file di progettazione e l'implementazione del codice, garantendo che ogni componente mantenesse la propria integrità funzionale una volta sviluppato.
Documentazione tecnica (Deep Dive)
A supporto di questo flusso di lavoro, ho prodotto un'estesa documentazione tecnica per ogni singolo elemento, trasformando il Design System in una vera e propria enciclopedia operativa.
Ogni scheda è stata concepita come un documento completo che descrive l'anatomia del componente attraverso specifiche pixel-perfect e i relativi token, affiancandoli a linee guida d'uso e best practice per i designer.
Particolare attenzione è stata dedicata alla gestione degli edge case, definendo preventivamente i comportamenti del sistema in scenari critici come errori di validazione, overflow del testo o variabilità nel caricamento dei dati, rendendo così il sistema autonomo e resiliente.
Analisi anatomica di un componente Alert: come scomporre gli elementi per renderli pronti allo sviluppo.
Risultato & Valore prodotto
L'introduzione di questo sistema di governance ha permesso di stabilire una Single Source of Truth definitiva, eliminando le discrepanze visive e consolidando un linguaggio tecnico comune all'interno del team internazionale.
Il risultato più tangibile è stato un netto aumento dell'efficienza operativa: la disponibilità di componenti pre-validati e documentati ha accelerato i tempi di sviluppo, consentendo al team di concentrarsi sulle nuove funzionalità piuttosto che sulla risoluzione del debito tecnico.
L'implementazione di una documentazione così granulare, infatti, riduce solitamente le sessioni di chiarimento "back-and-forth" tra design e dev durante la fase di sprint di circa il 50%*.
*Stima basata su pattern di efficienza standard nei Design System di livello Enterprise.