Peloton accelera di cinque volte il passaggio di consegne dei progetti grazie a Figma

Riepilogo:

Peloton, tra i leader a livello globale nel fitness connesso, combina hardware di altissimo livello con contenuti immersivi per creare esperienze che ispirano e coinvolgono milioni di utenti in tutto il mondo. Quando la sua offerta di prodotti ha iniziato a espandersi, il mantenimento della coerenza tra i vari design e progetti e della fluidità nella collaborazione tra designer e ingegneri ha acquisito una priorità assoluta.

Per soddisfare queste esigenze, Peloton si è rivolta a Figma Enterprise. Unificando il suo sistema di progettazione, Peloton è riuscita a semplificare i suoi flussi di lavoro e a migliorare la collaborazione tra i team. Grazie a Dev Mode, il team ha velocizzato significativamente il passaggio di consegne dalla progettazione allo sviluppo, riducendo le inefficienze e riuscendo a offrire esperienze utente coerenti e di alta qualità, 5 volte più velocemente.

Sfida: far evolvere lo sviluppo del prodotto, passando dalle annotazioni manuali a una collaborazione più fluida

Dato il crescente ecosistema di soluzioni per il fitness connesso di Peloton, che includono prodotti hardware, software e una ricca libreria di lezioni dal vivo e on-demand, assicurare un'esperienza coerente al cliente, in ogni punto di contatto, si è rivelato sempre più essenziale.

Prima di Figma, gli strumenti di progettazione e collaborazione del settore erano altamente frammentati. Ciò creava delle barriere tra designer e sviluppatori, che rendevano la collaborazione inefficiente e la coerenza di design e progetti difficile da mantenere. Senza una piattaforma centralizzata, designer e sviluppatori si devono affidare a punti di contatto aggiuntivi, per allinearsi sull'interazione degli stati e dei comportamenti.L'adozione di Figma è stata per Peloton la soluzione definitiva per potenziare la collaborazione tra i team.

"Grazie a Figma, designer e sviluppatori possono operare affidandosi a un flusso di lavoro basato su un sistema di progettazione centralizzato, promuovendo così una maggiore coerenza nell'organizzazione di proprietà e componenti", afferma Joe Spadafora, ingegnere del software senior di Peloton.

Sebbene Kinetic, il sistema di progettazione di Peloton, gettasse delle buone basi per favorire la coerenza, c'erano ancora dei margini di miglioramento per ottimizzare la definizione e la condivisione delle specifiche di design e progettazione. In precedenza, gli sviluppatori impiegavano moltissimo tempo ad aggiungere manualmente delle annotazioni ai vari design, evidenziando la necessità di adottare una soluzione più olistica che allineasse i team, semplificasse la collaborazione e fosse scalabile.

Soluzione: connettere i flussi di lavoro con Figma

Circa quattro anni fa Peloton ha compiuto un passo decisivo per continuare a migliorare il suo flusso di lavoro di progettazione e design, scegliendo di migrare a Figma. Nel corso del primo anno, l'attenzione si è focalizzata sulla standardizzazione dell'UI esistente, costruendo componenti e stili condivisi attraverso le librerie Figma per dare più struttura al flusso di lavoro di progettazione.

Il passaggio a Figma ha portato con sé nuove funzionalità, come ad esempio le variabili, che hanno offerto l'opportunità di rivoluzionare l'approccio ai componenti condivisi dell'azienda.

Consolidare i processi in un unico luogo ha contribuito a ridurre la necessità di ricorrere a riunioni interminabili e flussi di lavoro manuali, dando ai team più tempo a disposizione per concentrarsi sulla creazione di esperienze utente d'impatto.

"Prima di Figma, avevamo bisogno di riunioni extra per i passaggi di consegne e discussioni collaborative sugli stati delle interazione e sui comportamenti dei componenti", rivela Oliver Dumoulin, designer dei sistemi di progettazione lato staff presso Peloton. "Ora, gestiamo gran parte di questi processi in modo asincrono tramite Dev Mode".

Dev Mode ha rivoluzionato i flussi di lavoro di Peloton, assicurando che le specifiche fossero chiare, accessibili e prive di errori. Persino i miglioramenti più piccoli, come ridurre il tempo necessario per trovare il file di progettazione corretto, hanno contribuito a fare davvero la differenza: ciò che prima richiedeva cinque minuti ora ne richiede solo uno, e tutto questo grazie a Dev Mode.

Estendere la coerenza nella progettazione all'intera suite di prodotti con Figma

Quando Peloton ha iniziato a introdurre nuovi prodotti, si è resa conto che riuscire a mantenere un linguaggio di progettazione che fosse coerente tra hardware e piattaforme digitali era qualcosa di molto complesso. Mentre lo sviluppo di Peloton Row e Peloton Guide evidenziava la necessità di un sistema di progettazione centralizzato, al momento del loro lancio Kinetic non esisteva ancora.

È stato infatti integrato gradualmente in queste app nel corso degli ultimi due anni attraverso aggiornamenti delle funzionalità e perfezionamenti. Peloton Strength+, invece, è stato costruito da zero utilizzando Kinetic, rendendolo di fatto il primo prodotto di Peloton a sfruttare appieno questo sistema di progettazione fin dal principio.

La visibilità diventa scalabile

