Über unsMediaKontaktImpressum
Kathrin Friedrich 13. August 2019

UX-Architekten und Design Operations – müssen Softwareentwickler umdenken? Design better together!

Quo vadis Softwareentwicklung?

Bis 2025 werden sich Prozesse und Teams rund um agile Softwareentwicklung grundlegend verändern. Denn der Bedarf des Marktes nach schnellen Innovationszyklen, vernetzten digitalen Touchpoints und hohe Ansprüche an User Experience, Performance und Funktionalität erfordern eine fortlaufende Effizienzsteigerung. Wie gut dieser Wandel gelingt, kann am UX-Reifegrad von Unternehmen und Produkten abgelesen werden. Wer bei dieser Entwicklung allerdings nicht das Nachsehen haben will, sollte sich mit den in diesem Zusammenhang erforderlichen Erfolgskriterien und nötigen Maßnahmen auseinandersetzen. Design Operations kann in dieser Hinsicht eine wichtige Rolle zuteilwerden.

Bereits vor einigen Jahren wurden Stimmen laut, dass Interface Designer selbst HTML, CSS und JavaScript beherrschen müssten, um Design und Entwicklung stärker miteinander zu verzahnen. Ähnliche Erwartungen wurden auch schon seit Längerem an neu geschaffene DevOps-Teams gestellt: Entwicklung und Betrieb sollten näher aneinanderrücken. Dieser Trend setzt sich auch heute immer weiter fort. Design Operations kann dabei unterstützen, diese beiden Welten aus Kreation und Implementierung noch ein ganzes Stück weiter zusammenzubringen.

Design Operations im Detail

Herausragende digitale Produkte entstehen nicht zufällig und sind nicht allein von der Kreativität des Art Directors und der Kompetenz des Software-Architekten abhängig. Das Zusammenspiel beider spielt eine entscheidende Rolle. Ein durchgängiger Prozess, gestützt von Design Operations, sichert das Ergebnis, steigert Effizienz und ermöglicht Freiraum für Innovation.

Der Erfolg von Design Operations lässt sich mithilfe eines Reifegradmodells ersichtlich machen. Das folgende von uns genutzte 4T-UX-Reifegradmodell orientiert sich dafür an den vier Säulen Touchpoints, Teams, Transparenz und Tools. Diese sind wiederum in 22 spezifische Kriterien untergliedert. Hierdurch fußt das Reifegradmodell auf einer breiten analytischen Basis und kann damit effizient als Grundlage und Messinstrument zur kontinuierlichen Verbesserung von Prozessen und Kundenprojekten dienen.

Maßgeblich für den Erfolg von Design Operations sind die im Folgenden beschriebenen vier Kernaspekte.

1. Fortlaufende Bewertung aller Touchpoints

Der Begriff der Customer Journey ist schon längst vom Buzzword zur gängigen Vokabel geworden. Nutzer und Marken betrachten Webseiten, Apps, Shops, Newsletter, Microsites und Landingpages eines Unternehmens schon lange nicht mehr singulär, sondern erwarten ein durchgängiges Markenbild und Nutzererlebnis. Durch die Digitalisierung kommen hier fortlaufend weitere Touchpoints hinzu, die auch immer kürzer werdenden Relaunch-Zyklen unterworfen sind. Ein regelmäßiger Healthcheck durch Expertenteams hilft, Entwicklungsbudgets sinnvoll zu verteilen und Quick Wins zu identifizieren.

Zur Relevanz regelmäßiger Qualitätserhebungen

Wir starten Kundenprojekte stets mit einer ganzheitlichen Analyse. Denn ein Redesign kann nicht losgelöst von der Bewertung der Usability, Kriterien der Barrierefreiheit, Suchmaschinenoptimierung oder der Qualität der eigentlichen Inhalte betrachtet werden.
Regelmäßige Nutzertests sind elementar für den Erfolg digitaler Produkte. Ein UX-Healthcheck evaluiert den Ist-Stand der Anwendung und ist elementar zur Bestimmung des Projekt-Scope und einer sinnvollen Roadmap. Unseren Bestandskunden empfehlen wir einen jährlichen UX-Healthcheck – quasi den UX-TÜV für Webseiten oder eCommerce-Shops.

2. Interdisziplinäre Scrum-Teams

Typische Scrum-Teams sind technologiegeprägt. Allzu häufig werden Konzepte und Interface-Designs in der vorgelagerten Backlog-Befüllung erstellt. Ein fachlicher Austausch, Prototyping im Pairing von UX und Development sowie kontinuierliche Verbesserung von Features mit dem UX-Designer finden oft erst statt, wenn der Auftraggeber oder Product Owner die Abnahme eines Features verweigert, schlechte Bewertungen im App-Store folgen oder Nutzer schlicht zum Konkurrenzprodukt wechseln.

