Ruggable rende 10 volte più veloce il passaggio dalla progettazione allo sviluppo con Figma

Riepilogo:

Ruggable, l'azienda innovatrice dietro ai tappeti lavabili in lavatrice, ha rivoluzionato l'arredamento per la casa con una soluzione pratica e alla moda. Data la sua crescita vertiginosa, passando da piccola impresa a marchio internazionale operante in otto mercati, e si è trovata ad affrontare la sfida di riuscire a espandere le proprie operazioni di progettazione in modo efficiente e preservare la coerenza in ogni punto di contatto.

Con Figma, Ruggable è riuscita a riunire i team, ottimizzare i suoi flussi di lavoro e rivoluzionare il passaggio dalla progettazione allo sviluppo, accelerandolo di ben dieci volte, rafforzando così la collaborazione tra i team responsabili di UX, creatività e di sviluppo.

Sfida: crescita rapida, strumenti frammentati

Data l'espansione globale di Ruggable, i suoi flussi di lavoro di progettazione e sviluppo dovevano riuscire a stare al passo con esigenze in costante crescita. In precedenza, i team di Ruggable si affidavano a più strumenti non integrati tra loro per la progettazione e la prototipazione, il che generava un flusso di lavoro frammentato che rallentava la collaborazione, comportava lavoro extra e rendeva molto più difficile preservare la coerenza tra i vari progetti.

La mancanza di visibilità tra i team ha ulteriormente aggravato queste sfide, rendendo più difficile allinearsi e garantire un'esperienza coerente con il marchio. "In passato, i team di UX ed e-commerce operavano separati da quelli responsabili del brand e della creatività, e disponevano di una visibilità limitata sui flussi di lavoro reciproci", rivela Alicia.

Senza un sistema unificato, le incoerenze si insinuavano nell'esperienza del cliente. I colori dei pulsanti, le dimensioni dei font e i layout variavano tra le e-mail, le landing page e le pubblicità sui social, indebolendo la fiducia nel marchio.

"L'esperienza dei clienti era sempre diversa e disomogenea, che si trattasse di un'e-mail, una landing page o dei contenuti sui social. Seppur lievi, quelle incoerenze erano ben visibili e rendevano tutto molto disconnesso", afferma Alicia Clapper, responsabile UX e design di prodotto di Ruggable.

Soluzione: organizzare i team e le autorizzazioni per favorire la scalabilità in Figma

Il piano Organization di Figma ha fornito a Ruggable una piattaforma centralizzata per unificare le sue operazioni di progettazione e migliorare la collaborazione tra i team. Grazie a team illimitati e autorizzazioni ben strutturate, Ruggable è riuscita a creare spazi di lavoro dedicati per i team di marketing, brand e prodotto, eliminando le barriere e mantenendo progetti e campagne sempre allineati.

La chiave di questa trasformazione è stata la piattaforma unificata di Figma, che è diventata la fonte di informazioni centralizzata di Ruggable, che raccoglie componenti, stili, layout e variabili. Grazie alle autorizzazioni a livello di organizzazione, ora gli aggiornamenti non interrompono più i progetti live e si sincronizzano automaticamente tra i team, evitando di dover duplicare i file o monitorare i cambiamenti manualmente, facendo risparmiare tempo ed eliminando le incoerenze.

Grazie a un sistema di progettazione centralizzato in Figma, Ruggable è riuscita a espandere le proprie operazioni, assicurandosi però che ogni campagna ed esperienza fosse sempre in linea con il brand. In passato, i designer dovevano copiare e incollare manualmente gli elementi nei file e perdere tempo a verificare le versioni per garantire l'accuratezza.

"Prima di Figma, copiavamo e incollavamo pagine tra i vari progetti. Il controllo delle versioni era praticamente inesistente, quindi dovevamo costantemente verificare per essere certi di utilizzare i file più recenti", dice Alicia.

Figma ha eliminato tutti questi rallentamenti, sincronizzando automaticamente gli aggiornamenti tra tutti i file. In più, grazie a Dev Mode, gli sviluppatori ora hanno un accesso diretto alle specifiche e ai progetti finalizzati, riducendo le comunicazioni inutili e rendendo i passaggi di consegne molto più fluidi e veloci.

Una scalabilità più veloce, passando da aggiornamenti che durano una settimana a modifiche in un giorno

L'integrazione del sistema di progettazione con il sistema di gestione dei contenuti (CMS) di Ruggable ha inoltre dato la possibilità anche ai non designer di riuscire ad aggiornare contenuti e creare landing page, riducendo così la dipendenza dal team di design, pur assicurando la coerenza del brand.

Questo approccio più snello ha portato a un significativo risparmio di tempo, specialmente nelle campagne ad alta priorità. "In passato gli aggiornamenti per il Black Friday richiedevano più di una settimana. Adesso per apportare quelle modifiche ci basta meno di un giorno", rivela Alicia.

Figma ha inoltre aiutato a standardizzare le risorse del marchio di Ruggable, mentre l'azienda si espandeva verso mercati internazionali. Grazie ai font condivisi, i team non devono più perdere tempo a cercare tra le risorse del brand o a risolvere problemi di font mancanti. Ora, tutti i collaboratori, compresi i professionisti a contratto e i team internazionali, possono accedere istantaneamente al tipo di font corretto.

