Fünf Ideen für eine bessere Zusammenarbeit zwischen Design und Entwicklung

Die Entwicklung einer App ist ein Teamsport. Sie erfordert das Zusammenspiel vieler Beteiligter, einschließlich der Teams aus Design und Entwicklung. Wie Roger Staubach, der berühmte Quarterback der Dallas Cowboys aus den 70er Jahren, sagte: „In jedem Teamsport zeichnen sich die besten Teams durch Beständigkeit und Teamchemie aus.“

Mangelnde Zusammenarbeit zwischen Design und Entwicklung führt zu geringerer Effizienz und längeren Projektlaufzeiten. Widersprüchliche KPIs, fehlendes Verständnis für die Denkweise der anderen Seite, unregelmäßige Meetings und die Nutzung von Tools zur Zusammenarbeit, die eine Gruppe bevorzugen, verschärfen das Problem. Betrachten wir all diese Faktoren genauer und finden wir heraus, wie Unternehmen die Zusammenarbeit zwischen Design und Entwicklung verbessern.

Statt herkömmlicher KPIs profitieren Design und Entwicklung von nutzerzentrierten KPIs wie Konversionsrate, Engagement-Metriken, Sitzungsdauer, Bounce-Rate etc. Diese KPIs bringen beide Gruppen auf einen gemeinsamen Nenner und helfen ihnen, sich auf das Wesentliche zu konzentrieren: die User Experience.

Stellen Sie sich die Konversionsrate als KPI für ein Projekt vor, dessen Ziel die Erstellung von Landingpages für eine neue Kampagne ist. Anstatt das Landingpage-Design in X Tagen abzuliefern (Design) und in X Tagen live zu schalten (Entwicklung), konzentrieren sich beide Teams darauf, die Landingpage aus Nutzerperspektive optimal zu gestalten.

Herkömmliche KPIs für Design und Entwicklung berücksichtigen selten die Zeit für Zusammenarbeit oder Wartezeiten und führen zu unnötigen Konflikten.

Zu den gängigen KPIs für Design-Teams gehören:

• Zeit bis zum Abschluss des Projekts
• Zeitaufwand für Überarbeitungen
• internes oder externes Feedback zum Design
• Anzahl der abgeschlossenen Projekte pro Quartal

Bei diesen KPIs ist das Feedback der Entwicklung für das Design-Team nachteilig, da Zeit für neue Projekte fehlt und bereits abgegebene Entwürfe überarbeitet werden müssen. In diesem Fall stehen ihre KPIs im Widerspruch zu denen der Entwicklung.

Andererseits gehören zu den gängigen KPIs für die Frontend-Entwicklung:

• Coding-Zeilen und Anzahl der Deploys
• Durchlaufzeit – die für eine einzelne Aufgabe aufgewendete Zeit
• Stabilität und Einfachheit des Codings

Komplexe und funktionsreiche Designs erfordern mehr Coding-Aufwand von der Entwicklung. Immer wenn das Design-Team also auf neuen Funktionen beharrt, die komplexes Coding erfordern, wird dies von der Entwicklung als Hindernis empfunden.

Obwohl herkömmliche KPIs ihre Vorteile haben, sollten Führungskräfte sicherstellen, dass die KPIs eines Teams nicht mit der Arbeit des anderen Teams in Konflikt geraten. Dies lässt sich erreichen, indem nutzerzentrierten und gemeinsamen KPIs mehr Gewicht verliehen wird.

Wenn das Design-Team die Grundlagen der Frontend-Entwicklung versteht, betrachtet es die Dinge aus der Perspektive der Entwicklung. Das Gleiche gilt für die Entwicklung. Darüber hinaus erstellt ein Design-Team mit grundlegenden Kenntnissen in HTML und CSS Entwürfe, die technologische Grenzen berücksichtigen. Zu verstehen, wie eine Anwendung im Hintergrund funktioniert – selbst wenn es nur um Grundlagen und API-Funktionen geht –, hilft beim besseren Verständnis technischer Einschränkungen.

Durch die Teilnahme an Grundkursen in der jeweils anderen Disziplin lernen Design- und Entwicklungsteams, die Sprache der anderen zu sprechen. Diese Art der gegenseitigen Schulung verbessert die Zusammenarbeit und führt dazu, dass beide Gruppen gemeinsam bessere Wege zur Problemlösung finden.

Coursera und Career Foundry bieten spezielle Kurse für Design-Fachleute an, die sich in der Frontend-Entwicklung weiterbilden möchten. Diese Kurse decken die Grundlagen der Webentwicklung ab und vermitteln HTML, CSS und JavaScript – die drei Sprachen, die im Frontend-Bereich allgegenwärtig sind. Diese Kurse behandeln auch UX- und UI-Design aus Sicht der Entwicklung. Wer an diesen Kursen teilnimmt, versteht anschließend besser, wie die Entwicklung Designs zum Leben erweckt.