Man mano che il team di design cresceva, Peloton ha visto l'occasione per introdurre un sistema più strutturato per l'organizzazione dei file di design. Prima di Figma, i team disponevano di una visibilità limitata sul lavoro degli altri, rendendo difficile mantenere la coerenza e ottimizzare la collaborazione.

L'upgrade a Figma Enterprise ha introdotto spazi di lavoro dedicati che hanno contribuito a rendere la collaborazione più strutturata e scalabile. Ogni spazio di lavoro è adattato in base a specifiche aree del prodotto, come ad esempio l'app, l'e-commerce e l'hardware, garantendo ai team di disporre sempre di librerie di progettazioni pertinenti e aggiornate. Lo spazio di lavoro "Central Design", gestito dal team di Kinetic, ospita le librerie di base che sono accessibili a tutti in automatico, creando un'unica fonte centralizzata di informazioni.

Costruire un sistema scalabile e multipiattaforma sfruttando le variabili

Le variabili hanno aiutato a migliorare la coerenza nel crescente portfolio di prodotti di Peloton. Prima di Figma Enterprise, l'account Figma di Peloton era limitato a quattro modalità variabili, il che richiedeva ai team di effettuare aggiornamenti manuali nelle varie piattaforme. Ora, grazie a 12 temi e 24 modalità variabili, i team possono passare istantaneamente da una piattaforma all'altra, adattarsi a diversi stili visivi e inviare aggiornamenti in modo pratico e veloce per tutti i prodotti.

Il tema principale di Peloton funge da base per la maggior parte dei prodotti, mentre Strength+ dispone di un tema dedicato con un colore giallo distintivo. Una nuova funzione social lanciata di recente ha visto l'introduzione di 10 temi aggiuntivi, per permettere agli utenti di assegnare un colore univoco quando creano un team nell'app Peloton. Per supportare sia le modalità chiare che scure, sono state implementate delle modalità variabili, creando 24 modalità colore dinamiche che si adattano in base al tema selezionato.

Oltre al colore, le variabili tipografiche semplificano anche la gestione degli stili di carattere specifici per ogni piattaforma. Utilizzando le modalità variabili, i designer possono passare facilmente da un font all'altro, ad esempio, SF Pro su iOS e Inter su Android, senza dover modificare manualmente gli stili di carattere.

"Con le variabili, possiamo passare da una piattaforma all'altra e fare aggiornamenti su colori, stili e spaziatura tutto da un unico file sorgente", dice Oliver. Questi aggiornamenti si propagano automaticamente in tutto il sistema, riducendo le operazioni manuali necessarie e garantendo la massima accuratezza in ogni punto di contatto.

Il tempo di iterazione passa da 15 minuti a tre con Dev Mode

Nell'ambiente frenetico di Peloton, la velocità è essenziale. Per tenere il passo con lo sviluppo rapido del prodotto, gli ingegneri hanno bisogno di un accesso rapido ai design e progetti più recenti, di specifiche chiare e di un passaggio di consegne efficiente. Prima di Dev Mode, rintracciare i file di design, fare chiarezza sulle specifiche e ispezionare manualmente i vari livelli si traduceva in un flusso di lavoro molto più caotico e complesso.

Con Dev Mode, gli ingegneri riescono a trovare il file di progettazione corretto in una frazione del tempo e ciò che prima richiedeva cinque minuti ora viene fatto in uno solo. L'ispezione manuale, che in prima richiedeva 15 minuti, ora è cinque volte più veloce, riducendo il processo a soli tre minuti. Anche l'identificazione dei componenti riutilizzabili, un'altra attività che prima richiedeva 15 minuti, ora richiede lo stesso tempo, grazie ai collegamenti diretti al sistema di progettazione.

"Prima ci affidavamo a diversi strumenti per il passaggio agli sviluppatori", dice Oliver. "Uno per gestire la progettazione e uno per creare le specifiche sul passaggio di consegne agli sviluppatori, ma una volta lanciato Dev Mode, ha sostituito in toto tutti gli altri strumenti".

Peloton ha inoltre integrato i ticket di Jira direttamente in Dev Mode per fornire maggiore contesto ai team e semplificare la comunicazione tra i team di prodotto, progettazione e sviluppo.

"Con Dev Mode, riusciamo a tracciare l'avanzamento dei ticket grazie all'integrazione con JIRA, contrassegnare i componenti come "ready for dev" e gestire la disponibilità con più stati", afferma Oliver. "Il nostro processo di governance interna assicura che qualsiasi aggiunta o modifica al sistema di progettazione venga approvata nella libreria del sistema di progettazione stesso, prima che gli sviluppatori implementino nuovi componenti o aggiornino le variabili".

Con Dev Mode che semplifica i flussi di lavoro chiave, Peloton ora sta valutando nuovi modi per migliorare ulteriormente la collaborazione tra progettazione e sviluppo. Alcuni degli sviluppatori Android dell'azienda hanno iniziato a esplorare Code Connect, come un potenziale prossimo passo nell'affinamento del processo di passaggio di consegne.

Al di là di ciò, l'automazione continuerà a giocare un ruolo crescente. Il team sta esplorando altri modi per sfruttare l'API REST di Figma per sincronizzare gli aggiornamenti delle variabili direttamente da JSON in Figma, supportando la riduzione degli aggiornamenti manuali delle sue 24 modalità variabili.

Mentre continua a perfezionare i suoi processi, Peloton si prepara a spingere sull'acceleratore per dare vita alla nuova era del fitness connesso.