Come PhonePe porta velocità e affidabilità a oltre 700 milioni di utenti con Figma

Riepilogo

PhonePe è una delle più grandi piattaforme fintech in India, a cui si affidano oltre 700 milioni di utenti e oltre 50 milioni di commercianti.

Man mano che l'azienda cresceva, il suo team di design snello doveva muoversi più rapidamente, mantenersi allineato tra i prodotti e garantire un'esperienza utente coerente. Adottando Figma come suo “sistema centrale vivente” per la progettazione e lo sviluppo, PhonePe ha ottimizzato i flussi di lavoro interfunzionali, accelerato il passaggio e sviluppato i suoi sistemi di progettazione con fiducia in Figma Design, Dev Mode e Figma MCP.

Oggi, i team passano dal concetto al 50% di chiarezza in poche ore. Con l'adozione di tre sistemi di progettazione e un successo iniziale con strumenti basati sull'AI, PhonePe sta scalando in modo più intelligente senza compromettere velocità o qualità.

Sfida: Espansione con velocità e coerenza

Con il lancio di nuove attività come Share.Market e l'Indus Appstore da parte del gruppo PhonePe, la collaborazione è diventata più complessa. Con più team e oltre 700 milioni di utenti, mantenere allineati design, strategia e sviluppo è diventato sempre più complesso.

Il team aveva bisogno di un modo più connesso e scalabile per garantire la coerenza senza sacrificare la velocità. Centralizzare il design e la documentazione in un unico luogo è diventato essenziale per aiutare i team a lavorare in modo più efficiente e a trascorrere meno tempo a recuperare informazioni.

La collaborazione e la coerenza erano da tempo aree su cui il team di design stava lavorando per cercare di migliorarle. Man mano che l'organizzazione maturava, i processi più chiari e le modalità standard di lavoro hanno iniziato a prendere forma, aiutando i team a mantenere la coerenza tra i prodotti.

Soluzione: Tre sistemi di progettazione, un linguaggio condiviso

Per supportare il proprio ecosistema in crescita, PhonePe gestisce tre sistemi di progettazione. Il più maturo alimenta la sua app di punta per i consumatori, mentre due sistemi più recenti supportano aziende come Share.Market, offrendo più spazio per sperimentare mentre queste app si evolvono.

Figma è diventato l'unico spazio condiviso in cui vivono i sistemi di progettazione di PhonePe, riunendo componenti, token, librerie di icone e documentazione. Poiché tutto si trova in un unico posto, i team di design e ingegneria possono rimanere allineati, muoversi più velocemente e mantenere alta la qualità.

Nonostante le differenze, tutti e tre i sistemi di progettazione si sviluppano a partire da una base comune in Figma: processi strutturati, token di design condivisi e documentazione scalabile. Questa coerenza fornisce ai team un linguaggio comune, accelerando il passaggio di consegne, riducendo le supposizioni e aiutando tutti a creare ottimi prodotti.

La maggior parte dei feedback e delle recensioni avviene direttamente in Figma tramite commenti e link condivisi, per mantenere la comunicazione rapida e contestuale. Nel frattempo, le funzionalità di Figma Enterprise come SSO, controllo degli accessi e cronologia delle versioni mantengono il sistema sicuro e aggiornato, in modo che tutti possano muoversi con chiarezza e fiducia.

FigJam come uno “scratch pad” collaborativo e uno strumento di documentazione

Il team di PhonePe è entusiasta di FigJam. È diventato lo spazio di riferimento per le prime riflessioni su design, ingegneria, prodotto, business, marketing e team creativi. Ciò che una volta viveva su note adesive o in conversazioni nei corridoi ora vive in FigJam, rendendo le idee più facili da catturare, condividere e sviluppare in tutta l'azienda.

FigJam aiuta il team a monitorare l'intero percorso di una funzione, dal concetto iniziale all'esecuzione finale. Nel tempo, è diventato una parte fondamentale del flusso di lavoro di documentazione di PhonePe. “Da una prospettiva di design ops, è stato un successo”, Responsabile del Design dei Contenuti e della Comunicazione del Design presso PhonePe. "Insieme, cerchiamo di migliorare la cultura della documentazione il più possibile".

Funziona anche come una "lavagna virtuale", abbastanza semplice da usare per chiunque, ma abbastanza potente da dare vita a grandi idee. Anche i non-designer come i responsabili di prodotto possono intervenire per mappare i flussi o abbozzare concetti iniziali, mentre i designer e gli sviluppatori lo utilizzano per delineare la bozza dell'architettura delle informazioni, costruire mappe del sito e condividere rapide iterazioni. La barriera ridotta all'ingresso rende più facile per i team esplorare, co-creare e perfezionare le idee insieme più rapidamente.

Chiarezza, visibilità e produttività con Dev Mode