"Avere i font integrati in Figma si è rivelato un grande aiuto", rivela Alicia. "Prima, i collaboratori e i team internazionali mi chiedevano costantemente i file dei font solo per modificare il testo. Ora, tutto è integrato e la collaborazione è molto più facile".

Passaggi di consegne più semplici e 10 volte più veloci con Dev Mode

Dev Mode ha trasformato il modo di collaborare dei team di progettazione e sviluppo di Ruggable, colmando il divario tra l'intento del design e l'implementazione nel codice. In precedenza, i passaggi di consegne erano lenti e inclini agli errori: i designer aggiungevano manualmente delle note ai file, mentre gli sviluppatori dovevano setacciare le varie versioni per trovare il progetto più aggiornato.

"Quando in una sola pagina erano presenti diverse iterazioni, era difficile capire quale versione di un progetto utilizzare", riferisce Tia Rexine, ingegnere del software presso Ruggable.

Questa mancanza di chiarezza comportava spesso ritardi, fraintendimenti e riunioni aggiuntive. Ora, grazie a Dev Mode, gli sviluppatori possono accedere istantaneamente alle specifiche dettagliate, come font, colori, spaziatura, direttamente nei file di design, riducendo la necessità di ricorre alle annotazioni manuali.

Per snellire ulteriormente il processo, i team utilizzano la funzione "Ready for dev" per tenere traccia dei progetti che sono stati finalizzati e assicurarsi che gli sviluppatori lavorino sempre con le versioni più recenti che sono state approvate, riducendo al minimo gli andirivieni inutili.

Un altro grande vantaggio in termini di efficienza deriva dall'integrazione del codice incorporata in Dev Mode. Gli sviluppatori possono ispezionare ed estrarre direttamente le proprietà CSS dai file di design, recuperando istantaneamente font, stili di testo e valori di spaziatura.

Oltre alle specifiche e al codice, Dev Mode centralizza anche le risorse essenziali del progetto. Gli sviluppatori ora possono accedere a SVG, file dei font e guide di stile in un unico posto, senza dover più perdere tempo a cercare le risorse nei diversi strumenti.

Questi miglioramenti hanno avuto un impatto profondo sul flusso di lavoro di Ruggable. Attività che prima richiedevano delle ore, per via di annotazioni manuali e continui scambi di comunicazioni, adesso vengono completate quasi istantaneamente, con passaggi di consegne 10 volte più veloci.

"Gli sviluppatori ci chiedevano ogni minimo dettaglio, ma adesso sono molto più autonomi nella gestione dell'esperienza e nei passaggi di consegne. Questo nuovo approccio ha snellito il nostro flusso di lavoro e migliorato la nostra sinergia", rivela Alicia.

L'azienda è riuscita a risparmiare tempo prezioso, ma anche a migliorare la qualità del risultato. "Dev Mode ha reso ogni minimo dettaglio, come spaziatura, font, colori, e molto altro, facilmente accessibile, riducendo le attività di QA incentrate sulle correzioni del design. Direi che il nostro processo di QA si è velocizzato almeno del 50%", dice Tia.

Brainstorming con team interfunzionali su FigJam

Mentre Ruggable sfruttava la scalabilità di Figma per estendere i suoi processi di progettazione e sviluppo, ha colto l'opportunità di ampliare la collaborazione oltre i suoi team di design. Per fare ciò, ha guardato a FigJam, per coinvolgere più persone nelle fasi iniziali del processo e rendere la collaborazione interfunzionale ancora più efficiente.

Prima di FigJam, il processo di brainstorming di Ruggable era lungo e poco efficiente, e organizzare efficacemente le idee risultava molto complesso. Le discussioni spesso si prolungavano inutilmente e le azioni da compiere dovevano essere trascritte manualmente, persino più volte, prima di poter essere trasformate in ticket per l'esecuzione. Tutto questo rallentava la transizione dall'ideazione alla progettazione, spesso richiedendo fino a due settimane prima che il lavoro potesse iniziare.

"Con FigJam il tempo necessario per passare dal brainstorming alla progettazione si è ridotto da una o due settimane ad appena uno o due giorni. Ora riusciamo a organizzare le idee istantaneamente e passare subito all'esecuzione", afferma Alicia.

Quello che inizialmente era solo uno strumento del team UX è presto diventato essenziale per i team di prodotto, creatività e marketing. "Ogni nuovo membro ottiene l'accesso a FigJam, che è ormai un elemento essenziale nel nostro flusso di lavoro", rivela Alicia.

Ad esempio, dopo aver testato con gli utenti un nuovo tipo di copertura per i tappeti, il team ha utilizzato i modelli di brainstorming predefiniti e la funzione timer di FigJam per guidare le discussioni. I riassunti generati dall'AI hanno semplificato i follow-up, rendendo i passaggi successivi più chiari e definiti.

Coinvolgendo più team sin dalla fase iniziale del processo, FigJam ha aiutato Ruggable a trasformare le idee in azioni molto più velocemente. Mentre Ruggable prosegue la sua crescita, la piattaforma unificata di Figma, che include FigJam, Figma e Dev Mode, continuerà a essere centrale per i suoi team, aiutandoli a collaborare, iterare e dar vita a nuovi prodotti.