Architecture & Management di un Design System Multi-piattaforma
La società è una multinazionale leader nel settore AEC (Architecture, Engineering, Construction) che opera su scala globale, offrendo soluzioni software avanzate per la progettazione architettonica e la prefabbricazione automatizzata. La sua suite comprende strumenti complessi di modellazione 3D, gestionali di produzione e interfacce di controllo che integrano il mondo del design digitale 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 è stato centralizzare la progettazione attraverso un Design System scalabile, garantendo coerenza e accessibilità in un contesto tecnologico di frontiera. Il mio compito ha previsto il coordinamento dei designer sull'uso corretto dei componenti e la creazione di una documentazione tecnica granulare per il team di sviluppo.
Una sfida cruciale è stata l'istruzione del team di engineering per l'implementazione dei componenti all'interno di un ambiente di sviluppo in Unreal Engine 5, traducendo le logiche di design in ambiente nativo e gestendo sistematicamente le limitazioni tecniche e le performance richieste dal software.
Esempio dei principi del Design System applicati. I contenuti reali sono protetti da NDA
Modena, Italia
AEC Software
$ > 1,3B (2023)
L'obiettivo del progetto
L'incarico prevedeva la supervisione e l'evoluzione del Design System per una realtà tecnologica operante su scala internazionale. La sfida principale consisteva nel garantire coerenza visiva e funzionale tra diverse piattaforme software complesse, gestendo al contempo il passaggio di informazioni tra un team di progettazione dislocato in Europa e un team di sviluppo basato in India.
Il mio ruolo
In qualità di responsabile del sistema, il mio compito non era solo la creazione di asset grafici, ma la gestione dell'intera governance dell'ecosistema digitale, agendo da ponte tecnico tra design ed engineering.
Metodo: Atomic Design
Per garantire scalabilità e manutenibilità, ho strutturato l'intera libreria seguendo rigorosamente i criteri dell'Atomic Design.
Questo ha permesso di creare una gerarchia logica e modulare:
Atomi
Definizione dei token fondamentali (Colori, Tipografia, Spacing, Shadow, Border-radius).
Molecole
Aggregazione di atomi in componenti funzionali semplici (Input fields, Button sets, Tooltips).
Organismi
Sezioni complesse e indipendenti (Navigation bars, Data tables, Modali).
Template & Pagine
Validazione strutturale dei layout per assicurare che ogni nuova interfaccia rispettasse i vincoli del sistema predefinito.
Workflow & Design Governance
Il mio lavoro quotidiano si articolava su tre direttrici principali per mantenere l'integrità di sistema:
Auditing & Review
Monitoraggio costante dei template prodotti dai colleghi designer. Verificavo che ogni elemento utilizzato fosse censito nel sistema e che le regole di layout fossero applicate correttamente.
Component Creation
Analisi delle nuove necessità di business e progettazione di nuovi componenti su richiesta, valutando l'impatto sulla libreria esistente per evitare ridondanze.
Cross-Platform management
Gestione della complessità derivante dalla necessità di adattare i componenti a diverse piattaforme (Web, Desktop, Mobile), mantenendo un linguaggio visivo unificato.
Technical Handoff & International collaboration
Un pilastro fondamentale della mia attività è stata la collaborazione con il team di sviluppo, un processo che richiedeva un rigore comunicativo assoluto per superare le barriere geografiche e tecniche.
Il coordinamento avveniva tramite sessioni settimanali in linguaggio tecnico (ENG), durante le quali conducevo un'analisi approfondita dei componenti per illustrarne comportamenti e stati dinamici, come le transizioni tra i classici stati di Idle, Hover, Focus (tramite l'activation key "TAB", per 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. Tale approccio è stato determinante per ridurre le frizioni interpretative tra il file di progetto e l'implementazione del codice, garantendo che ogni componente mantenesse la sua integrità funzionale una volta sviluppato.
Documentazione Tecnica (Deep Dive)
Per supportare 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 progettata per essere un documento esaustivo che descrivesse l'anatomia del componente attraverso specifiche pixel-perfect e token associati, affiancandoli a linee guida d'uso e best practices per i designer.
Particolare attenzione è stata dedicata alla gestione dei casi limite, definendo preventivamente i comportamenti del sistema in scenari critici come gli errori di validazione, l'overflow dei testi o la variabilità del caricamento dati, rendendo così il sistema autonomo e resiliente.
Analisi anatomica di un componente Alert: come scomporre gli elementi per renderli pronti allo sviluppo.
Risultati & Valore aggiunto
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 tra il team internazionale.
Il risultato più tangibile è stato un netto incremento dell'efficienza operativa: la disponibilità di componenti pre-validati e documentati ha accelerato i tempi di sviluppo, permettendo al team di concentrarsi su nuove funzionalità piuttosto che sulla risoluzione del debito tecnico.
L'implementazione di una documentazione così granulare, infatti, riduce solitamente di circa il 50%* le sessioni di chiarimento "back-and-forth" tra design e dev, in fase di sprint.
*Stima basata su pattern di efficienza standard nei Design System di livello Enterprise