La Dev Mode di Figma è diventata una pietra miliare del flusso di lavoro semplificato di design e sviluppo di PhonePe. Mentre i designer hanno sempre lavorato con il contesto completo sui componenti, la **Dev Mode** forniva agli sviluppatori la stessa visibilità, oltre agli strumenti necessari per ispezionare, testare e comprendere i componenti in tempo reale. Ha creato uno spazio pratico in cui gli ingegneri potevano esplorare il comportamento delle cose senza dover tornare continuamente al design.

Invece di fare affidamento su passaggi di consegne ripetuti o riunioni di chiarimento, i team potevano interagire direttamente con i file, testare varianti e creare con fiducia. Il supporto dei plugin ha ulteriormente semplificato i passaggi. Gli sviluppatori ora eseguono un plugin per il sistema di progettazione personalizzato e progettato dal team per rendere le specifiche più chiare e uniformi.

“Prima di Dev Mode, potevamo solo esaminare le diverse varianti che il team di design utilizzava per il rendering del componente stesso. "È stato un enorme miglioramento per noi", afferma Sachin Kumar, Ingegnere Software e membro del Team di Eccellenza delle App presso PhonePe.

Dev Mode ha anche contribuito a ridurre le riunioni e ha reso la collaborazione più fluida. "Invece di tenere più riunioni tra il passaggio e il post-passaggio di consegne per comprendere la funzionalità di un componente, puoi ottenere quelle informazioni da solo". Penso che sia una delle funzionalità più potenti della Dev Mode”, afferma Rahul Gonsalves, Responsabile del Design di PhonePe.

Gli sviluppatori possono accedere a frammenti di codice specifici per piattaforma per Android e iOS, che li aiutano a tradurre il design in codice pronto per la produzione in modo più efficiente. Il supporto per i plugin e la capacità di contrassegnare i componenti separati aggiunge un ulteriore livello di controllo e aiuta a proteggere l'integrità del sistema tra i team.

Integrare l'AI nel flusso di lavoro con Figma MCP

Man mano che PhonePe scala, il team esplora come l'AI può supportare una consegna più rapida senza compromettere la qualità o la coerenza. Con la velocità e la stabilità del codice come massime priorità, il team si è concentrato sul miglioramento della modalità con cui il contesto di design fluisce nello sviluppo.

Un passo avanti fondamentale è stata l'adozione di Figma MCP, che consente a PhonePe di collegare in modo sicuro gli agenti di codifica AI a Figma e di dare loro accesso strutturato ai file di progettazione, componenti e metadati di sistema. Utilizzando prompt standardizzati e file di istruzioni, il team può fornire un contesto di design accurato nei propri flussi di lavoro AI, consentendo la generazione di codice coerente con gli standard esistenti e riducendo significativamente il tempo di sviluppo.

Oltre alla generazione di codici, Figma MCP aiuta anche a semplificare la creazione e l'aggiornamento dei componenti. Il team lo utilizza per supportare l'aggiunta di nuovi componenti ai loro sistemi di progettazione, con i primi team pilota che già ottengono successi su schermi più semplici man mano che l'approccio continua a maturare.

Per proteggere ulteriormente la qualità durante il passaggio di consegne, PhonePe ha creato un plugin di linting personalizzato per individuare i problemi prima del passaggio. Il plugin mostra dettagli come i token applicati e i metadati dei componenti, rendendo più facile per gli sviluppatori confermare se i file sono pronti per l'implementazione.

"Vogliamo utilizzarlo e migliorare il nostro plugin", afferma Sachin. "Quindi, oltre alle funzionalità che otteniamo già da Figma, aggiungeremo alcune delle nostre per rendere il nostro sistema di progettazione ancora più solido".

Rilascio più rapido dei prodotti con Figma

Con Figma, la visibilità condivisa riduce i problemi e consente che i passaggi avvengano due volte più velocemente. Spesso i team passano dal concetto al 50% di chiarezza in poche ore. E poiché la collaborazione va oltre il design, i partner commerciali e i team non di design possono rapidamente esplorare i prototipi e fornire feedback. Coinvolgerli prima, soprattutto durante le fasi a bassa fedeltà, ha aiutato a ridurre il rischio di costi sommersi derivanti dal creare nella direzione sbagliata.

"Consentire ad altri team di esplorare i progetti su Figma se necessario o visualizzare un design pulito e ordinato consente a tutti di essere sulla stessa lunghezza d'onda più velocemente", dice Sindhu.

Guardando al futuro, il team prevede di utilizzare Figma Make per trasformare le idee iniziali in prototipi testabili, specialmente nei momenti in cui i limiti di tempo potrebbero altrimenti rallentare l'esplorazione. Con Make, PhonePe mira a testare più idee, esplorare più opzioni e rilasciare prodotti migliori, più velocemente.