Wie Dev Mode den Design-to-Code-Workflow bei HP um 1,5 Stunden verkürzt

HP ist als Großunternehmen in der Elektronikbranche bekannt für seine Vorreiterrolle bei der Entwicklung von Druckern, Laptops, Gamingsystemen und mehr. Die Garage in Palo Alto, in der die Unternehmensgeschichte ihren bescheidenen Anfang nahm, ist heute Denkmal des US-Bundesstaates Kalifornien und gilt als Geburtsort des Silicon Valley. Doch das umfangreiche Produktportfolio, das unterschiedliche Kundengruppen anspricht, stellt das Unternehmen vor die Herausforderung, eine einheitliche und kohärente Nutzererfahrung zu bieten – insbesondere angesichts ständiger technologischer Innovationen. Hier kommt Veneer ins Spiel, das Designsystem von HP. Wir haben uns mit dem verantwortlichen Team zusammengesetzt, um mehr darüber zu erfahren, wie die Mitarbeiter*innen:

• ein Designsystem mit mehreren Ebenen entwickelt haben, das mehr als 70 Produkte unterstützt und die teamübergreifende Zusammenarbeit fördert,
• mit Hilfe von Dev Mode durchschnittlich 98 Minuten an Arbeitszeit pro Woche für Entwickler*innen und Designer*innen einsparen konnten,
• Code Connect implementiert haben, um die Einführung von Veneer zu skalieren und Kontextwechsel für Entwickler*innen zu reduzieren,
• einen ROI von 500 % durch jährliche Zeiteinsparungen erreicht haben und die Entwicklungszeiten mit Veneer um 50 % reduzieren konnten,

Berichte uns doch von deinem Team und wie ihr die Qualitätssicherung bei HP angeht.

Gilson Hoffmeister, Design Systems Strategist bei HP: Unser Team ist für das gesamte Erlebnis des Designsystems von HP verantwortlich – vom Umsetzen von Designs bis hin zu den einzelnen Plattformen wie Android, iOS, Windows und Web.

Unser Ziel ist es, die Teams von HP dabei zu unterstützen, hochwertige und konsistente Erlebnisse für alle Kund*innen zu schaffen. Das ist allerdings nicht immer einfach. HP ist ein großes Unternehmen mit über 100 unterschiedlichen Produktlinien, und jedes Produkt hat seinen eigenen Charakter. Business-PCs müssen durch elegante, funktionale Eigenschaften überzeugen, um den täglichen Anforderungen gerecht zu werden und Vertrauen zu vermitteln. Gaming-Zubehör hingegen soll nicht nur leistungsstark, sondern auch gut aussehen, damit Leute unsere Produkte gerne nutzen und vorzeigen.

Andrei Garcia, Senior Design Manager bei HP: Die vielen verschiedenen Geschäftseinheiten bei HP haben uns Schwierigkeiten bereitet, weil jede ihr eigenes Ding gemacht und sich nur auf die eigenen Bedürfnisse konzentriert hat. Die Teams agierten oftmals mit isolierten Workflows ohne ohne den digitalen Look and Feel von HP zu koordinieren. Diese Strukturen waren ungeplant entstanden und wir mussten alles durch einen zentralen Standard zusammenbringen.

Erzählt uns von Veneer, dem Designsystem von HP?

Gilson: Bei HP ist unser primäres Ziel die Zufriedenheit unserer Kund*innen. Mit Veneer sorgen wir dafür, dass unsere gesamte Software ein einheitliches Nutzungserlebnis bietet und alle Komponenten nahtlos zusammenarbeiten. Dank Veneer können alle Teams auf dieselben Designrichtlinien zurückgreifen, was die Nutzung für unsere vielfältigen Kund*innen erheblich vereinfacht.

Andrei: Veneer bietet einen Ausgangspunkt für die Arbeit von Designer*innen, Entwickler*innen, Texter*innen und anderen Beteiligten und leitet sie durch die gesamte Softwareentwicklung.Ursprünglich wurde das Projekt als Bibliothek für Frontend-Komponenten gestartet, hat sich jedoch zu einem vielseitigen System weiterentwickelt, das Zeit spart, redundante Arbeitsabläufe vermeidet und für eine konsistente Nutzererfahrung sorgt.

