Gruppo BCC Iccrea
Harmonia Digitale
Il restyling del design system Iccrea
Cliente
Il Gruppo BCC Iccrea è costituito oggi da 115 Banche di Credito Cooperativo, presenti in oltre 1.700 comuni italiani con quasi 2.500 sportelli, e da altre società bancarie, finanziarie e strumentali controllate da BCC Banca Iccrea. Il Gruppo aderisce alla Fondazione Tertio Millennio ETS, un organismo che sviluppa esclusivamente attività di solidarietà sociale in Italia e all’estero.
Richiesta
La richiesta del cliente era quella di riuscire a gestire la migrazione di tutto il Design system dalla piattaforma Adobe Xd (Experience designer) a Figma, quindi un vero e proprio cambio di tecnologia. Dovendo attuare tutte queste modifiche contemporaneamente, si è scelto di fare anche una razionalizzazione di tutto quello che è il Design system e di modulare tutte le componenti di base in un’ottica più accessibile.
Sfida e attività
La sfida era gestire un design system complesso, coordinando designer e sviluppatori per aggiornare sia la tecnologia che il design. Le attività principali comprendevano la migrazione del sistema da Adobe Xd a Figma, l’aggiornamento del framework a Bootstrap 5 e la razionalizzazione delle componenti per migliorarne la modularità e l’accessibilità. Questo processo ha richiesto una stretta collaborazione tra i team per garantire coerenza ed efficienza durante la transizione.
Metodologia
Dopo un’analisi iniziale, sono state definite linee guida chiare per il team. È stato adottato l’approccio dell’Atomic design, che prevede la costruzione dell’interfaccia a partire da unità di base (atomi) per poi creare strutture più complesse (molecole e organismi). Inoltre, i design token sono stati utilizzati per standardizzare colori e tipografia, facilitando il lavoro degli sviluppatori e garantendo coerenza. I componenti sono stati ricostruiti e normalizzati, consentendo la creazione di elementi più complessi e template ben strutturati, migliorando così l’efficienza e la coerenza del processo di design e facilitando la collaborazione tra i team.
Risultati
Dopo un’analisi iniziale, sono state definite linee guida chiare per il team. È stato adottato l’approccio dell’Atomic design, che prevede la costruzione dell’interfaccia a partire da unità di base (atomi) per poi creare strutture più complesse (molecole e organismi). Inoltre, i design token sono stati utilizzati per standardizzare colori e tipografia, facilitando il lavoro degli sviluppatori e garantendo coerenza. I componenti sono stati ricostruiti e normalizzati, consentendo la creazione di elementi più complessi e template ben strutturati, migliorando così l’efficienza e la coerenza del processo di design e facilitando la collaborazione tra i team.
