So hat die Volkswagen Group Services GmbH Figma & FigJam genutzt, um die Kommunikation zwischen Design und Ingenieurwesen zu verbessern

Volkswagen Group Services, ein Unternehmen des Volkswagen Konzerns mit Sitz in Wolfsburg, Deutschland, bietet den Volkswagen Marken eine Vielzahl von Dienstleistungen an, von Forschung und Entwicklung (F&E) bis hin zur Beschaffung. Ihr Business Development Services Team hat eine superstrategische Mission: neue Geschäftsmodelle zu entwickeln, sie in Produkte zu übersetzen und für den Eintritt in neue Märkte vorzubereiten.

Große Projekte wie dieses erfordern viel Zusammenarbeit über multidisziplinäre Teams hinweg, und es ist nicht einfach, alle auf denselben Stand zu bringen. Es gab noch ein weiteres Problem: Die Volkswagen Group Services hatte kürzlich begonnen, mit mehr Flexibilität bei Arbeitsorten und -zeiten zu experimentieren.

Als sie ein großes Projekt starteten, suchten sie nach einer neuen Art der Zusammenarbeit, die die üblichen Probleme bei Produktentwicklungen umgeht. Mit Figma und FigJam haben sie die Lösung gefunden.

Figma und FigJam überbrücken die Kommunikationslücke zwischen Design und Engineering

Volkswagen Group Services nahm sich vor, eine Customer-to-Customer-Plattform zu entwickeln, die Menschen hilft, Lagerräume zu vermieten. Die Idee war, einen Marktplatz zu schaffen, auf dem Nutzer*innen sowohl verfügbare Lagerräume anbieten als auch nach Lagermöglichkeiten im ganzen Land suchen können.

„Unser Ziel ist es, ein globales Netzwerk für Enterprise aller Branchen aufzubauen, deren Wertschöpfung von der Logistik abhängig ist.“ – Stefanos Tsoutis, Venture Builder und Business Mentor bei Worage, Volkswagen Group Services.

Zuerst mussten sie jedoch ein MVP für die neue Plattform entwerfen und erstellen sowie Markenelemente und das Kern-Geschäftsmodell ausarbeiten. Es erforderte bedeutende Beiträge von ihren Design-, Benutzererfahrungs-, Customer Experience- und Engineering-Teams.

„Das angestrebte Ergebnis war, ein skalierbares Geschäftsmodell und Produkt von Grund auf zu entwickeln, eine Marke auf dem Markt zu etablieren, ein MVP zu starten und das Produkt und Geschäftsmodell kontinuierlich weiterzuentwickeln.“ – Simon Elvers, Intrapreneur und Product Owner @ Worage, Volkswagen Group Services.

Bei so vielen Beteiligten passieren leicht Fehler – und diese wären teuer zu beheben. Volkswagen Group Services musste daher die Übergabe zwischen Design- und Engineering-Teams perfekt gestalten.

Das Designteam erstellte einen Prototyp der Anwendung in Figma, einschließlich eines Designsystems, detaillierter Seiten und Animationen. Sie kartierten auch akribisch jede Operation und Bedingung, die den Flow beeinflusst, und boten einen visuellen Leitfaden für Entwickler*innen, Designer*innen und Stakeholder.

„Die Herausforderung bestand darin, eine Visualisierung der Anwendung zu erstellen und ein gemeinsames Verständnis davon zu entwickeln, wie die Plattform in Bezug auf Flow, Datenübertragung und Qualitätssicherung funktionieren wird.“ – Hendrik Surma, Lead Software Architect bei Worage, Volkswagen Group Services.

Es war ein großartiger Start, aber die Projektleitungen benötigten eine Möglichkeit, um erste Überlegungen unter den Teams zu teilen und Feedback zu erhalten. Um dies zu tun, benötigten sie eine sinnvolle Live-Kommunikation über verschiedene Standorte hinweg. Das Online-Kollaborations-Whiteboard von Figma, FigJam, erfüllte diesen Zweck, indem es Bildschirme nahtlos mit Benutzer*innen an unterschiedlichen Standorten verband. Ingenieur*innen konnten sich frühzeitig einbringen und betriebliche Herausforderungen identifizieren, die die Funktionalität beeinträchtigen würden. Auf diese Weise konnten gemeinsam Lösungen gefunden werden. Diese Hand-in-Hand-Zusammenarbeit verhinderte eine Vielzahl von Problemen.

Die Verwendung von FigJam zusammen mit Figma führte auch zu innovativen Möglichkeiten, das Design des Produkts zu visualisieren. Das Team dokumentierte komplexe Benutzerflows in FigJam und verband sie mit den Haupt-Figma-Dateien, Seiten und Frames, wodurch es für die verschiedenen Teams einfach war, die Flows zu verstehen und auf weitere Details zuzugreifen.

„Die Visualisierung mit FigJam und Figma spielte eine entscheidende Rolle, um Designer*innen, Entwickler*innen, Produktverantwortliche und Stakeholder auf eine gemeinsame Sichtweise der Projektkomplexität zu bringen.“ – Laura Lake, leitende Product Designer bei Worage, Volkswagen Group Services.

Das Überwinden der Lücke zwischen Technik und Kommunikation