Wie messt ihr die Nutzung von Veneer?

Gilson: Wir messen die Nutzung von Veneer durch eine Kombination aus quantitativen und qualitativen Kennzahlen. Dazu analysieren wir das Engagement über Figma-Bibliotheken und verfolgen die Downloads unseres Development-Kits, um den Umfang und die Effektivität der Systemnutzung zu bewerten. So wissen wir zum Beispiel, dass 320 Teams bei HP 915 Symbolkomponenten aus unserer Bibliothek verwenden, mit durchschnittlich 85.000 Einfügungen pro Woche, was die intensive Nutzung der Bibliothek bestätigt. Eine interessante Anekdote: Das Symbol „Ellipse“ ist mit 1,2 Millionen Einfügungen das am häufigsten verwendete Element.

Warum ist es wichtig, die Akzeptanz und Nutzung des Designsystems voranzutreiben?

Gilson: Dass Veneer genutzt wird ist für uns von zentraler Bedeutung. Wir beschleunigen damit unsere Entwicklungsprozesse und gewährleisten eine konsistente Nutzererfahrung in allen Bereichen von HP. Veneer bietet Designer*innen und Entwickler*innen eine solide Grundlage. Die Erstellung von Komponenten von Grund auf ist zeitaufwendig, doch dank Veneer können wir unsere Mitarbeiter*innen entlasten. Verschiedene Zustände von Komponenten sowie Best Practices für Barrierefreiheit sind bereits integriert, wodurch die Teams Zeit beim Testen sparen, da diese Elemente schon im System verankert sind. So bleibt unseren Mitarbeiter*innen mehr Zeit, sich auf das Kerngeschäft und ihre Hauptaufgaben zu konzentrieren.

Gilson: Wir haben festgestellt, dass von Januar bis Dezember 2023 die Nutzung von Veneer die Arbeitszeit der Mitarbeiter*innen um 500 % reduziert hat, verglichen mit dem Aufwand für die Erstellung der Plattform. Anstatt in verschiedenen Projekten Zeit in die Entwicklung eigener Komponenten zu investieren, konnten alle auf die vorgefertigten Bausteine von Veneer zurückgreifen. Dies zeigt, wie stark Veneer zur Effizienzsteigerung beigetragen und gleichzeitig Kosten gesenkt hat. Unsere Investition in das System hat sich so um das Fünffache rentiert.

Andrei: Wenn Teams auf die Nutzung von Veneer verzichten, führt dies zu einer deutlichen Beeinträchtigung der Produktkonsistenz, Skalierbarkeit und Effizienz der Entwickler*innen. Laut unserem VP of Engineering, Gaurav Roy, hat die Verwendung von Veneer die Entwicklungszeiten in bestimmten Projekten um bis zu 50 % verkürzt. Diese Zahl deckt sich mit externen Erkenntnissen: So hat etwa eine Studie von IBM gezeigt, dass Entwicklungsprozesse um 47 % beschleunigt werden, wenn für einfache Elemente ein Designsystem verwendet wird, anstatt sie von Grund auf neu zu erstellen.

Vor Dev Mode: Vor welchen Herausforderungen stand euer Team bei der Förderung der Akzeptanz von Veneer?

Andrei: Eine unserer größten Herausforderungen war – und ist – die Vielfalt der einzelnen Marken von HP. Unser Szenario lässt sich nicht mit einem eindimensionalen Designsystem bewältigen. Es hat einige Zeit gedauert, bis wir Veneer so strukturiert und mit der notwendigen Flexibilität ausgestattet hatten, dass unsere Multi-Marken-Strategie unterstützt wurde. Mit nur einer Ebene hätten wir weder eine gegenseitige Abstimmung noch eine einheitliche Gestaltung über unsere verschiedenen Produkte hinweg sicherstellen können.

Gilson: Es war eine Herausforderung, unsere Designer*innen davon zu überzeugen, Veneer zu verwenden. Ihre Produkte und ihre Nutzer*innen sind ihnen sehr wichtig. Wenn etwas Externes in ihre minutiös entwickelten Designs eingreift, löst das sofort Bedenken aus. Die Designer*innen befürchten, dass dadurch die enge Beziehung zu ihren Nutzer*innen beeinträchtigt werden könnte.

