B2B: Syndigo Design System - Libreria di Componenti Unificata e Pipeline Design-to-Code
Il progetto
Panoramica del progetto
- Ruolo: Senior Manager, UX Design presso Syndigo — da nov. 2023 a oggi (oltre 10 anni di esperienza UX)
- Soluzione: Un design system unico, consolidato e code-connected che copre l'intera suite di prodotti di Syndigo …. sostituendo librerie di componenti frammentate e duplicate con un'unica fonte di verità governata, collegata direttamente a Storybook, GitHub e agli strumenti di prototipazione IA dell'azienda.
- Obiettivo: Dare a designer, ingegneri front-end e product manager un unico sistema coerente su cui costruire, eliminando il drift, colmando il divario tra design e codice e permettendo all'intera organizzazione di muoversi più velocemente senza sacrificare coerenza o accessibilità. Sono entrato in Syndigo … una piattaforma di dati di prodotto B2B che copre prodotti MDM, PXM e di syndication … come Senior Manager of UX Design. La mia responsabilità era triplice:
Guidare il design di prodotto end-to-end sui prodotti core, inclusa la piattaforma Nutrition Analysis e il Syndication Tracker , supervisionando al contempo il designer che vi lavorava al mio fianco.
Assumere la titolarità di un design system frammentato e senza governance e ricostruirlo in un'unica fonte di verità coerente e code-connected.
Gestire e far crescere un team di oltre 8 product designer, riportando al VP of Design e collaborando con il Director of Design e l'ingegneria front-end.
Processo di design
Ho affrontato la ricostruzione in fasi chiare, ciascuna radicata nell'audit.
- Audit: Ho inventariato ogni componente su tutti i prodotti, confrontato Figma con la produzione e segnalato ogni duplicato e incoerenza.
- Consolidamento: Ho ridotto ogni insieme di duplicati a un unico componente canonico, documentato ciascuno con la sua anatomia, le sue varianti e la sua cronologia delle versioni, e introdotto un workflow chiaro — ideazione, in corso, completato — con ticket allegati ai frame di design.
- Code Connect & Storybook: Per tutti gli oltre 70 componenti, ho scritto i file di Code Connect e del codice dei componenti e ho configurato Storybook per mostrare il design e la forma programmata dal vivo fianco a fianco.
- Integrazione con GitHub: Non essendoci un referente UX nel repository, l'ingegneria mi ha concesso l'accesso e ho committato i file dei componenti e di Code Connect direttamente su GitHub, chiudendo il ciclo design-to-code.
- Prototipazione basata sull'IA: Sono stato il primo in azienda a usare Figma MCP per trasformare i design in prototipi programmati e cliccabili da testare prima dello sviluppo, per poi vincolare Lovable e Claude Design ai componenti del sistema così che i team potessero generare solo lavoro conforme al sistema.
- Accessibilità: Ho costruito e verificato ogni componente affinché soddisfacesse gli standard WCAG AAA.
Accessibilità
Il sistema è stato costruito per soddisfare gli standard WCAG AAA. I componenti sono stati progettati per gli screen reader — con struttura semantica, ruoli ARIA ed etichette chiare — e testati direttamente con software per screen reader. Il colore è stato gestito per molteplici forme di daltonismo, così che nessuna informazione dipendesse mai dal solo colore. La conformità è stata verificata con strumenti automatici di accessibilità e documentata in linee guida scritte, così che ogni team potesse costruire e contribuire al sistema in modo accessibile.
Metriche di impatto
Oltre 70 componenti consolidati in un'unica fonte di verità code-connected.
La prima pipeline design-to-engineering di Syndigo, che valida i design con prototipi programmati prima dello sviluppo.
Prototipazione conforme al sistema adottata a livello aziendale tra i team di prodotto e design tramite Lovable e Claude Design.
Ridotto il tempo del ciclo design-to-development grazie a componenti coerenti e code-connected.
Contesto e definizione del problema
Il design system non aveva struttura e poca governance. Lo stesso componente spesso esisteva in diverse versioni incoerenti tra i prodotti, e nulla collegava il design al codice rilasciato: nessuno Storybook, nessun componente code-connected e nessuna presenza UX in GitHub.
Il risultato era il drift. Designer, ingegneri e product manager interpretavano ciascuno il sistema in modo diverso, rallentando la consegna e costringendo gli ingegneri a ricostruire la UI da specifiche incoerenti.
Analisi degli stakeholder
- Ingegneri front-end: Avevano bisogno di componenti che rispettassero l'intento di design e finissero direttamente in produzione, invece di ricostruire da specifiche incoerenti.
- Product designer: Il mio team aveva bisogno di un unico kit di componenti governato per potersi concentrare sulla risoluzione dei problemi anziché sulla ricreazione della UI.
- Product manager: Avevano bisogno di prototipare e testare idee rapidamente senza discostarsi dal prodotto reale.
Audit del sistema
Prima di cambiare qualsiasi cosa, ho verificato come il sistema veniva effettivamente usato, così che la ricostruzione si fondasse su prove.
- Inventario dei componenti: Catalogato ogni componente in uso e identificato i duplicati.
- Mappatura Figma-produzione: Confrontato le librerie di design con la UI rilasciata per individuare il drift.
- Interviste al team: Parlato con designer e ingegneri su dove il sistema aiutava e dove lo aggiravano.
- Plugin UI Relay: Costruito un plugin Figma personalizzato per far funzionare il sistema — mappando i componenti al codice, tracciando la copertura e lo stato del codice, generando e sincronizzando il codice dei componenti, gestendo token e template e segnalando le lacune da correggere — trasformando la governance e il design-to-code in un workflow continuo anziché in una pulizia una tantum.
Sfide e soluzioni
La sfida centrale era l'anello mancante tra design e codice. Senza una presenza UX nel repository, ho ottenuto l'accesso a GitHub e ho assunto io stesso la titolarità dei file di Code Connect e dei componenti, così che le decisioni di design raggiungessero la produzione fedelmente invece di essere reinterpretate.
La frammentazione era la seconda. Anziché controllare la coerenza a mano, ho consolidato i duplicati in componenti canonici e ho costruito il plugin UI Relay per impedire al sistema di tornare al drift.
L'adozione era la terza. Collegando il sistema agli strumenti che i team già desideravano — prototipi programmati, Lovable e Claude Design — ho reso la costruzione conforme al sistema il percorso di minor resistenza.
