Dal brief alla realizzazione su Figma: il percorso dei clienti con Lollypop
Lollypop Design Studio è un'agenzia globale di UI/UX design con un team di oltre 180 designer e ingegneri distribuiti tra India, Stati Uniti, Emirati Arabi Uniti e Vietnam. In oltre dieci anni di attività, lo studio ha seguito più di 1.000 clienti, ottenuto oltre 50 premi di design internazionali e migliorato la vita di oltre due miliardi di persone. Lollypop collabora con startup e aziende Fortune 500 nei settori sanitario, fintech ed e-commerce per trasformare requisiti di business complessi in prodotti digitali scalabili.
Man mano che il portfolio clienti di Lollypop cresceva e le collaborazioni si facevano più complesse, aumentava anche la sfida di far muovere designer, sviluppatori e clienti nella stessa direzione, senza sacrificare la qualità dei dettagli e la velocità di esecuzione.
All'inizio della progettazione di una piattaforma per le attività di vendita al dettaglio multi-regionale e online per un cliente, l'azienda ha cercato un sistema più veloce per passare dal brief al prodotto finito, mantenendo tutti i soggetti perfettamente allineati. Grazie all'unificazione del flusso di lavoro in Figma, sfruttando FigJam, Figma Design, Dev Mode e Figma Make, Lollypop ha ridotto i tempi di prototipazione di ben 3 o 4 volte. I cicli di feedback sono passati da vari giorni a uno solo, mentre le tempistiche di sviluppo front-end sono state abbattute da mesi a poche settimane.
La sfida: Gestire flussi di lavoro di prodotto complessi tra team e clienti
Prima dell'adozione di Figma, il controllo dei progetti da parte di designer, sviluppatori e stakeholder avveniva su strumenti e documenti separati. Di conseguenza, sincronizzare le decisioni era più complesso e i feedback arrivavano a rilento proprio nelle fasi più critiche.
Le difficoltà si sono fatte ancora più complesse quando hanno iniziato a progettare una piattaforma online per le attività di vendita al dettaglio di un cliente operativo in diverse aree geografiche. L'obiettivo della piattaforma era garantire ai responsabili aziendali la piena visibilità sulle prestazioni dei vari negozi; al tempo stesso, i dati raccolti sul campo andavano ad alimentare in tempo reale la logica del software e i relativi flussi di lavoro.
In mancanza di uno spazio di lavoro condiviso, l'avanzamento dei progetti veniva spesso monitorato tramite fogli di calcolo, presentazioni e thread di e-mail, creando un divario tra ciò che veniva progettato, ciò che veniva sviluppato e le reali esigenze del business.
Dovevamo centralizzare in un'unica piattaforma l'onboarding dei nuovi rivenditori, l'allocazione e il controllo delle attività giornaliere e l'analisi delle performance. Senza quella visione centralizzata, il coordinamento tra le diverse aree geografiche diventa estremamente difficile.
— Sri Chandra Dronavalli, Director, Software Services, Lollypop
La soluzione: progettazione, validazione e rilascio in un unico flusso di lavoro integrato
Lollypop ha ristrutturato l'intero flusso di lavoro dei progetti attorno a un unico ambiente integrato. Il team ha trasferito l'intero processo su Figma, utilizzando FigJam per la fase di individuazione e allineamento, Figma Design per la creazione di prototipi e la validazione, Dev Mode per passaggi di consegne più fluidi e Figma Make per accelerare il rilascio del front-end.
Il risultato è stato un processo in cui le decisioni prese durante la fase di individuazione si riflettevano direttamente nel design, consentendo a designer e sviluppatori di passare alla fase di implementazione senza perdere risorse o contesto lungo il percorso.
Sviluppare un processo di discovery strutturato in FigJam
Il team avviava ogni progetto con workshop guidati all'interno di FigJam. Designer e stakeholder hanno collaborato per mappare i percorsi dei rivenditori, definire i trigger delle performance, modellare gli scenari di intervento e fare emergere i casi limite, il tutto prima ancora di progettare una singola schermata.
La possibilità di passare direttamente dalla fase di ricerca a quella di design, senza dover cambiare strumento o ricostruire i flussi da zero, ci permette di dedicare più tempo alle decisioni strategiche e meno alla gestione delle informazioni. Grazie a questo approccio, la velocità della fase di individuazione è già raddoppiata.
— Ameet Palkar, Design Director, Lollypop
Validare i flussi di lavoro con i prototipi nativi di Figma
"Prima eravamo costretti a esportare 100 schermate in JPEG, caricarle su un altro tool ed eseguire la codifica fissa per creare i prototipi", spiega Naseer Ahmed, Senior Design Manager presso Lollypop.
Spostando la prototipazione direttamente su Figma, il team ha eliminato completamente quella fase.
Grazie ai prototipi nativi su Figma, abbiamo eliminato la necessità di esportare e ricreare tutto ogni volta che cambiava il layout. Questo ha ridotto il carico di lavoro di quasi 3-4 volterispetto ai flusso di lavoro precedente.
— Naseer Ahmed, Senior Design Manager, Lollypop
Le animazioni avanzate hanno reso i prototipi molto più simili al prodotto finale, favorendo feedback più chiari da parte degli stakeholder e riducendo i malintesi sul campo.
Non è solo una questione di velocità. Quando il prototipo si trova nello stesso file del design, riesci ad accorgerti delle cose prima: interazioni che non convincono o flussi che richiedono di essere ripensati. In passato, quel controllo di qualità avveniva molto più tardi.
— Mohith S, Lead UI Designer, Lollypop
Mantenere il design e il codice sulla stessa area di lavoro con Dev Mode, Code Connect e il server MCP di Figma
In passato, Lollypop utilizzava diversi strumenti che costringevano i designer a gestire file separati e gli sviluppatori a navigare tra più piattaforme per accedere a specifiche, risorse e annotazioni.
Grazie al consolidamento su Figma, il team ha unito tutto in un unico ambiente connesso. Gli sviluppatori accedono a specifiche, componenti e risorse direttamente nel file di progettazione. Inoltre, il codice sviluppato torna su Figma per la revisione, azzerando le ambiguità e mantenendo design e codice sincronizzati per tutta la durata del progetto.
“Figma ha rivoluzionato il modo in cui design e sviluppo restano sincronizzati lungo tutto il ciclo di produzione del prodotto. Il contesto del design si integra direttamente nel nostro flusso di lavoro di sviluppo e tutto ciò che viene implementato può tornare su Figma per essere revisionato. Questo ha ridotto le ambiguità, ridotto al minimo i continui scambi di chiarimenti e garantito un maggiore allineamento tra il design e l'implementazione finale, consentendoci in ultima analisi di risparmiare tempo e migliorare l'efficienza nel rilascio", ha dichiarato Sri Chandra Dronavalli, Director of Software Services presso Lollypop.
Il team ha inoltre collegato il server MCP di Figma ai propri IDE, consentendo agli agenti AI di eseguire le query direttamente i file di progettazione e di generare codice basato sul reale contesto del sistema di progettazione, anziché procedere per approssimazione da screenshot o specifiche manuali. Utilizzando Code Connect per collegare i componenti di Figma al codice di produzione, gli strumenti AI hanno potuto riutilizzare gli elementi esatti della codebase anziché crearne di nuovi per approssimazione, ottenendo un'accuratezza dei componenti del 90% in uno o due tentativi al massimo. Tutto questo si è tradotto in meno rilavorazioni, una drastica riduzione dei bug dovuti a token disallineati e la capacità di integrare molto più velocemente i feedback degli utenti.
Accelerare la consegna front-end con Figma Make
Per i moduli in cui i sistemi di backend erano già pronti, Figma Make ha facilitato il passaggio successivo, riducendo la quantità di livello front-end da dover sviluppare da zero.
Utilizzando Figma Make, il team ha generato la struttura front-end iniziale dai progetti approvati. Gli ingegneri hanno usato questo come punto di partenza, rifinendolo e integrandolo con i sistemi di backend anziché creare il livello dell'interfaccia da zero.
Non serve più creare tutto il front-end da zero: grazie a Figma Make abbiamo un'ottima base di partenza usando dei semplici prompt di testo. I processi che prima richiedevano da 2 a 2 mesi e mezzo ora si completano in sole 3-4 settimane per i moduli compatibili.
— Sri Chandra Dronavalli, Director, Software Services, Lollypop
Riduzione dei cicli di feedback con i file condivisi
La gestione dei feedback è sempre stata un punto critico. Dover esportare i layout in PDF e attendere giorni per le risposte costringeva il team a rincorrere continuamente le tempistiche del cliente, rallentando i cicli di modifica.
"Prima inviavamo presentazioni, esportavamo tutte le schermate in JPEG per poi convertirle in un unico PDF e aspettavamo un paio di giorni per ricevere feedback e revisioni", ha spiegato Naseer.
Condividendo i file Figma in tempo reale con gli stakeholder, il team è riuscito a spostare la fase di revisione direttamente all'interno dello spazio di lavoro del design. Discussioni e decisioni venivano registrate direttamente all'interno del file, creando un record tracciabile senza il carico di lavoro di una documentazione aggiuntiva.
Oggi, i tempi di risposta sono stati ridotti a un solo giorno. Inviando i file di progettazione nel pomeriggio, si ricevono i feedback in serata o entro il pomeriggio del giorno dopo.
— Naseer Ahmed, Senior Design Manager, Lollypop
Guardando al futuro: ampliare la collaborazione e migliorare i flussi di lavoro
A fronte di progetti sempre più complessi e internazionali, Figma sta diventando il livello condiviso attraverso cui i team collaborano, presentano e consegnano i progetti. Il consolidamento del loro flusso di lavoro ha creato una base solida che ora stanno estendendo a nuove aree di business.
“Consegnare progetti in modo più rapido e qualitativamente superiore influisce sul nostro posizionamento nel mercato. I flussi di lavoro e i processi che abbiamo strutturato in Figma ci hanno aiutato a sviluppare rapidamente, lanciare in tempi brevi e dare sempre il massimo in ogni progetto. "È questo che costruisce il brand”, ha dichiarato Charan Babu N., Senior Manager, Global Marketing and Partnerships presso Lollypop.
Con Figma Slides, il team sta anche avvicinando le presentazioni per gli stakeholder al processo di design, aiutando i team ad allinearsi tra diverse aree geografiche senza dover cambiare strumento. Utilizzano inoltre Figma Buzz per gestire i modelli e la distribuzione dei contenuti, garantendo il mantenimento del tono di voce e della coerenza del brand tra campagne, formati e aree geografiche, senza dover ricostruire le risorse da zero.
Quando l'intero flusso di lavoro, dalla fase di individuazione fino alla consegna, si concentra in un unico posto, l'impatto sul business si moltiplica. Una consegna più rapida e un migliore allineamento si traducono direttamente nel rafforzamento delle relazioni con i clienti. Figma ha influenzato notevolmente la nostra capacità di scalare il tipo di progetti che prendiamo in carico.
— Rama Kini, EVP, Design and Software Services, Lollypop
Scopri come Figma può aiutarti a creare progetti scalabili
Contattaci per scoprire come Figma può aiutare le aziende a creare progetti scalabili.
Scopri come Figma può aiutarti a creare progetti scalabili
Un grande design ha il potenziale per differenziare il prodotto e il brand. Ma le grandi cose si costruiscono insieme. Figma riunisce i team di prodotto in un flusso di lavoro di design rapido e più inclusivo.
Contattaci per scoprire come Figma può aiutare le aziende a creare progetti scalabili.
Ti mostreremo come Figma può aiutare a:
- Riunire ogni fase del processo di progettazione e design, dall'ideazione allo sviluppo, fino alla realizzazione del design finale, tutto in un unico posto
- Accelerare i flussi di lavoro di design con sistemi di progettazione condivisi a livello aziendale
- Promuovere l'inclusività nei processi del team di prodotto attraverso strumenti basati sul web, accessibili e facili da usare