Le variabili aiutano Adyen a semplificare il suo sistema di progettazione con Figma

Adyen è una realtà Fintech all'avanguardia, che opera in un settore in rapida evoluzione. Questa piattaforma di tecnologia finanziaria mette a disposizione dei commercianti pagamenti end-to-end, dati e gestione finanziaria tutto da un'unica piattaforma. Con Adyen che ha il pieno controllo sul flusso di pagamento, i commercianti non devono più preoccuparsi di gestire più fornitori diversi, e possono affidarsi a una sola piattaforma, con vantaggi per tutti.

Adyen mira a offrire il set di portali fintech più orientato al cliente ed efficiente sul mercato, con particolare attenzione posta sull'esperienza utente. Pertanto, non c'è da sorprendersi che Adyen abbia un team di UX design composto da 70 persone: 44 designer di prodotto, 15 UX researcher e 11 UX writer.

In passato, mantenere tutti allineati poteva rivelarsi una sfida. Con gli strumenti di progettazione usati in precedenza, l'azienda si trovava infatti a dover gestire processi disconnessi e flussi di lavoro farraginosi e inefficienti.

Ma grazie a Figma e FigJam, Adyen è riuscita a semplificare il suo sistema di progettazione e suoi processi.

Il passaggio a Figma

Il team di design di Adyen ha capito che c'era bisogno di una base ben strutturata, per ottimizzare le operazioni di progettazione e, pertanto,ha costruito un nuovo sistema di progettazione, chiamato Bento, in Figma. L'azienda sta progressivamente portando tutti i team su Bento, che raccoglie Elementi fondamentali, Icone, Componenti, Pattern, Utility e Archivi, per abbandonare definitivamente il sistema di progettazione della community che alcuni team stanno ancora usando.

Bento ha incrementato il livello di efficienza e portato più struttura al modo di lavorare del team di design di Adyen. Prendendo le Utility come esempio, qui è dove vengono conservati i componenti del SOS (System of System), che vengono utilizzati per creare la documentazione del sistema di progettazione. "Tutti gli elementi vengono distribuiti ai team sotto forma di librerie e Figma ha reso estremamente semplice propagare modifiche e aggiornamenti alle istanze di stili e componenti", rivela Luiza Breier, responsabile del design di Adyen, che aggiunge inoltre che le librerie del sistema di progettazione sono attive come impostazione predefinita per tutti i team.

Una delle sfide più interessanti è stata capire come abilitare il supporto multitema per i team, che è stata risolta creando un sistema di colori multilivello.

Il livello base contiene tutte le definizioni dei colori che non sono disponibili per i designer o gli ingegneri, ma che servono da palette di selezione per il team del sistema di progettazione. Sopra al livello base è stato costruito un livello semantico, che ha colori definiti in base al relativo ruolo nell'UI, anziché alla tonalità.

Il livello semantico è a disposizione di designer e ingegneri e può essere utilizzato nel lavoro di design/creazione del prodotto. Questo livello consente ai designer di progettare prodotti tenendo conto dei ruoli.

I colori guidati semanticamente all'interno dei progetti funzionano in diverse modalità colore (chiara/scura). Inizialmente, Adyen utilizzava stili di colore per questo aspetto, ma per non sovraccaricare i designer con varianti sia chiare che scure ha scelto di rendere disponibili per impostazione predefinita solo i colori in modalità chiara. Dopo l'introduzione delle variabili questo problema è stato risolto direttamente da Figma.

Adyen ha spostato colori, spaziature e raggi dei bordi sulle Variabili e aggiornato tutti i componenti Figma con queste variabili.

"Ora, grazie alle variabili, il cambio di tema richiede solo pochi clic ed è completamente automatizzato. I designers possono progettare nella modalità chiara, quindi passare alla modalità scura per assicurarsi che i colori semantici che hanno selezionato siano corretti e funzionino come previsto in quella modalità", rivela Sergii Polkovnikov, designer di prodotto del team di Bento.

Oltre a usare Figma per velocizzare i processi, Luiza e il team lavorano duramente per capire come viene utilizzato il sistema di progettazione. I designer utilizzano le analitiche del sistema di progettazione in Figma Enterprise per monitorarne l'utilizzo e hanno inoltre creato una propria dashboard usando l'API di Figma.

"Questo significa che siamo in grado di monitorare tutte le importazioni dei componenti usati in Figma, quante istanze, quali team stanno usando cosa ecc.", afferma. "In questo modo, possiamo individuare subito quando un componente viene staccato, grazie a un link diretto al file Figma che mette in evidenza il componente scollegato".

Tracciare le cose in questo modo aiuta il team dei sistemi di progettazione a comprendere come stanno andando le migrazioni, consentendogli di capire quale designer ha staccato un dato componente, in modo che possano confrontarsi e valutare il caso d'uso specifico.

FigJam semplifica la pianificazione strategica

La collaborazione nel flusso di lavoro è cambiata anche sotto altri punti di vista. Il team dei sistemi di progettazione di Adyen utilizza FigJam come strumento per la pianificazione strategica e come piattaforma per condividere risorse e conoscenze, migliorando la collaborazione visiva in diversi ambiti.

FigJam viene usato per mantenere aggiornata la visione del prodotto e l'allineamento all'interno e all'esterno del team: dalle sessioni di brainstorming online fino al confronto con gli stakeholder di altri team, come l'ingegneria, sulle priorità.

FigJam è diventato cruciale anche per le retrospettive dei team e la pianificazione trimestrale, aiutando i designer a riflettere sul modo in cui collaborano e a definire azioni concrete per migliorare il loro lavoro.

Miglioramenti che abbracciano l'intera azienda con Figma

La combinazione di Figma e FigJam ha migliorato radicalmente il modo in cui Adyen utilizza il suo sistema di progettazione, portando le risorse su un'unica piattaforma, creando un'esperienza più fluida e offrendo elevati livelli di collaborazione.

L'azienda ora riesce a controllare meglio i costi, sfruttando una gestione più efficace delle autorizzazioni di modifica, attribuendo la responsabilità al reparto competente e ottimizzando l'utilizzo delle postazioni.

Anche i designer stanno risparmiando tempo grazie a un feedback più rapido, alla possibilità di riutilizzare il lavoro più facilmente, progettando e poi apportando modifiche rapide attraverso le Variabili e usando l'automazione offerta dall'API di Figma per ottimizzare i flussi del sistema di progettazione.

Ma secondo l'azienda uno dei principali vantaggi offerti dall'adozione di Figma è l'impatto che ha avuto nel facilitare la collaborazione e la condivisione dei file, in un team che nel frattempo era passato da otto designer a 70.

"Essendo una piattaforma con base cloud, Figma ci permette di collaborare a livello aziendale, abbracciando tutti i diversi dipartimenti, consentendoci di mostrare il lavoro, ricevere input e feedback rapidi e ottenere un vantaggio competitivo in un settore in rapida evoluzione come il FinTech", osserva Luiza.