So vereinfacht Customer.io Design-Übergaben mit Variablen und Dev Mode

Lesezeit: 4 Minuten

Zusammenfassung: Funktionalität ist seit jeher ein zentraler Fokus in der Welt der Marketingtechnologie (MarTech). Customer.io hat die Branche mit einem anderen Ansatz revolutioniert – Design und Benutzererfahrung sind ihre Leitprinzipien bei der Erstellung von Produkten für ihre Kund*innen. Gegründet im Jahr 2012, ist das Unternehmen gewachsen, um automatisierte Nachrichtenkampagnen für führende Marken wie Notion, Clearbit und IMAX zu unterstützen.

Im Rahmen des Figma-Organization-Abos hat Customer.io seine Design-Entwicklungsübergaben durch die Verwendung von Variablen und den Dev Mode verbessert, was dem Team ermöglicht, Arbeiten schneller abzuschließen.

Herausforderung: Entkoppelte Komponentenbibliotheken erzeugen Reibungen zwischen Design und Entwicklung

Während Customer.io Figma schon seit einiger Zeit nutzte, erreichten sie einen Wendepunkt, an dem der Mangel an Governance im Designsystem und Ad-hoc-Komponenten begann, ihre Arbeit zu beeinträchtigen. Aiden Bordner, Customer.io’s Sr. Director, Head of Product Design, erklärt: „Wir kamen an einen Punkt, an dem nicht jede Komponente eine kanonische Darstellung in Figma hatte. Es gab keine gemeinsame Kontinuität zwischen Design und Dev, da Spezifikationen nicht leicht auf die Absicht im Designsystem abgebildet werden konnten.“

Diese Trennung führte zu Abweichungen in der gestarteten Arbeit. Obwohl der Einfluss auf den ersten Blick subtil war – ein Knopf mit dem falschen Rand; ein Trenner, der zu dunkel war; ein Abstand, der um einige Pixel abwich – summierten sich diese Designentwicklungsdiskrepanzen schnell zu ernsthaften Belastungen und einer uneinheitlichen Benutzererfahrung.

„Wenn wir diese Fehler sehen, muss jemand aus der Qualitätssicherung sie kennzeichnen, dann wird ein Ticket erstellt und anschließend bauen wir das Frontend neu auf“, stellt Aiden fest. „Diese Zeit- und Wechselkosten, die erforderlich sind, um die Probleme zu beheben, haben einen realen Einfluss darauf, was wir den Kunden an neuen Funktionen bieten können.“

Mit unsicheren Workflows und erhöhter Reibung zwischen den Teams wusste Aiden, dass eine Veränderung vorgenommen werden musste, bevor diese Versäumnisse die Benutzererfahrung in größerem Maßstab beeinträchtigten.

Lösung: Variablen und Dev Mode kommen zum Einsatz

Customer.io machte sich die neuesten Funktionen von Figma zunutze, als sie begannen, ihr Designsystem zu aktualisieren. „Der Startschuss war die Config 2023 – Dev Mode und Variablen wurden eingeführt und ich dachte: ,Das ist das Werkzeug, auf das ich gewartet habe‘“, sagte Aiden. Das Produktdesignteam richtete Variablen in Figma ein, um Farben, Abstände, Schriftgrößen, Eckenradien und Typografiestile zu unterstützen. Jetzt müssen Entwickler*innen nicht mehr herumraten, um die genaue Pixelanzahl für einen Spaltenabstand oder den richtigen Farbcode herauszufinden.

Mit Variablen konnte das Team Designeigenschaften von Grund auf standardisieren. „Ein Entwickler muss sich keine Gedanken darüber machen, seine eigene Interpretation eines Designs zu machen. Es wird neuen Entwicklern helfen, ein Mockup in die Umsetzung zu übersetzen, wenn die Spezifikation zu 60–70% direkt vor ihnen liegt“, sagt Aiden. Mit diesen nun eingeführten einheitlichen Rahmenwerken erleben Entwickler*innen weniger Fehler und können ihren Prozess schneller durchlaufen.

Darüber hinaus war die Einführung des Dev Mode ein Wendepunkt für den Customer.io- Workflow. „Es kann viel sein, herauszufinden, was gebaut werden kann“, sagt Aiden. „Mit dem Dev Mode ermöglichen es Annotationen den Designer*innen, einen bestimmten Abschnitt hervorzuheben, sodass die Entwickler*innen sofort loslegen können.“

Auswirkung: Design- und Dev-Teams setzen einen neuen Maßstab für Effizienz

Die erneuerte Übergabe von Design zu Entwicklung hat die Produktivität des Teams erheblich gesteigert. Da die Designdateien nun kommentiert sind, können Entwickler*innen sie leicht inspizieren, die zugrunde liegende Struktur verstehen und sofort mit der Umsetzung beginnen.

Mit diesem Geschwindigkeitsfortschritt schließt sich auch für das Designteam der Kreis. „Designer*innen setzen auf diese Wachstumseinstellung“, sagt Rennie Abraham, Head of Brand Studio bei Customer.io. „Sie können iterieren, testen und anpassen, anstatt sechs Monate an zwei oder drei großen Landing Pages zu arbeiten und nicht zu wissen, ob diese unsere Geschäftsziele erreichen werden. Nicht viele Orte haben die Zusammenarbeit und den Innovationsgeist, den Figma uns ermöglicht zu erreichen.“

Indem das Customer.io-Team die Vorteile von Variablen und Dev Mode nutzt, hat es nicht nur seine internen Prozesse verbessert, sondern sich auch als designgetriebener Marktführer in der MarTech-Branche positioniert. Designer*innen können kleine Details und Änderungen leichter zu verfolgen, wenn sie ihre Dateien als „Bereit für Dev“ markieren und so einen höheren Grad an Perfektion in ihrem Ergebnis erreichen, das sie zusammen mit Entwicklerkollegen liefern. Das Engagement des Unternehmens für dieses Maß an Verfeinerung ermöglicht es seinen Benutzer*innen, darauf zu vertrauen, dass das Produkt ihre Kundenkommunikation transformieren kann.

„Wir haben einen klaren Fokus darauf, unseren Kund*innen einen benutzergerechten UX- und UI-Verfeinerungsgrad zu liefern“, sagt Aiden. „Dies sind die Grundlagen, um unsere Design- und Engineering-Umgebungen zu verbinden, die uns einen Wettbewerbsvorteil verschaffen.“

Customer.io ist ein großartiges Beispiel für die positiven Ergebnisse, wenn Teams ihre Design-to-Development-Übergaben optimieren. Das Endergebnis fördert nicht nur Effizienz und eine bessere Benutzererfahrung, sondern bietet neue Möglichkeiten für kreative Innovationen. Mit diesem kollaborativen Ansatz wird das Team weiterhin designzentrierte Lösungen entwickeln, die seine Benutzer*innen mit aussagekräftigen Daten befähigen, um ihre Kund*innen zu begeistern.