Die große Herausforderung bestand darin, den Wert eines einheitlichen Designsystem zu verdeutlichen. Viele waren daran gewöhnt, ihre eigenen Entscheidungen in Bezug auf Designs zu treffen, z. B. die Auswahl von Komponenten oder Farben. Wir wollten unseren Designer*innen nahelegen, dass sie durch die Nutzung von Veneer derartige Aufgaben abgeben und sich noch besser auf die kreativen Aspekte ihrer Projekte wie Unternehmenslogik und Designmuster fokussieren können.

Unseren Entwickler*innen fiel es leichter, Veneer anzunehmen, da sie die Vorteile einer Wiederverwendung von Programmcode kannten. Jedoch waren wir weiterhin mit der Herausforderung konfrontiert, Veneer effektiv über die mehr als 40 UI-Frameworks und Frontend-Technologien hinweg einzusetzen.

Wie nutzt ihr Dev Mode in Verbindung mit eurem Designsystem in den Teams bei HP?

Dev Mode hat den Zugriff unserer Entwickler*innen auf Designvorgaben innerhalb von Figma optimiert, wodurch wir langwierige Entscheidungsprozesse und Meetings reduzieren und die Umsetzung von Designs zu Programmcode bedeutend vereinfachen konnten.

Andrei: Zum Beispiel haben wir die Unterstützung ovaler Komponenten eingeführt, was Anpassungen bei Abständen und Rändern erforderte. Durch die Nutzung von Annotationen in Dev Mode konnten Designer*innen die Änderungen leichter an Entwickler*innen weitergeben und den Ablauf effizienter gestalten.

Die Funktion „Änderungen vergleichen“ ist besonders hilfreich, um Veränderungen zwischen zwei Designversionen nachzuvollziehen, insbesondere wenn wir unsere bestehenden Produkte überarbeiten. Die Funktion sorgt dafür, dass alle auf dem gleichen Stand sind, und erleichtert Aktualisierungen.

Ein weiterer schöner Aspekt ist die Möglichkeit, Teile des Designs als „Ready for Dev“, also bereit für die Entwicklung zu markieren. Damit wissen unsere Entwickler*innen genau, woran sie arbeiten können. Das verhindert Verwirrungen und ermöglicht allen Beteiligten mehr Produktivität.

Wie setzt ihr Variablen im Dev Mode ein, um die Herausforderungen eines vielseitigen Produktportfolios erfolgreich zu meistern?

Andrei: Wir verwenden Variablen, die mit unseren grundlegenden oder semantischen Tokens verknüpft sind. Dies ermöglicht uns eine optimale Skalierung über verschiedene Themen und Modi hinweg, z. B. hell, dunkel und hoher Kontrast.

Diese Variablen schaffen zudem eine entscheidende Verbindung zwischen Designelementen und der Coding-Umgebung. Unser Foundation-Team verwaltet die Kernkomponenten von Veneer und setzt Automatisierungsfunktionen ein, um den Übergang von Design zu Code zu optimieren. Durch die Nutzung der Figma API können Design- und Entwicklungsteams enger zusammenarbeiten, indem sie Variablen direkt aus den Designs auslesen und diese 1:1 in den Programmcode übertragen. So sprechen Designer*innen und Entwickler*innen buchstäblich eine gemeinsame Sprache, da die im Design definierten Variablen unverändert in den Code übernommen werden können.

Diese enge Abstimmung vereinfacht den Entwicklungsprozess erheblich und verbessert die Kommunikation zwischen den Teams, wodurch die Umsetzung der Designvorgaben präziser wird. Dank der direkten Übereinstimmung von Design und Code minimieren wir Inkonsistenzen und erhöhen die Qualität sowie die Skalierbarkeit unserer digitalen Produkte. Dies ermöglicht es uns, schneller und effizienter auf neue Anforderungen zu reagieren, während gleichzeitig die Konsistenz über alle Projekte hinweg gewahrt bleibt.

