Design System

Ricostruire e dare nuova vita al design system di Opyn

Anno

2024

Il mio ruolo

UX/UI Designer

Obiettivo

Riprogettare il Design System aziendale per renderlo accessibile a tutti e scalabile

Lavorando sui prodotti di Opyn ci siamo accorti che il Design System non soddisfava i bisogni dei prodotti stessi. Collaborando a stretto contatto con i team di sviluppo e marketing abbiamo messo le basi per la riprogettazione del design system.

Il problema

Chi comincia male, finisce peggio…

Il design system e stato progettato da un’agenzia esterna basandosi solamente sui bisogni di un solo prodotto.
Le foundations e i componenti non erano scalabili e mancava consistenza tra gli elementi.

Era privo di documentazione e mancava completamente la parte relativa allo sviluppo.

Il nostro processo di progettazione è inefficiente
Invece di focalizzarci su considerazioni creative di alto livello, spendavamo buona parte del nostro tempo nel risolvere problemi che erano già stati risolti ma mai documentati.
Componenti sviluppati non sono consistenti con il design

Durante lo sviluppo delle interfacce, il codice dei componenti non è stato standardizzato e gli sviluppatori non hanno creato uno UI kit.

Revisioni di design sono lunghe e dispendiose

Prima di rilasciare nuove interfacce il team di Design e di Q&A si confrontano su eventuali bug. Queste sessioni sono spesso lunghe per correggere errori di inconsistenza tra i componenti rilasciati e il design system.

La soluzione

Veniamo in soccorso al nostro Design System

Dopo qualche discussione interna al team di Design, abbiamo deciso di riprogettare il nostro Design System con l’intento risolvere i problemi di collaborazione tra i diversi team e garantire una maggiore consistenza tra il design è ciò che è stato sviluppato all’interno dei prodotti.

Analisi del Design System attuale

Valutare gli elementi esistenti, capire che cosa è obsoleto e cosa è inutile. Aggiungere ciò che manca e riprogettare da capo componenti che lo necessitano.

Prendere ispirazione da altri design system

Fare una ricerca approfondita e prendere ispirazione da casi di successo.

Fornire una documentazione per chiunque debba usare il design system

Descrivere in maniera dettagliato come ogni elemento deve essere usato, partendo da concetti di alto livello fino ad arrivare alla documentazione per sviluppatori.

Analisi del Design System attuale

Valutare gli elementi esistenti, capire che cosa è obsoleto e cosa è inutile. Aggiungere ciò che manca e ciò che necessita di essere riprogettato da capo.

Prendere ispirazione da altri design system

Fare una ricerca approfondita e prendere ispirazione da casi di successo.

Fornire una documentazione per chiunque debba usare il design system

Descrivere in maniera dettagliato come ogni elemento deve essere usato, partendo da concetti di alto livello fino ad arrivare alla documentazione per sviluppatori.

Costruire il sistema

Ripartire dalle fondamenta, non dal tetto

Foundation

Naming conventions

Avere una struttura di denominazione chiara e semantica per ogni elemento è importante, questo aiuterà ad avere una migliore collaborazione tra design e sviluppo.
Abbiamo deciso di adottare un linguaggio orientato allo sviluppo, sia per gli elementi che riguardano lo stile che per i componenti.
Foundation

Typography & color palette

Il design system esistente aveva già una buona base per quanto riguarda i colori e la tipografia. Abbiamo dovuto fare solo qualche piccolo aggiustamento.

Aggiunto diverse tonalità per i colori primari, secondari e quelli funzionali.

La tipografia aveva due dimensioni diverse per i dispositivi mobile e desktop. Abbiamo adottato un’unica scala tipografica per tutti i dispositivi.

Foundation

Visual

La maggior parte delle illustrazioni non erano consistenti. Spesso i colori utilizzati e lo spessore della traccia erano diverse, così come le dimensioni.
Abbiamo realizzato una griglia di base, uniformato la traccia e le dimensioni al fine di avere un set di illustrazioni coerenti fra loro e facili da utilizzare.
Foundation

Spacing system & ombre