Kein Entwicklungsprojekt ohne dauerhaft integrierten UX-Designer

Einem Developer-Team mit fünf Entwicklern sollte im Sprint immer eine halbe Stelle eines UX-Designers zur Feature-Entwicklung zur Seite gestellt werden. Die restliche Zeit unterstützt der UX-Designer den Product Owner in der Anreicherung von User Stories aus Nutzersicht, der Dokumentation von UX-Schulden aus vorherigen Sprints und dem Erstellen von Usability- oder A/B-Test-Konzepten.

Im Sprint ist ein bestimmtes Kontingent an Storypoints jeweils zur Optimierung der User Experience vorgesehen, sodass kontinuierlich an UX-Schulden vorheriger Sprints wie z. B. mangelnder Usability oder Barrierefreiheit, Schwächen im Responsive Design oder Interaktionsdesign gearbeitet werden kann – was häufig bei der klassischen Definition of Done nicht ausreichend berücksichtigt wird.

3. Die Rolle des UX-Architekten im Team

In großen Softwareentwicklungsprojekten konzipiert und orchestriert der Software-Architekt das Gesamtbild der Anwendung. Auf Augenhöhe kommt nun die Rolle des UX-Architekten hinzu. Dieser ist weit mehr als der bisherige Art Director, der allein die visuelle Ausgestaltung einer Anwendung verantwortet. Kreativteams sind heute durch die hohen Anforderungen an Spezial-Skills deutlich diversifizierter als noch vor fünf Jahren.

Für wettbewerbsfähige Digitalprodukte braucht es einen abgestimmten Mix aus UX-Analysten und Strategen, Konzeptern, Informationsarchitekten, Interface Designern und Grafikern, SEO-Experten, UX-Writern sowie Experten des Online-Marketings für Performance-Marketing sowie Analytics- und z. B. A/B-Testkompetenz.

Der UX-Architekt konzipiert und orchestriert den Agentur-Bereich auf Augenhöhe mit dem Softwarearchitekten

Beide erwecken gemeinsam mit dem Product Owner das Produkt zum Leben und sorgen für eine hohe Ergebnisqualität. Als schlagfertiges Trio schaffen sie herausragende Applikationen.

4. Transparenz durch Spezifikation und saubere Hand Offs sowie den Living Styleguide

Viele verschiedene Abstufungen der gleichen Farbe, eine Vielzahl irgendwie ähnlicher aber unterschiedlich programmierter Buttons oder Inkonsistenzen im Gestaltungsraster – solche und ähnliche Klischeefehler bilden die Spitze des Eisbergs bei fehlender Dokumentation. Bei genauerem Hinsehen findet man häufig einen kompletten Wildwuchs im UI-Design, vor allem bei über Jahre gewachsenen Applikationen. Diese Fehler können vermieden werden!

Um immer komplexeren Produkten mit Innovationsanspruch gerecht zu werden, gilt es, die Basics, UI-Elemente und Template-Typen eines Projekts effizient und nachhaltig abzubilden. Nicht nur für Konzerne, sondern gerade für Unternehmen des Mittelstands mit zwei Agenturen oder verteilten Dienstleistern oder nicht zuletzt Offshore-Entwicklungsleistungen ist es deshalb elementar, eine saubere und fortlaufend aktuelle, zentral abgelegte Projektdokumentation aufzusetzen. Diese muss jedoch nicht nur Architekturkonzepte oder Coding Guidelines enthalten, sondern um eine detaillierte UX-Dokumentation ergänzt werden.

Der Begriff des Styleguides, früher noch in Powerpoints oder PDFs vergraben, ist in diesem Zusammenhang längst überholt. Interface-Designs als statische Screens dürfen heute kein alleiniges Übergabeformat von Designern an Entwickler mehr sein. UI Libraries, Design-Ökosysteme und Living Styleguides zeigen auf, dass die Übergabe eines Interface-Designers heute keinesfalls mehr in JPGs, Photoshop-Dateien oder rudimentär spezifizierten JIRA-Tickets erfolgen darf. Der Anspruch an eine saubere Spezifikation beinhaltet neben dem reinen Visual Design zu Farben, Schriften und Abständen auch Informationen zur Informationsarchitektur, dem Interaktionsdesign und der Tastaturbedienung oder eine Beschreibung des responsiven Verhaltens. Dieser Anspruch kann aber auch bis in den Bereich der Aufgabenallokation erweitert werden. Denn über die Laufzeit eines Projektes entstehen oft zusätzlich unnötige Kosten durch längeres Onboarding von neuen Designern oder Entwicklern. Zudem werden Komponenten häufig mehrfach programmiert, weil eine intuitive Übersicht über das Inventar fehlt.