Die Kombination der visuellen Darstellung der Produktinteraktionen mit eingebetteter Dokumentation ermöglichte es den Ingenieur*innen, genau zu verstehen, wie Informationen zwischen verschiedenen Datenquellen und -zielen fließen. Dadurch konnten sie Prozesse optimieren und den Bedarf an Serveranfragen minimieren – was die Betriebskosten niedrig hielt.

Designer*innen nutzten ebenfalls Visualisierungen, um ein konsistentes und raffiniertes Benutzererfahrung zu schaffen. Sie konnten sehen, welche Interaktionen durch verschiedene Handlungsaufrufe ihren Auslöser hatten, um fehlende Bildschirme zu lokalisieren und Bereiche schnell zu identifizieren, die verfeinert werden mussten.

Auch das Projektmanagement-Team profitierte. Typischerweise war das Projektmanagement-Tracking von Volkswagen Group Services auf hoher Ebene nur ein Referenzpunkt – die Menschen mussten die Aufgaben genau interpretieren und dann herausfinden, wohin sie sich für Kontext und Ressourcen wenden mussten. Dieses Mal nutzte das Team von Volkswagen Group Services das Figma Atlassian Suite Integration JIRA-Plugin, um Projektmanagement-Tickets mit spezifischen Bildschirmen und Funktionen zu verknüpfen. Es war ein großer Schritt in Richtung Effizienz.

Früher musste der Link für die Bildschirme manuell in JIRA-Tickets kopiert werden, was für die Entwickler*innen mühsam war, die zwischen JIRA, Figma und VS-Code wechseln mussten. Die neue JIRA-Integration machte alle relevanten Kontexte, die sie benötigten, leicht zugänglich. Dies ermöglichte es den Produktverantwortlichen, Entwickler*innen und Projektmanager*innen, den Status einzelner Komponenten und Funktionen einfach zu überwachen, was das Projektmanagement weiter optimierte.

Produkteigentümer*innen betrachteten die Visualisierungen als Abkürzung, um fundierte Entscheidungen darüber zu treffen, welche Funktionen und Eigenschaften priorisiert werden sollen. Insgesamt war dieser integrierte Ansatz besser als die Verwendung von Tools, die nicht verbunden waren. Die Visualisierungen waren eine intuitive Möglichkeit für Teams, ihre Vision zu verfeinern und die Details allen zu kommunizieren, die Worage zum Leben erwecken.

Dev Mode verbessert die Übergabe von den Designer*innen zu den Entwickler*innen

Viele der Herausforderungen bei der Designer-zu-Entwickler-Übergabe wurden 2023 mit der Einführung von Dev Mode in Figma gelöst – ein Bereich in Figma mit Funktionen, die Designer*innen und Entwickler*innen helfen, Designs schneller in Code zu übersetzen. Es bietet eine Komponenten-Testumgebung, die es dem Engineering-Team von Volkswagen Group Services ermöglicht, verschiedene Komponenten und deren Variationen vor der Entwicklung in der Vorschau anzuzeigen. Dies beseitigt Unsicherheiten im Verhalten von Komponenten.

Im Bereich der Assets können Entwickler*innen von Volkswagen Group Services einfach Icons, Bilder und Videos für relevante Bildschirme herunterladen, was die Notwendigkeit zum Austausch zusätzlicher Asset-Pakete überflüssig macht. Dies zentralisiert alles und macht entwicklungsbereite Bildschirme und Seiten zu einer unanfechtbaren Quelle für Designer*innen und Entwickler*innen.

Das Volkswagen Group Services Team stellte fest, dass der neue Vergleichsmodus Entwicklungs-Bugs entgegenwirkt, indem er die vorgenommenen Änderungen an Bildschirmen klar zeigt, was Raten und kognitiver Überlastung für das Entwicklungsteam reduziert und letztlich Zeit spart. Und die Möglichkeit, Code für Elemente in verschiedenen Sprachen zu extrahieren, vereinfacht die Inspektion und Implementierung für das Entwicklungsteam, spart Zeit und reduziert Fehler.

Insgesamt stellte Volkswagen Group Services fest, dass Dev Mode die Zusammenarbeit förderte, indem er die Reibung bei der Übergabe zwischen Designer*innen und Entwickler*innen erheblich reduzierte.

„Wir nutzen Zusammenarbeit als Werkzeug, um Innovationen zu schaffen und unseren Ideen Wert zu verleihen. Und Figma ermöglicht diese Zusammenarbeit nahtlos innerhalb unseres Teams. Es ist ein ziemlich großartiges Setup!” – Parth Pandya, Product Designer und Figma Advocate, Volkswagen Group Services.

Wachstum der Worage-Vision mit Figma.

Das Worage-Projekt ist weit fortgeschritten und bereit, kleinen Unternehmen den Zugang zu benötigten Lagerflächen zu erleichtern. Es wird voraussichtlich später im Jahr 2024 live gehen.

„Die Klarheit der Entscheidungsbefugnisse und regelmäßiges Feedback können sich messbar auf unsere CX-KPIs auswirken. Die Kombination von Figma und FigJam hat uns geholfen, von Anfang an besser mit allen Stakeholdern zu kommunizieren. Diese Ausrichtung schuf ein kundenorientiertes, höherwertiges Produkt, half uns, schneller und kostengünstiger in die Produktion zu gehen“, sagt Sandra Schaus, Lead UX Expert, Volkswagen Group Services.