Milky Way: il Design System di Contactlab

I punti di contatto digitali tra brand e consumatori aumentano continuamente e questo rende sempre più importante porre attenzione e mantenere coerenza e uniformità tra i diversi canali e la moltitudine di dispositivi a disposizione. L’utente di oggi infatti passa con estrema facilità da una pagina web su desktop a un’applicazione mobile e non sono rari i casi in cui si trova a navigare da un prodotto a un altro, entrambi appartenenti allo stesso ecosistema ma senza averlo deciso a priori.

Il progetto di sviluppo dell’esperienza unificata della Contactlab Marketing Cloud cresce pari passo con queste considerazioni e arriva a definire un insieme di regole e linee guida per mantenere coerenza e continuità all’interno dello stesso universo. Il Design System è lo strumento a disposizione di Designer, Developer, Marketer e in generale di chi progetta prodotti e servizi immersi in un contesto complesso.

Il Design System

Una domanda che ci viene posta spesso è se serva davvero. Non esiste una risposta semplice e soprattutto unica, tutto dipende da quanta cura e rispetto sono messi nell’applicazione e nell’aggiornamento del Design System.

L’approccio di molte aziende è quello di creare un catalogo di componenti UI  – la cosiddetta design library – cercando di preservare la consistenza del brand e con lo scopo di efficientare la fase di sviluppo Front-End di nuovi prodotti. Una volta implementati e manipolati per adattarli a contesti specifici, succede spesso che i singoli componenti subiscano delle variazioni anche drastiche che riguardono ad esempio le proporzioni o il look & feel. Questo provoca stravolgimenti con impatti sull’utilizzo e sull’interazione tra prodotto e utente. Il Designer, spesso solo in un organizzazione magari corposa, non riesce a seguire tutta la filiera di creazione e manutenzione di uno o più prodotti.

Da ciò emerge come una design library non possa assicurare un risultato ottimale se non accompagnata da una governance che ne garantisca applicazione e mantenimento, nonostante sia il risultato di un’attività continua, lunga e costosa in termini di progettazione e di sviluppo.

Il Design System estende il concetto di catalogo di componenti UI perché prevede una serie di regole e pratiche condivise per aggiornare e innovare questo set, definendo un sistema di governance della design library.

Cosa troviamo nel Design System

Milky Way è il Design System della piattaforma di Contactlab. Abbiamo scelto questo nome in omaggio al nostro sistema solare Via Lattea, un insieme di pianeti e regole.

TopTen DesignL’ispirazione arriva fino alle illustrazioni a tema spaziale – nuovo stile, nuove regole, altre prospettive per nuove frontiere – che stanno dando linfa alla nostra Marketing Cloud. L’idea è quella di una costellazione di elementi che si relazionano tra loro, evolvono e si muovono come uno solo. L’insieme di principi e convenzioni su cui si basano queste associazioni sono condivise e trattate in una serie di articoli dedicati all’interfaccia della Contactlab Marketing Cloud.

Ogni Design System è progettato partendo dalle esigenze aziendali e dal tipo di prodotti a cui dovrà essere applicato.

Esisto però alcuni elementi ricorrenti che è possibile riscontrare anche nel Design System di Contactlab:

  • Pattern funzionali, ovvero delle soluzioni consolidate a un problema di progettazione comune.
  • Una styleguide, ovvero una serie di linee guida e attributi che influenzano l’aspetto di una interfaccia con il fine di trasmettere un’identità a prescindere dalle funzionalità del prodotto.
  • Pratiche, tecniche, approcci e processi che influenzano i team coinvolti nella progettazione del prodotto.
  • Componenti UI, ovvero blocchi ripetibili e riutilizzabili di un’interfaccia.

Inoltre un Design System può inglobare una Brand Identity cioè tutta quella documentazione a supporto dell’identità aziendale anche se non strettamente legata al mondo digitale: la mission, la vision, il tone of voice, indicazioni sull’utilizzo del logo, sulla composizione tipografica e fotografica, etc. Noi, in Milky Way abbiamo adottato questo approccio.

I vantaggi di un Design System

Il Design System di Contactlab è indispensabile affinché la piattaforma e le sue funzionalità possano continuare a evolvere con un forte impatto sulla coerenza – stilistica e di utilizzo – riducendo nel mentre il tempo di progettazione e il debito tecnico. In generale, un sistema di progettazione ben oliato e ben utilizzato favorisce:

  • Un’esperienza utente di livello superiore.
  • Un aumento della qualità percepita del prodotto.
  • Una riduzione significativa delle richieste di supporto.
  • Una diminuzione del tempo necessario alla risoluzione di bug e incongruenze.

Nell’articolo di Ryan Lum How to measure a Design System’s impact è illustrata in maniera esaustiva una modalità oggettiva e soggettiva per misurare l’impatto di un sistema di progettazione su tre aree chiave: l’utente, l’azienda e il team di lavoro.

Il Sistema Contactlab

Milky Way - infographic

 

Per la piattaforma Contactlab Marketing Cloud abbiamo adottato un approccio sistemico. Siamo partiti definendo e teorizzando una serie di principi e regole che portassero ordine nell’entropia dei processi di design e sviluppo delle interfacce. Abbiamo adottato come libreria di componenti un progetto open-source, Ant Design, adattabile ai più recenti stack tecnologici Front-End (Angular, Vue, React, React Native). Attraverso dei Token – oggetti chiave/valore – siamo in grado di alimentarlo con i nostri stili e le nostre regole. L’entità di questi stessi Token varia a seconda del linguaggio e della tecnologia utilizzata e sono distribuiti tramite un unico pacchetto NPM. Inoltre, è disponibile un ulteriore pacchetto che può essere installato nel progetto e fornisce le risorse statiche create in fase di prototipazione di una sezione o di una funzionalità, come ad esempio pagine di servizio, illustrazioni, loghi e icone. Le singole parti vanno a costituire una galassia composta e articolata in tanti sotto-sistemi. Da qui, di nuovo, il nome Milky Way.

Concludendo

Se fossi curioso di approfondire con noi tutto sulla nostra Milky Way, dall’origine alla prossima evoluzione, puoi chiamarci subito. Oppure naviga nella documentazione che abbiamo reso accessibile anche a te. Il materiale è infatti open source: dai codici sorgenti dei Design Token su GitHub alla documentazione di design ospitata invece su Notion per far si che tutti siano in grado di aggiornarla senza particolari competenze tecniche.

 

__________________

Scopri la serie dedicata alla UX/UI della Marketing Cloud!

Empty States Colors Typo Elevators Structure
EMPTY STATES COLORE TIPOGRAFIA ELEVAZIONE
STRUTTURE