Un sistema di spaziature tra elementi e padding non era ben definito, così come delle regole per l’utilizzo delle ombre per trasmettere l’elevazione degli elementi su un background.
Foundation

Libreria dei componenti

I componenti rappresentano gli elementi fondamentali e riutilizzabili del nostro Design System.

Ciascun componente è stato progettato per rispondere a specifiche necessità di UI per offrire un’esperienza utente impeccabile e soddisfacente.

Ogni componente è stato costruito usando l’auto-layout. Ognuno di esso ha le sue varianti e proprietà specificatamente create per ogni caso d’uso.

Foundation

Documentazione

Durante l’intero processo, abbiamo documentato tutti gli elementi del design system con l’obiettivo di definire tutte le nostre linee guida.
La documentazione comprende argomenti come per esempio: i breakpoint, dimensioni delle icone, formattazione dei testi, uso dei componenti e delle loro varianti. Inoltre sono illustrati alcuni casi d’uso concessi e non (dos e don’ts).

Costruire il sistema

Ripartire dalle fondamenta, non dal tetto

Foundation

Naming conventions

Avere una struttura di denominazione chiara e semantica per ogni elemento è importante, questo aiuterà ad avere una migliore collaborazione tra design e sviluppo.
Abbiamo deciso di adottare un linguaggio orientato allo sviluppo, sia per gli elementi che riguardano lo stile che per i componenti.
Foundation

Typography & color palette

Il design system esistente aveva già una buona base per quanto riguarda i colori e la tipografia. Abbiamo dovuto fare solo qualche piccolo aggiustamento.

Aggiunto diverse tonalità per i colori primari, secondari e quelli funzionali.

La tipografia aveva due dimensioni diverse per i dispositivi mobile e desktop. Abbiamo adottato un’unica scala tipografica per tutti i dispositivi.

Foundation

Visual

La maggior parte delle illustrazioni non erano consistenti. Spesso i colori utilizzati e lo spessore della traccia erano diverse, così come le dimensioni. Abbiamo realizzato una griglia di base, uniformato la traccia e le dimensioni al fine di avere un set di illustrazioni coerenti fra loro e facili da utilizzare.
Foundation

Spacing system & ombre

Un sistema di spaziature tra elementi e padding non era ben definito, così come delle regole per utilizzare le ombre per trasmettere l’elevazione degli elementi su un background.
Foundation

Libreria dei componenti

I componenti rappresentano gli elementi fondamentali e riutilizzabili del nostro Design System.

Ciascun componente è stato progettato per rispondere a specifiche necessità di UI per offrire un’esperienza utente impeccabile e soddisfacente.

Ogni componente è stato costruito usando l’auto-layout. Ognuno di esso ha le sue varianti e proprietà specificatamente create per ogni caso d’uso.

Foundation

Documentazione

Durante l’intero processo, abbiamo documentato il design system con l’obiettivo di definire tutte le nostre linee guida.

La documentazione comprende argomenti come per esempio: i breakpoint, dimensioni delle icone, formattazione dei testi, uso dei componenti e delle loro varianti. Inoltre sono illustrati alcuni casi d’uso concessi e non (dos e don’ts).

Cosa ci aspetta ora?

Job finished? I don’t think so…

Cit. Kobe Bryant

Collaborazione

Design Team & Dev

Una volta che la riprogettazione sarà quasi completa sarà importante condividere con gli sviluppatori il nuovo Figma del Design System.
Saranno quindi coinvolti per discutere insieme a noi un metodo per effettuare al meglio l’handoff.

Lo step successivo sarà quello di integrare Storybook, o altri tool simili, in questo processo per colmare il divario tra design e sviluppo in modo da avere un riscontro tra l’elemento di design e il suo codice.
Aggiorneremo la documentazione con tutte le indicazioni utili allo sviluppo.

Design Team & Content

È importante avere delle linee guida anche per chi scrive i contenuti.
Collaboreremo con il team marketing (content) per redigere una guida che al suo interno avrà tutto quello che serve per lavorare ai contenuti in modo efficiente, ordinato e coerente, dai contenuti sul sito web ai microcopy.
Se avrai un dubbio su come scrivere una data o comunicare un errore in app, questa guida avrà la risposta.