Die Entwicklung profitiert ebenfalls von Kursen auf Canva und LinkedIn Learning. Diese Kurse behandeln Typografie und Farbkombinationen, vor allem aber die Phasen des kreativen Prozesses und die Denkweise im Design. Die Entwicklungs-Fachleute, die diese Kurse absolvieren, erlangen ein besseres Verständnis für die Aspekte des Designs.

Diese Kurse erfordern zusätzlichen Zeit- und Arbeitsaufwand von beiden Seiten, doch die gegenseitigen Schulungen zahlen sich durch eine verbesserte Effizienz aus. Darüber hinaus erwerben alle, die diese Kurse absolvieren, neue Skills und Zertifizierungen.

Ein Designsystem besteht aus einem Styleguide und einer Pattern-Bibliothek. Es dient als zentrale Informationsquelle für wiederverwendbare Komponenten (Drop-down-Menüs, CTA-Buttons, Lead-Formulare …) sowie klare Anweisungen zu deren Nutzung. Zudem reduziert es Unstimmigkeiten und unnötiges Hin und Her zwischen Design und Entwicklung. Ein definiertes System aus wiederverwendbaren Komponenten verringert außerdem vermeidbare technische Schulden , die sich bei der Entwicklung ansammeln können. Dies geschieht, wenn dieselben UI-Elemente mehrfach erstellt werden. Die Wiederverwendung von Assets ermöglicht eine schnellere Zustellung und eine konsistente Anwendung.

Ein Styleguide ist ein Standardwerk für alle Markenkennzeichen wie das Firmenlogo, das Farbschema, die Schriftart und das Vorlagendesign. Die meisten Unternehmen beginnen mit einem Styleguide und erarbeiten sich im Laufe ihres Wachstums eine Pattern-Bibliothek.

Ein Pattern-Bibliothek ist eine Sammlung aller interaktiven Komponenten des Designs, darunter Buttons, Navigationsleisten und Karusselle. Sie enthält zudem Definitionen und Beschreibungen all dieser Komponenten, erläutert deren Verwendungszweck und liefert das zugehörige Coding.

Ein Designsystem kombiniert diese beiden Elemente. Es bietet dem Nutzer umfassende Informationen zu den Inhalten des Styleguides und der Pattern-Bibliothek sowie Richtlinien zur Umsetzung und Vorgaben, was beim Design zu beachten oder zu vermeiden ist. Das Design-Team erstellt Konzepte direkt im Designsystem, indem es gespeicherte Komponenten per Drag and Drop einfügt. Die Entwicklung sieht das zugehörige Coding jeder Komponente und gibt Feedback direkt in derselben Umgebung.

Zu den beliebten Online-Tools für das Management von Designsystemen gehören material.io, supernova.io, zeroheight.com und PatternFly.

Teamübergreifende Meetings helfen dabei, Konflikte zu lösen, die Kommunikation zu verbessern und das Verständnis zwischen beiden Gruppen zu fördern. Wiederkehrende wöchentliche oder vierzehntägige Meetings zwischen Design und Entwicklung helfen dabei, laufende Projekte zu besprechen, neue Projekte zu starten und effektiv zusammenzuarbeiten. 

In einer Webinar zur Zusammenarbeit zwischen Design und Entwicklung betonte Nicki Snyder, Manager of Experience Design bei Pathwire, wie wichtig Meetings zwischen dem Design-Team und der Entwicklung sind:

„Wir (im Design) gestalten sehr gerne Dinge und gehen davon aus, dass sie auch funktionieren. Wir haben die Technik nicht frühzeitig einbezogen. Das führte zu viel unnötiger Arbeit, die sich durch eine Stunde Besprechung unserer Wünsche und des angestrebten Endzustands (mit der Technik) hätte vermeiden lassen.“

Das Produktmanagement ist ideal dafür geeignet, diese Meetings zu leiten und sicherzustellen, dass sich beide Gruppen auf die Verbesserung der User Experience konzentrieren. Das Produktmanagement legt auch die Agenda für diese Meetings fest. Das kann ein spezifisches Problem oder Hindernis in einem Projekt sein, die Durchsicht von Designs für eine neue Produktfunktion oder Webseite, oder eine Konversation über eine leistungsschwache Landingpage. Dieses Meeting lässt sich auch in eine Arbeitssitzung umwandeln, in der eine kleine Gruppe aus Design und Entwicklung ein bestimmtes Problem löst.

Auftakt-Meetings und Arbeitssitzungen helfen der Entwicklung dabei, abzuschätzen, ob sich die Anforderungen innerhalb der Anwendung umsetzen lassen. So bleibt Zeit für eine Vorabuntersuchung, falls nötig, um herauszufinden, welche Voraussetzungen für die Umsetzung der Funktionalität oder des Designs erfüllt sein müssen. Ein Meeting zu Projektbeginn hilft dem Produktmanagement, realistische Zeitrahmen für die Zustellung festzulegen, und liefert dem Design-Team klare Anforderungen vorab.

Das Produktmanagement trägt die Verantwortung dafür, dass diese Meetings nicht zu reinen Status-Updates werden. Sie sollten nur stattfinden, wenn eine vordefinierte Agenda vorliegt, die klar ein zu lösendes Problem benennt.

