„DesignOps“ ist ein dehnbares Konzept, das sich an den Umfang und die Größe eines Unternehmens anpassen kann, aber sein Hauptziel ist die Verbesserung der Teamarbeit zwischen Designern und Entwicklern, unabhängig davon, ob sie innerhalb derselben Agentur oder im Tandem mit den Mitarbeitern eines Kunden arbeiten. Es handelt sich weniger um eine strenge Methodik als vielmehr um eine agile Denkweise für interdisziplinäre Zusammenarbeit, Arbeitsabläufe und Qualitätsmaximierung. STRG und seine Kunden profitieren von DesignOps dadurch, dass potenzielle Hindernisse vermieden, Abhängigkeiten erkannt, die Projektkosten im Rahmen der Erwartungen gehalten und die Gesamtqualität des Endbenutzererlebnisses messbar verbessert werden.
Gemeinsam mit dem Art Director von STRG, Pavel Guzenko, und dem Lead Developer, Ralf Traunsteiner, sprechen wir darüber, wie STRG DesignOps praktiziert, welche Software-Tools dies möglich machen und wie agile Prozesse das Ganze so effizient wie möglich machen.
Vor langer Zeit, in einem weit, weit entfernten Web-Universum...
… konnte ein Designer ein paar grafische Modelle für eine Website entwerfen, sie dem Kunden vorschlagen und sie an den Entwickler weitergeben, der den Code schrieb und alle Details mit dem Kunden ausbügelte. Fertig!! Weiter zum nächsten Projekt. Oft funktionierte ein solcher designorientierter „Wasserfall“-Ansatz gut genug, und der Designer benötigte wenig bis gar keine technischen Kenntnisse. Mit dem technologischen Fortschritt wurde es jedoch immer schwieriger, die Absichten des Designers mit dem in Einklang zu bringen, was die Entwickler für machbar und bezahlbar hielten.
Das digitale Umfeld von heute stellt viel höhere Anforderungen an einen Designer. Zum Beispiel gibt es so viele Variablen beim responsiven Webdesign: Bildschirmgröße, Seitenausrichtung, Endbenutzergerät, mobiler vs. Desktop-Modus, Browser vs. App-Ansicht, Betriebssysteme, etc. Es gibt keine Möglichkeit, mit ein paar Skizzen alle möglichen Zustände und dynamischen Ausgaben zu erfassen, die die Benutzer erleben könnten. Die heutigen Herausgeber digitaler Inhalte verlangen maximale Flexibilität, eine benutzerspezifische (und dennoch kohärente) Benutzeroberfläche und eine nahtlose UX.
Überlappende Rollenaufgaben
Mehr als je zuvor muss der Designer während des gesamten Konzeptions- und Entwicklungsprozesses in ständiger Abstimmung mit den Backend-Entwicklern, Produktmanagern und Kunden sein, während er alle Iterationen der Komponentenfunktionen einer Website durcharbeitet. Ebenso müssen die Entwickler einbezogen werden, noch bevor der Designer ein Mock-up entwirft, um das Kosten-Nutzen-Verhältnis oder die Machbarkeit einer Komponente oder Funktion zu beurteilen.
Da die traditionell getrennten Rollen von Designern und Entwicklern zunehmend ineinander fließen, erkannten wir, dass die Komplexität des modernen digitalen Designs eine völlig andere organisatorische Denkweise erfordert. Wir haben nicht nur Designer eingestellt, die mit der technischen Entwicklung vertraut sind, und Ingenieure, die die Bedeutung des UI- und UX-Designs verstehen, sondern wir haben auch betriebliche Strukturen geschaffen, die die besten Arbeitsabläufe, Tools und Kommunikationskanäle bereitstellen, die es allen ermöglichen, zusammenzuarbeiten, eine bessere Designqualität zu schaffen und die Bedürfnisse und das Budget des Kunden zu erfüllen.
Eine neue Art der Zusammenarbeit
Sobald der Plan vorliegt, können „Wireframes“ und „Wireflows“ (ein skelettartiger Entwurf, der die grundlegenden Funktionen und Benutzerinteraktionen vermittelt) für das Produkt erstellt werden, um festzustellen, welche Funktionen gewünscht sind. „Wir machen das Wireframe so einfach wie möglich, ohne jegliche Verschönerung, fast wie mit einem Bleistift oder Sharpie gezeichnet, und zeigen nur die Inhaltsbereiche, Benutzereingaben und -ausgaben“, räumt Guzenko ein. In der Tat werden Software-Tools wie Balsamiq verwendet, die handgezeichnete Wireframes emulieren.
Danach folgt eine Analysephase, in der Backend- und Frontend-Aufgaben vom Design entkoppelt werden. „Wir machen eine technische Überprüfung des Inhalts“, sagt Traunsteiner. „Verfügen wir über die technischen Mittel und Datensätze, die für die Erstellung erforderlich sind? Sobald wir einige grobe Kostenschätzungen vornehmen können, kann das Frontend-Design in die Mock-up-Phase übergehen und die User-Journey und UX-Flows definieren.“
Hilfreiche Werkzeuge für die Zusammenarbeit
Bevor mit der Entwicklung und Implementierung begonnen werden kann, findet ein weiterer Überprüfungszyklus statt, um sicherzustellen, dass Designer und Entwickler auf derselben Seite stehen. Hilfreich ist hier der Einsatz einer kollaborativen Design-Software wie Figma oder Miro, die es dem Entwickler ermöglicht, die Designvorgaben zu erkennen und die für die Erstellung des Frontends erforderlichen Assets zu analysieren. „Das UI-Design wird während der Überprüfungszyklen kontinuierlich verbessert“, meint Traunstein, „sogar während der Implementierung, wenn Probleme mit fehlenden Komponentendetails gelöst werden.“
Moderne reaktive Frameworks wie Vue order React implementieren Komponenten in Storybook, und helfen Designern und Entwicklern, die Entwicklungs- und Überprüfungszyklen zu straffen, indem sie gemeinsam an einzelnen Komponentendetails arbeiten und deren Auswirkungen auf das Frontend in Echtzeit sehen können. „Letztendlich verbessert dies die Qualität erheblich und verhindert, dass später Probleme auftauchen, besonders wenn wir mit den Entwicklern und Designern des Kunden zusammenarbeiten“, sagt Traunsteiner.
Guzenko stimmt dem zu: „Eine der größten Herausforderungen für Designer ist die Darstellung der dynamischen Natur der meisten Inhalte. Oft prüft ein Entwickler ein statisches Design und fragt mich: ‘Was ist, wenn die Überschrift länger ist?’ oder ‘Was ist, wenn kein Aufmacherbild angezeigt werden soll? Ein Designer kann nicht alle möglichen Szenarien aufzeigen, aber die kollaborativen Software-Tools, die wir als Teil unseres zyklischen Überprüfungsprozesses verwenden, ermöglichen es uns, zu testen und zu iterieren, wann immer eine solche Frage auftaucht.“
Traunsteiner fügt hinzu: „Mit Storybook können wir eine Komponente isolieren und mit Dummy-Daten und Platzhalterbildern manipulieren, um alle Layout-Varianten zu prüfen, Eigenschaften und Stile auf einem gemeinsamen Bildschirm zu ändern, so dass ein Entwickler und ein Designer – ebenso wie der Kunde – Änderungen sofort besprechen und in der Vorschau anzeigen können, wie die Komponente bei mehreren Mietern funktionieren wird.“
Add Your Heading Text Here
Tools wie Figma und Storybook rationalisieren den DesignOps-Prozess, indem sie den Dialog erleichtern und die Assets während des gesamten Entwicklungs- und Implementierungszyklus verwalten. Noch wichtiger ist es jedoch, eine DesignOps-Mentalität zu entwickeln. Als agiles Unternehmen verfügt die STRG über die notwendige operative Infrastruktur für DesignOps. „DesignOps ist tief in unsere Scrum/Agile-Workflows integriert“, sagt Traunsteiner. „Vom Konzept über die Entwicklung bis hin zum fertigen Produkt durchlaufen wir Reviews und Iterationen auf agile Art und Weise.“ Diese Arbeitsabläufe können je nach den eigenen Kapazitäten des Kunden skaliert werden (d.h. ob er seine eigenen Designer und/oder Entwickler an dem Produkt arbeiten lässt).
Traunsteiner verweist auf die Zusammenarbeit der STRG mit dem ÖGB oder den Salzburger Nachrichten, „wo wir die Natives in unsere agilen Workflows integrieren, so dass spezifische Rollen definiert werden können. Egal, ob ein Kunde möchte, dass wir alle schweren Arbeiten übernehmen, oder ob er seine eigenen Mitarbeiter mit der Arbeit an dem Produkt beauftragt, wir können unsere agile Workflow-Struktur entsprechend anpassen. STRG ist zwar eine Agentur, aber wir arbeiten immer mit einem Kunden zusammen und integrieren ihn in den DesignOps-Prozess.“
Traunsteiner fügte hinzu: „Wenn wir agil zusammenarbeiten und Iterationen durchlaufen, bauen wir das Produkt von Grund auf auf und fügen nach und nach Funktionen hinzu, ändern den Umfang und stellen fest, dass einige Dinge im ursprünglichen Plan wichtiger sind als andere. In diesem Prozess kann ein Kunde besser verstehen, was die Kernwerte sind und wie er sich auf die beste UX konzentrieren kann.“
Zusätzliche Quellen:
- Call STRG's CEO Jürgen, or write a mail juergen.schmidt@strg.at Mobile: +43 699 1 7777 165