Kein Digital-Design-Projekt ohne Living Styleguide.

Im Jahr 2020 müssen Living Styleguides oder zentrale Markendesign-Plattformen der Single Source of Truth für die Ausgestaltung von Digitalsystemen sein.
Es bedarf einer zentralen Plattform, auf der von High Level Guidelines der Markenführung bis hin zum kleinsten Formularelement oder Teaser alle nötigen Informationen für das komplette Team verfügbar sind. Mit Guidelines, Best Practices, Spezifikationen sowie Vorlagen für Design und Entwicklung. Diese Plattform muss von Konzeptern, Designern, Frontend-Entwicklern und Backend-Entwicklern/Integrationen gleichermaßen genutzt werden.

Vor diesem Hintergrund können auf Klick explorierbare Screendesign-Exporte aus Design-Tools wie Sketch via Measure-Plugin oder UX Pin Styleguide-Funktion, online geshared via Avocode oder Zeplin zwar als Best Practice betrachtet werden [1]. Doch auch hier fehlen ergänzende Informationen. Und da Änderungen häufig eher kurzfristig direkt im Code stattfinden, werden solche Exporte aus dem Design-Tool mittelfristig nicht mehr den aktuellen Stand der Entwicklung abbilden können. Von einem Wechsel des genutzten Tools einmal ganz abgesehen. Das Problem: Design-Dokumentation und Livesystem driften auseinander und in wenigen Monaten weiß gerade in verteilten Teams oder bei wechselnden Mitarbeitern keiner mehr, welcher Abstand oder welche Farbzuweisung eigentlich gewünscht war. Designkonsistenz und Qualität leiden.

Screen Designs als Briefing, schriftliche Spezifikation sowie Code-Beispiele der Frontend-Entwicklung müssen an einer gemeinsamen Stelle zusammenfinden. Angesichts der Vielfalt von Touchpoints und Technologien sollten UI-Elemente stets in Plain-HTML entwickelt und dann für die unterschiedlichen Zielsysteme adaptiert werden. So können Entwicklungsleistungen zentral gesammelt und als Best Practices weiteren Projekten und Touchpoints eines Unternehmens oder einer Marke zugänglich gemacht werden.

Das Rad (teilweise) neu erfinden

Wir haben viele Tools am Markt nach Stärken und Schwächen im Design Operations Workflow und der Nachnutzbarkeit für Entwicklungsprojekte bewertet. Für unsere Prozesse im Agenturgeschäft haben wir uns ein eigenes Living Styleguide Framework geschaffen. Darin enthalten:

  • Ein Content-Management-System und individuelle Elemente zur effizienten Dokumentation von Styleguides durch zentrale Design Tokens für Marketing und Designer.
  • Eine Schnittstelle zu einem Git Repository zur Integration von Code-Beispielen als Living Examples für die Frontend-Entwickler. Mit Build-Prozessen zur Übersetzung von Code-Komponenten in technologiespezifische Templates z. B. für TYPO3 oder Frameworks wie React.

Wichtig sind zudem Versionierbarkeit, übereinstimmende Feature Branches für Design-Dokumentation und Entwicklung, Kollaborationsmöglichkeiten durch Kommentare und Freigabeprozesse sowie Mehrsprachigkeit und eine starke Suche. Das Living Styleguide Framework ermöglicht uns darüber hinaus durch Vererbungslogik ein effizientes Theming für verschiedene Kampagnen und Subbrands unserer Kunden.

Design Operations als strategisches Bindeglied

Es reicht nicht mehr länger aus, dass Kreativteams ihre Prozesse und Tools losgelöst von den Prozessen und Entwicklungsumgebungen der Softwarearchitekten und Frontend-Entwickler betrachten und modernisieren. Es bedarf einer durchgängigen Methodik sowie eines Workflows auf gemeinsamen Systemen. Design Operations ist zusammen mit DevOps der nächste große Schritt, um Softwareentwicklung noch effizienter zu gestalten und zukunftsfähig zu halten. UX-Architekten und Softwareentwickler sind nicht länger in geteilten Teams zu Hause, sondern arbeiten Hand in Hand. Die digitale Transformation wird das Zusammenarbeitsmodell der Disziplinen weiter verschmelzen lassen.

Autorin

Kathrin Friedrich

Kathrin Friedrich ist User-Experience-Expertin bei T-Systems Multimedia Solutions, einem der führenden Full-Service-Dienstleister für Digitale Transformation.
>> Weiterlesen
Das könnte Sie auch interessieren
botMessage_toctoc_comments_9210