So bietet PhonePe mit Figma mehr als 700 Mio. Benutzer*innen Geschwindigkeit und Zuverlässigkeit

Zusammenfassung

PhonePe ist eine der größten Fintech-Plattformen Indiens, der über 700 Millionen Benutzer*innen und über 50 Millionen Händler vertrauen.

Als das Unternehmen wuchs, musste sein schlankes Designteam schneller vorankommen, sich über Produkte hinweg abstimmen und eine konsistente Benutzererfahrung beibehalten. Durch die Einführung von Figma als sein „zentral lebendes System“ für Design und Entwicklung rationalisierte PhonePe funktionsübergreifende Workflows, beschleunigte die Übergabe und entwickelte seine Designsysteme mit Zuversicht in Figma Design, Dev Mode und Figma MCP weiter.

Heute kommen Teams innerhalb weniger Stunden vom Konzept zu 50 % Klarheit. Mit drei vorhandenen Designs und einem frühen Erfolg mit KI-gesteuerten Tools skaliert PhonePe intelligenter, ohne Geschwindigkeit oder Qualität zu beeinträchtigen.

Herausforderung: Skalierung mit Geschwindigkeit und Konsistenz

Als die PhonePe-Gruppe neue Unternehmen wie Share.Market und den Indus Appstore startete, wurde die Zusammenarbeit vielschichtiger. Mit mehr Teams und über 700 Millionen Benutzer*innen wurde es zunehmend komplexer, Design, Strategie und Entwicklung aufeinander abzustimmen.

Das Team benötigte eine stärker vernetzte, skalierbare Methode, um Konsistenz zu wahren, ohne Geschwindigkeit einzubüßen. Die Zentralisierung von Design und Dokumentation an einem Ort wurde unerlässlich, um Teams effizienter arbeiten zu lassen und weniger Zeit mit der Suche nach Informationen zu verbringen.

Zusammenarbeit und Konsistenz waren lange Bereiche, an denen das Designteam arbeitete, um sich zu verbessern. Als die Organisation reifte, begannen sich klarere Prozesse und standardisierte Arbeitsweisen herauszubilden, die den Teams halfen, Konsistenz über alle Produkte hinweg zu wahren.

Die Lösung: drei Designsysteme, eine gemeinsame Sprache

Um ihr wachsendes Ökosystem zu unterstützen, betreibt PhonePe drei Designsysteme. Das ausgereifteste System treibt seine Vorzeige-Verbraucher-App an, während zwei neuere Systeme Unternehmen wie Share.Market unterstützen und mehr Raum für Experimente bieten, während sich diese Apps weiterentwickeln.

Figma wurde der einzige, gemeinsame Raum, in dem die Designsysteme von PhonePe leben und Komponenten, Token, Icon-Bibliotheken und Dokumentation vereint. Mit allem an einem Ort können Design- und Engineering-Teams in ihrer Arbeit aufeinander abgestimmt bleiben, schneller arbeiten und die Qualität hoch halten.

Trotz ihrer Unterschiede basieren alle drei Designs auf einem gemeinsamen Fundament in Figma: strukturierte Prozesse, gemeinsame Designtoken und skalierbare Dokumentation. Diese Konsistenz gibt den Teams eine gemeinsame Sprache – beschleunigt die Übergabe, reduziert das Rätselraten und hilft allen, großartige Produkte zu entwickeln.

Das meiste Feedback und die meisten Bewertungen erfolgen direkt in Figma über Kommentare und geteilte Links, wodurch die Kommunikation schnell und kontextbezogen bleibt. In der Zwischenzeit sorgen Figma Enterprise-Funktionen wie SSO, Zugangskontrolle und Versionshistorie dafür, dass das System sicher und aktuell bleibt, sodass jeder mit Klarheit und Vertrauen arbeiten kann.

FigJam als kollaborative „Spielwiese“ und Dokumentationstool

Das Team bei PhonePe ist voll und ganz auf FigJam eingestellt. Es ist der bevorzugte Ort für frühes Denken in den Bereichen Design, Technik, Produkt, Geschäft, Marketing und Kreativteams geworden. Was früher auf Notizen oder in Gesprächen auf dem Flur lebte, findet jetzt in FigJam statt und macht es einfacher, Ideen im gesamten Unternehmen zu erfassen, zu teilen und auszubauen.

FigJam hilft dem Team, den gesamten Verlauf eines Features zu verfolgen – von der anfänglichen Idee bis zur endgültigen Umsetzung. Im Laufe der Zeit ist es zu einem wesentlichen Bestandteil des Dokumentations-Workflows von PhonePe geworden. „Aus einer Design-Ops-Perspektive war das ein Gewinn“, sagt Sindhu, Content Design and Design Communications Lead bei PhonePe. „Gemeinsam haben wir versucht, die Dokumentationskultur so weit wie möglich erheblich zu verbessern.“

Es dient auch als „virtuelles Notizbuch“ – einfach genug, damit alle es nutzen können, aber leistungsstark genug, um große Ideen zu formen. Selbst Nichtdesigner*innen wie Produktmanager*innen können einsteigen, um Flows zu erstellen oder frühe Konzepte zu skizzieren, während Designer*innen und Entwickler*innen es nutzen, um Informationsarchitektur zu entwerfen, Sitemaps zu erstellen und schnelle Iterationen zu teilen. Diese niedrige Einstiegshürde erleichtert es den Teams, Ideen zusammen schneller zu erkunden, gemeinsam zu erstellen und zu verfeinern.

Klarheit, Sichtbarkeit und Produktivität mit dem Dev Mode

