Case study

Moduli digitali GUESS: da due settimane a un giorno

Il modo in cui il team ecommerce creava e pubblicava contenuti non funzionava, né come processo né dal punto di vista tecnico. Il team grafico, insieme a quello di prodotto, costruiva i contenuti in Photoshop e chiedeva agli sviluppatori di realizzare le pagine senza un design system e senza template.

L'obiettivo era un design system flessibile, che lasciasse spazio alla creatività senza far sentire nessuno dentro una gabbia, e che insieme abbattesse i tempi di sviluppo garantendo coerenza su tutti i dispositivi e i browser.

Il problema

Il team grafico e quello di prodotto costruivano i contenuti in Photoshop e chiedevano agli sviluppatori di realizzare le pagine, senza un design system e senza template a cui attenersi.

I nodi principali:

Workflow inefficiente: creare e pubblicare un contenuto era lento e frammentato
Nessun design system: ogni pagina nasceva da zero, senza coerenza
Nessun template: gli sviluppatori costruivano tutto su misura ogni volta
Sviluppo lungo: nell'implementazione si perdeva molto tempo
Test infiniti: ogni pagina andava provata su tutti i dispositivi e i browser
Nessuno standard: non esistevano componenti o pattern riutilizzabili

Il risultato era un processo che mangiava tempo in sviluppo e in test, e rendeva difficile mettere online un contenuto nuovo in fretta.

Ricerca

Ho parlato a lungo con i team di prodotto e di contenuto per arrivare a un design system che non fosse una restrizione, ma che lasciasse margine creativo senza la sensazione di stare dentro un template.

Da quel confronto è uscita la soluzione: una serie di moduli dinamici, che si adattano perché ogni modulo può variare e differenziarsi in base alla risoluzione. I moduli sono testati in anticipo su BrowserStack sui principali browser e dispositivi, così a ogni pubblicazione non serve ripetere test manuali.

Quello che è emerso: la flessibilità è essenziale, ai team serve libertà creativa e non template rigidi; l'approccio modulare permette a moduli dinamici di adattarsi a esigenze diverse; il responsive va dato per scontato, con i moduli che si differenziano da soli in base alla risoluzione; e testare in anticipo fa risparmiare tempo, perché toglie di mezzo le prove manuali sui dispositivi.

Lavorare così ha fatto sì che la soluzione rispondesse sia alle esigenze creative sia a quelle di efficienza tecnica.

Design e sviluppo

Mi sono occupato del design dei moduli in Figma e della scrittura di HTML, CSS e JavaScript, strutturati in modo che un modulo si possa caricare su un sito senza interferire con la sua interfaccia e senza farsi sovrascrivere dalle regole CSS del sito.

Il codice usa tecniche di incapsulamento del CSS, come stili con ambito limitato e convenzioni precise sui nomi delle classi, che tengono isolati gli stili di ogni modulo. Ogni modulo ha un proprio spazio di nomi chiuso che non entra in conflitto con il sito, e strategie sulla specificità impediscono agli stili globali di sovrascriverlo per sbaglio.

I moduli sono testati in anticipo su BrowserStack sui principali browser e dispositivi, il che garantisce la compatibilità e toglie di mezzo i test manuali. Ogni modulo nasce responsive e si adatta da solo a risoluzioni e tipi di dispositivo diversi.

Ne è uscito un sistema di moduli solido e flessibile, che accelera moltissimo la creazione dei contenuti mantenendo coerenza di design e qualità tecnica.

Risultati

Il sistema ha portato miglioramenti importanti sull'efficienza del flusso e sulla velocità di produzione.

I risultati:

93% di tempo in meno: da due settimane a un giorno per una home o una landing
Test azzerati: i moduli già provati eliminano le verifiche manuali su dispositivi e browser
Qualità costante: moduli standardizzati garantiscono l'aderenza al design system
Pubblicazione più rapida: meno tempo dal design al contenuto online
Libertà creativa: i team si esprimono dentro il sistema modulare
Meno carico di sviluppo: i moduli riutilizzabili riducono il codice su misura

Il sistema ha trasformato la creazione di contenuti da un processo di due settimane a un lavoro di un giorno, permettendo al team di rispondere in fretta alle esigenze di business senza perdere qualità e coerenza.

In sintesi

In GUESS il team grafico costruiva i contenuti in Photoshop e gli sviluppatori rifacevano ogni pagina da zero, senza design system né template, con test manuali su ogni dispositivo e browser. Ho progettato in Figma e scritto in HTML, CSS e JavaScript una serie di moduli dinamici con CSS incapsulato, responsive per impostazione e già testati su BrowserStack. Una home o una landing è passata da due settimane a un giorno, con i test manuali azzerati.

Domande frequenti

Cosa sono i moduli digitali GUESS?

Sono un sistema di moduli dinamici per costruire home e landing dell'ecommerce. Ogni modulo ha CSS incapsulato con un proprio spazio di nomi che non entra in conflitto con il sito, nasce responsive e si adatta da solo alla risoluzione, ed è già testato su BrowserStack sui principali browser e dispositivi.

Quale problema risolveva il design system modulare?

Il team grafico e quello di prodotto costruivano i contenuti in Photoshop e chiedevano agli sviluppatori di realizzare le pagine senza design system e senza template. Ogni pagina nasceva da zero, senza componenti riutilizzabili, e andava testata su tutti i dispositivi e i browser: mettere online un contenuto nuovo era lento.

Quali risultati ha portato il sistema di moduli?

Il tempo per una home o una landing è sceso da due settimane a un giorno, il 93% in meno. I test manuali su dispositivi e browser sono stati azzerati, i moduli standardizzati garantiscono l'aderenza al design system e i team hanno mantenuto libertà creativa dentro il sistema.

← Torna ai progetti

Cosa ho consegnato

Design e codice dello stesso sistema, con i test già fatti prima di arrivare al team contenuti.

Figma

Libreria di moduli dinamici disegnata con i team di prodotto e contenuto, con varianti per risoluzione e margine creativo dentro il sistema.

Codice

HTML, CSS e JavaScript di ogni modulo, con CSS incapsulato e spazio di nomi proprio: si carica su qualsiasi pagina senza conflitti.

Design system

Moduli standardizzati e responsive che garantiscono l'aderenza al design system su tutta l'esperienza ecommerce.

Validazione

Test in anticipo su BrowserStack sui principali browser e dispositivi: verifiche manuali azzerate, da due settimane a un giorno per una landing.

Un solo professionista per design e sviluppo: il risultato approvato è quello andato in produzione. Come consegno un redesign ecommerce →