Die wichtigsten Erkenntnisse aus diesen Meetings fließen in die Aktualisierung des Designsystems ein. Idealerweise finden diese Meetings anfangs wöchentlich, dann alle zwei Wochen und später monatlich statt. Sobald das Designsystem ausgereift ist, werden sie nur noch bei Bedarf abgehalten.

Der herkömmliche Prozess der Zusammenarbeit zwischen Design und Entwicklung beinhaltet eine Übergabe vom Design- an das Entwicklungs-Team. Beispielsweise erstellt das Design-Team Bildschirmentwürfe und teilt die Bild-Datei mit der Entwicklung. Die Entwicklung gibt dann Feedback dazu, was machbar ist und was nicht. Das Design-Team überarbeitet (oder erstellt) die Entwürfe bei Bedarf neu und übergibt sie erneut an die Entwicklung – und so weiter. Dieser Prozess ist zeitaufwendig und erfordert viel Abstimmung, bevor etwas live geschaltet wird.

Tools zur Zusammenarbeit zwischen Design und Entwicklung zielen darauf ab, aus dieser Übergabe eine direkte Abstimmung zu machen. Design und Entwicklung betrachten denselben Entwurf in einer Umgebung, die eine Bearbeitung in Echtzeit ermöglicht. Dadurch entfällt das ständige Hin und Her.

Zudem gibt es Tools zur Zusammenarbeit wie Adobe XD , die stärker auf die Bedürfnisse im Design ausgerichtet sind und den Übergabeprozess von Wireframes zu fertigen Designs unterstützen. Einige Tools wie zeplin.io sind auf die Entwicklung fokussiert und erfüllen deren Anforderungen, indem sie Code-Snippets, Assets und Spezifikationen für verschiedene Bildschirmgrößen an einem zentralen Ort bereitstellen. Zeplin lässt sich in Adobe XD integrieren. So kann es ergänzend eingesetzt werden, um die Entwicklung zu unterstützen.

In dem zuvor erwähnten Webinar sprach Nicki über einige der Herausforderungen, die mit dem Übergabeprozess einhergehen. Eine dieser Herausforderungen bestand darin, das Feedback der Entwicklung zu spät im Prozess zu erhalten. Sie erwähnte auch, wie InVision ihnen dabei half, die Übergabe durch eine direkte Abstimmung zu ersetzen.

Neben InVision gibt es Tools wie Bit und Figma , die Design und Entwicklung bei der Zusammenarbeit in Echtzeit unterstützen. Diese Tools lassen sich auch in JIRA oder andere Projektmanagement-Tools integrieren. Die Preisgestaltung variiert je nach Anzahl der Nutzer sowie der Projekte. Für ein professionelles Abonnement liegen die Kosten zwischen 9,95 und 20 $ pro Nutzer und Monat.

Meistens konzentriert sich die Diskussion über die Zusammenarbeit zwischen Design und Entwicklung auf Webseiten und Anwendungen. Doch auch die E-Mail profitiert davon.

Dank einer besseren Zusammenarbeit zwischen Design und Entwicklung:

• E-Mails funktionieren in allen Arten von Posteingängen und auf sämtlichen Endgeräten.
• Zustellbarkeit steigt aufgrund von saubererem, einfacherem Coding.
• Klickrate erhöht sich durch bessere Layouts.
• Abmelderate sinkt aufgrund des höheren Engagements.

Darüber hinaus helfen ein etabliertes Designsystem, Frontend-Schulungen und die nutzerfreundlichen Funktionen von Pathwire dem Design-Team dabei, E-Mail-Vorlagen zu erstellen, die sich anpassen und immer wieder neu verwenden lassen. Beispielsweise erstellt das Design-Team eine Newsletter-Vorlage. Die Entwicklung prüft die Darstellung auf allen Bildschirmgrößen mit Tools wie Inbox Display von Email on Acid oder der E-Mail-Vorschau von Mailjet und das Marketing fügt jeden Monat einfach neue Bilder ein und ersetzt den Text in derselben Vorlage.

Apropos Newsletter: Abonnieren Sie unseren. Wir senden Ihnen jeden Monat Artikel wie diesen, ausführliche Ratgeber, spannende Neuigkeiten von Pathwire und vieles mehr.

Sehen Sie sich unser als Live-Stream übertragenes Panel-Webinar an: „Das volle Potenzial der Zusammenarbeit zwischen Entwicklung und Design mit Pathwire und InVision ausschöpfen.“

An der Podiumsdiskussion nehmen teil:

• Nicki Snyder, Manager of Experience and Design bei Mailgun by Pathwire.
• Lawrence Norton, Software Engineer bei Mailgun by Pathwire.
• Nick Karavas, Solutions Consultant bei InVision.

Autor: Nicki Snyder Nicki Snyder is the Director of Experience Design for the CPaaS Design Group at Sinch. She leads our Product Design team and focuses on the UX and visual interface to optimize our product. She writes about design and brings insight into collaborating with developers on projects.