Der Dev Mode von Figma wurde zu einem Eckpfeiler des optimierten Entwurf-zu-Entwicklung-Workflows von PhonePe. Während Designer*innen immer mit dem vollständigen Kontext von Komponenten arbeiteten, gab der Dev Mode den Entwickler*innen dieselbe Sichtbarkeit – plus die Tools, die sie benötigten, um Komponenten in Echtzeit zu inspizieren, zu testen und zu verstehen. Es schuf einen praxisnahen Raum, in dem Ingenieur*innen erkunden konnten, wie sich Dinge verhalten, ohne ständig mit dem Design hin und her wechseln zu müssen.

Anstatt sich auf wiederholte Handoffs oder Klärungstreffen zu verlassen, könnten Teams direkt mit Dateien interagieren, Varianten testen und mit Vertrauen aufbauen. Die Plugin-Unterstützung hat die Handoffs weiter vereinfacht. Entwickler*innen verwenden jetzt ein benutzerdefiniertes Designsystem-Plugin, das vom Team entwickelt wurde, um Spezifikationen klarer und konsistenter zu machen.

„Vor dem Dev Mode konnten wir uns nur die verschiedenen Varianten ansehen, die das Design-Team verwendete, um die Komponente selbst darzustellen. Es war ein großes Upgrade für uns“, sagt Sachin Kumar, Softwareingenieur und Mitglied des App Excellence Teams bei PhonePe.

Dev Mode hat auch dazu beigetragen, Besprechungen zu reduzieren und die Zusammenarbeit nahtloser zu gestalten. „Statt mehrere Besprechungen zwischen dem Handoff und dem Nach-Handoff abzuhalten, um die Funktionalität einer Komponente zu verstehen, können Sie diese Informationen einfach selbst abrufen. Ich denke, dass dies eine der stärksten Funktionen des Dev Mode ist„, sagt Rahul Gonsalves, Head of Design bei PhonePe.

Entwickler*innen können auf plattformspezifische Code-Schnipsel für Android und iOS zugreifen, die ihnen helfen, das Design effizienter in produktionsbereiten Code zu übersetzen. Unterstützung für Plugins und die Möglichkeit, getrennte Komponenten zu kennzeichnen, bieten eine weitere Ebene der Kontrolle und helfen, die Systemintegrität über Teams hinweg zu schützen.

Einbindung von KI in den Workflow mit Figma MCP

Während PhonePe wächst, untersucht das Team, wie KI eine schnellere Lieferung unterstützen kann, ohne die Qualität oder Konsistenz zu beeinträchtigen. Mit Geschwindigkeit und Stabilität des Codes als obersten Prioritäten haben sie sich darauf konzentriert, wie der Entwurfskontext in die Entwicklung einfließt.

Ein wichtiger Schritt nach vorne war die Einführung von Figma MCP, die es PhonePe ermöglicht, KI-Coding-Agenten sicher mit Figma zu verbinden und ihnen strukturierten Zugriff auf Designdateien, Komponenten und System-Metadaten zu gewähren. Durch die Verwendung standardisierte Prompts und Anleitungen kann das Team genaue Designkontexte in ihre KI-Workflows einfließen lassen – was eine Codeerstellung ermöglicht, die mit ihren bestehenden Standards übereinstimmt und die Entwicklungszeit erheblich verkürzt.

Über die Codegenerierung hinaus hilft Figma MCP auch, die Erstellung und Aktualisierung von Komponenten zu optimieren. Das Team nutzt es, um die Hinzufügung neuer Komponenten zu ihren Designsystemen zu unterstützen. Frühere Pilotteams verzeichnen bereits Erfolge bei einfacheren Bildschirmen, während der Ansatz weiter reift.

Um die Qualität beim Handoff weiter zu schützen, hat PhonePe ein benutzerdefiniertes Linting-Plugin entwickelt, um Probleme vor dem Handoff zu erkennen. Das Plugin zeigt Details wie angewandte Token und Komponenten-Metadaten an, was es für Entwickler*innen leichter macht, zu bestätigen, ob Dateien bereit zur Implementierung sind.

„Wir möchten das nutzen und unser Plugin verbessern“, sagt Sachin. „Abgesehen von den Funktionen, die wir bereits von Figma erhalten, werden wir einige unserer eigenen hinzufügen, um unser Designsystem noch robuster zu machen.“

Produkte schneller veröffentlichen mit Figma

Mit Figma reduziert die geteilte Sichtbarkeit Reibungsverluste und ermöglicht Handovers doppelt so schnell wie zuvor. Teams gehen oft innerhalb weniger Stunden vom Konzept zu 50 % Klarheit. Und weil Zusammenarbeit über das Design hinausgeht, können Geschäftspartner und nicht designorientierte Teams schnell Prototypen erkunden und Feedback geben. Ihre frühere Einbeziehung – insbesondere in den frühen Phasen mit geringer Genauigkeit – hat dazu beigetragen, das Risiko versunkener Kosten aufgrund falscher Richtungsentscheidungen zu verringern.

„Anderen Teams zu erlauben, sich bei Bedarf durch Bildschirme in Figma zu wühlen oder ein sauberes, ordentliches Design zu visualisieren, bringt alle schneller auf denselben Stand“, sagt Sindhu.

In die Zukunft blickend plant das Team, Figma Make zu nutzen, um frühe Ideen in testbare Prototypen zu verwandeln – insbesondere in Momenten, in denen Zeitbeschränkungen die Erkundung sonst verzögern könnten. Mit Make zielt PhonePe darauf ab, mehr Ideen zu testen, mehr Optionen zu erkunden und bessere Produkte schneller auf den Markt zu bringen.