Ihr gehört zu den ersten Nutzer*innen von Code Connect. Könnt ihr eure bisherigen Erfahrungen damit teilen?

Gilson: Auf Code Connect haben wir uns besonders gefreut. Die Einrichtung war super einfach und dauerte nur zwei Wochen, und das mit nur einer Person aus dem Entwicklungsteam.

Um noch mehr Zeit zu sparen, automatisieren wir weitere Teile des Vorgangs wie Änderungen an Komponenten. Wir haben beispielsweise eine Quelldatei, in der sich alle Symbole in einer editierbaren Version befinden (mit mehreren Ebenen und verschiedenen Elementen wie Linien, Rechtecken, Kreisen usw.). Mit Hilfe einer Automatisierungsfunktion überwachen wir die Quelldatei auf Änderungen. Daraufhin optimieren wir die Datei und erstellen eine Bibliothek mit dem SVG-Code, der zur Erstellung der Symbolbibliothek in Figma verwendet wird und mit Entwickler*innen geteilt wird, um ihn in Entwicklungsbibliotheken einzupflegen. Jedes Mal, wenn ein Symbol zur Quelldatei hinzugefügt wird, ergänzt die Automatisierungsfunktion es in der Symbolbibliothek und in Code Connect und gibt es an Entwicklungsbibliotheken weiter.

Gilson: Wir haben eine Website mit Dokumentationen zu allen Komponenten erstellt, auf der Entwickler*innen Eigenschaften einsehen und sogar Live-Demos mit Codeauszügen abrufen können. Früher mussten Entwickler*innen viel Zeit aufwenden, um verschiedene Webseiten nach den benötigten Codeauszügen zu durchsuchen. Mit Code Connect können sie jetzt einfach auf eine Komponente in Figma klicken und sofort die passenden Code Snippets mitsamt aller relevanten Einstellungen einblenden. Dadurch beschleunigen wir die Weiterentwicklung und Integration von Veneer erheblich und machen den Prozess für Entwickler*innen wesentlich effizienter.

Andrei: Code Connect ist auch unseren Designer*innen eine große Hilfe. Es gibt ihnen ein besseres Verständnis der Funktionsweise des Programmcodes und dadurch können sie bessere Prototypen erstellen. Besser noch als mit der Prototyping-Funktion von Figma allein.

Wie hat euer Team auf Dev Mode reagiert?

Gilson: Wir haben eine Umfrage mit 400 Personen durchgeführt, die Dev Mode bei HP nutzen, wobei die Mehrheit Entwickler*innen waren. Das Feedback zur Umfrage war überwältigend positiv. Die Impressionen einer Entwicklerin: „Dev Mode reduziert die Zeit, die ich mit Routineaufgaben verbringen muss, wodurch ich meinen Schwerpunkt auf die Verbesserung der Funktionen legen kann.“ Ein weiterer Kommentar: „Codeauszüge direkt generieren und verwenden zu können, hat unsere Entwicklungszyklen erheblich beschleunigt.“

Durchschnittlich konnten zudem 98 Minuten pro Woche und Person eingespart werden, da weniger Kontextwechsel und Recherchen auf anderen Websites erforderlich sind, um passende Codeauszüge zu finden.

Diese Daten zeigen: Die meisten Teams konnten erhebliche Verbesserungen ihrer Workflows durch die Einführung von Dev Mode verzeichnen. Ein großer Teil der Befragten berichtet von gesteigerter Effizienz, kürzeren Bearbeitungszeiten und einer höheren Qualität ihrer Arbeit. Dieses Feedback hebt die unmittelbaren Vorteile von Dev Mode hervor und betont dessen positiven Einfluss auf die Entwicklungsprozesse bei HP.

Andrei: Mit der Einführung von Dev Mode hat sich auch unser Mindset verändert. Designer*innen und Entwickler*innen sprechen dieselbe Sprache und folgen ganz neuen Methoden, um Produkte zu entwickeln. So wurde das Konzept von Übergaben gänzlich abgeschafft. Jetzt steht viel mehr der Prozess vom Design zur Entwicklung im Mittelpunkt. Die Arbeitsabläufe sind flüssiger, und unsere Produktentwicklung geht schneller.