Designmanagement in der Praxis

Tradition trifft Moderne: Seit den ers­­ten permanenten amtlichen Postver­bin­­dun­­­­gen im 17. Jahrhundert bis zu autonom fahrenden SmartShuttels im 21. Jahrhundert hat sich die Schweizerische Post zu ei­nem Bestandteil eidgenössischer Identität entwickelt und war als solche nie um eine In­no­va­tion verlegen. Ganz im Gegen­teil: Hier, wo Tim Berners-Lee und Robert Cail­liau am Cern in Genf Ende der 1980er Jahre das World Wide Web be­­grün­de­ten, spie­len In­­­formations­techno­lo­gie und neue On­line­dienste eine entscheidende Rolle bei der Um­­setzung der neuen Markenstrategie der Schwei­­ze­rischen Post, denn künftig sol­len alle physischen Dienstleis­tun­gen lückenlos, individuell und an jedem erdenklichen di­gitalen Touchpoint abbild­bar und so weit wie möglich abwickelbar sein.

Doch noch 2019 lautete die ernüchtern­de Bestandsaufnahme in der Zentrale der Schweizerischen Post im Berner Wank­dorf­­City-Quartier: mangelnde Marken­kon­sis­tenz an den einzelnen Touchpoints, kei­ne einheitliche Brand Experience und deutlich zu hohe Kosten durch Reworks bei der Pro­­gram­mierung. Es fehlte ein konzern­weites Designmanagement, um für schlan­ke und fachbereichs­über­grei­fen­­de Pro­zesse bei der Entwicklung digitaler Projekte zu sorgen.

Die Anfänge: Vom statischen PDF zum Living Styleguide

Am Hauptsitz der Schweizerischen Post in Wankdorf befindet sich neben dem Brand­management und dem Visual Design seit sechs Jahren auch ein Team von User-Expe­rience-Experten. Zu Beginn arbeiteten sie noch mit statischen Styleguides im PDF-Format und stießen damit auf ein klassi­sches Problem: »Bei der Programmierung der Interfaces fühlte sich niemand wirklich verantwortlich für die Umsetzung unserer UX-Konzepte, und die Resultate ent­spra­chen nicht immer unseren Konzepten und den Qualitätsansprüchen«, sagt Leena Ma­ja­ranta, Leiterin User Experience Services bei der Schweizerischen Post.

Um Code und Design besser zu verzahnen, wechselte sie 2016 auf einen Styleguide mit HTML- und CSS-Informationen. »Damals kam Atomic Design auf und Frontify als passendes Tool, das Design und Code­komponenten zusammen­bringt. So lässt sich ganz genau das Verhalten aufzeigen, das man aus UX-Sicht erzielen möchte«, er­klärt Leena Majaranta. Beim Atomic-Design-Ansatz von Webdesigner Brad Frost lässt sich jede Website aus kleinsten Elementen – den namensgebenden Ato­men – zusammenset­zen. Diese Atome sind einzelne HTML-Ele­mente, beispielsweise ein Link oder ein Eingabefeld. Zu­sam­men mit anderen Elementen entstehen daraus nach und nach vollständige Anwendungen, die man schließlich nur noch mit Bildern und Texten befüllen muss. Mit Brand-Manage­ment-­Tools wie Frontify lassen sich die da­zu notwendigen Living Sty­leguides, Media Libraries und Pattern Libraries außerdem an einem Ort vorhalten.

2018 dann entschied sich die IT in Zol­li­kofen für eine neue Technologielösung, um bei der Webentwicklung zügigere und bessere Ergebnisse zu erzielen. Die Wahl fiel auf das JavaScript-Framework Angular. Die damalige Full-Stack-Entwicklerin und heutige Lead-User-Interface-Developerin Carla Hofer sah darin die Chance, für ein einheitliches Aussehen der verschiede­nen Front­ends zu sor­gen: »Anstatt immer alles neu zu program­mieren, wollten wir in der IT zumindest ein konzernübergreifendes CSS-Styling-Paket bieten, um ein rundum konsis­tentes Aussehen der Applikationen im Front­end zu gewährleisten.«

Im selben Jahr holte sich das Brandmanagement der Post CH AG einen Fachspezialisten für digitale Markenführung mit an Bord, der für einen einheitlichen digita­len Auftritt der Schweizerischen Post sorgen sollte. Der neue Brand Art Director Digital Andreas Badstöber strebte vom ers­­ten Tag an einen engen Schulterschluss von Brand und User Experience an. »Weil ich in meiner vorherigen Position vier Jahre lang aus der UX-Abteilung heraus für das Branding gearbeitet hatte, kannte ich bereits die üb­li­chen Hürden und wusste auch, dass man für ­digitale Projekte zudem immer die IT im Rücken haben muss«, erinnert sich Andreas Badstöber.

Startschuss: Mit Überzeugungskraft Vertrauen schaffen

Im August 2018 traf das Dreiergespann aus Brand, IT und UX der Schwei­ze­rischen Post zu einem Meeting in Wankdorf zusammen und beschloss, den ge­sam­ten Design­pro­zess von Grund auf neu zu gestalten. Zu diesem Zweck wol­lten sie mit dem sogenannten Common Web Front­end (kurz: CWF) eine Single Source of Truth aufsetzen: Mit Living Styleguides und einer eigenen Pattern-Bibliothek sollte das CWF die zukünf­tige Ent­wick­lung und Einhaltung der Sty­les er­leichtern. »Wir leg­ten fest, dass UX der Dreh- ­und Angelpunkt des Prozesses sein und dass die IT das geplante Pattern-System kontrollieren soll. Das Brandmanage­ment stellt die Qua­­lität des Ganzen sicher«, erklärt Andreas Badstöber. Das bedeutete auch: Alle an­de­­ren Abteilungen der Schwei­zerischen Post würden über kurz oder lang den neuen Pro­zess übernehmen müssen.

Aber noch war nicht klar, wie man genau vorgehen und das Projekt finanzieren wollte. Bei einem weiteren, größeren Mee­ting im September 2018 stellte das inter­dis­zi­plinäre Team sein Konzept den Füh­rungs­kräften der IT-Abteilungen und dem Brandmanagement der Post CH AG vor, um auch sie von der gemeinsamen Sache zu überzeugen. Eines der Hauptanliegen die­ses Meetings war es, neue Perspektiven zu er­öff­nen und die interdisziplinäre Zu­sam­men­arbeit als Ziel zu formulieren.

Damit diese fachübergreifende Team­ar­beit gelingen kann, muss es eine ver­nün­f­tige Grundlage für die Zusammenarbeit ge­ben. Im CWF-Team basiert das Er­folgs­ge­heimnis für kons­t­ruktive Meetings auf der Devise »Ehrlich statt Businessfreund­lich«. »Statt freund­lich waren wir vor al­lem offen zueinander und haben unsere ehr­liche Meinung geäußert. Dabei findet man dann häufig her­aus, dass man ähn­lich denkt, und kann das Projekt vernünftig voranbringen«, sagt Carla Hofer.

Als kleine Hürde im Vorfeld erwies sich der Fachjargon: »Wie erläutern wir unse­ren Plan? Wie erklärt man Laien den Atomic-Design-Ansatz und was ein Design­sys­­tem mit Components ist? Wir mussten lernen, alles so weit herunterzukochen, dass es je­der versteht«, sagt Leena Majaranta. Das gelang dem Team, denn Ho­fer, Majaranta und Badstöber mussten zwar noch einen Projektauftrag schreiben, aber das Budget bekamen sie zügig und hatten fort­an die Freiheit, den Prozess so zu entwickeln, wie sie es in den Fachbereichen für richtig hielten. »Ohne das vorgeschossene Vertrauen unserer Vorgesetzten und den Freiraum hätte das Projekt nie so gut funktioniert. Unser Team konnte das CWF genau so aufbauen, wie wir es uns vorgestellt hatten – ohne Wenn und Aber«, berichtet Andreas Badstöber.

Analyse: Wer macht was?

Dafür musste das Team zunächst die Prozesse sowie die Rollenverteilung in den Be­reichen UX, IT, Visual Design und Brand analysieren. »In langen Meetings haben wir uns sämtliche Aspekte angeschaut, die zu­sammen ein gelungenes User Interface ergeben, und wer dabei für was verantwortlich ist«, so Carla Hofer.

Um zu ermitteln, wer wie an welchen Projekten arbeitet, hörte sich Andreas Bad­­stöber zunächst intensiv bei der Schweize­rischen Post um und führte zahlreiche Interviews: »In einem so großen Unternehmen muss man sich zuerst einen Überblick verschaffen. Ich wollte wissen, wie die diversen Teams in den Projekten und da­rü­ber­hinaus zusammenarbeiten, wie sie dabei vorhandene Tools und die Styleguides verwenden und wie das in den einzelnen Prozessen genau aussieht.« Es stellte sich heraus, dass jede Abteilung mehr oder we­­niger ihre eigenen Abläufe – mitunter sogar eigene Personas! – besaß, die kaum auf die der anderen Bereiche abgestimmt waren (siehe »Research-Prozess«).

In der Praxis führte das dazu, dass die ge­testeten und validierten UX-Konzepte sowie das visuelle Design aus der Markenfüh­rung im Endergebnis noch immer zu oft von den Vorgaben abwichen. Die umfangreiche Analyse der Tätigkeiten ergab, dass die Rolle eines User Interface Deve­lo­pers im Unternehmen bislang noch nicht de­finiert war:

»Als Post haben wir eine große IT und eher viele gute Entwickler mit ausgezeichneten Skills in ihren Fachgebieten, aber es fehlte an dem speziellen Skill-Set UI Development«

sagt Leena Majaranta. Und so durfte das Team in der IT zunächst einen, mittlerweile sogar zwei UI-Developer einstellen, die sich gemeinsam um die Program­­mie­­rung von neuen Komponenten und Pat­terns sowie um die Pflege des Common Web Frontends kümmern.

Ergebnis: Neuer Designprozess und das Common Web Frontend

Als zentrale Abteilung des gesamten CWF-­Prozesses ist die UX meist von Anfang bis Ende an der Entwicklung beteiligt: »Das ist bei mehr als 350 digitalen Projekten im Jahr un­bedingt sinnvoll, denn so können Bran­ding, UI Development und Visual Design sicher sein, dass sie rechtzeitig ins Projekt involviert werden, müssen aber nicht stän­­dig dabei sein«, so Andreas Badstöber. Die UX-Abteilung leitet also den Prozess und holt je nach Phase die richtigen Leute dazu.

»Das Spezielle am CWF liegt nicht in der Single Source of Truth oder in den Code-Snippets. Was das CWF wirklich auszeichnet, ist der fachübergreifende Prozess, den wir zusammen entwickelt haben«

Andreas Badstöber, Brand Art Director Digital, Schweizerische Post

Jedes digitale Projekt beginnt zunächst mit der Fra­ge, welchen Zweck es erfüllen soll und wie es sich am besten auf die User­bedürfnisse zuschneiden lässt. Dazu be­trei­ben die UX-Experten Nutzerforschung, kon­­kretisieren die Useranforderungen und er­stellen Prototypen, die sie dann mit echten Nutzern systematisch tes­ten und eva­lu­­ie­ren. Die Erkenntnisse fließen anschlie­ßend in das UX-Konzept ein. Als Nächstes prüfen User Experience und Markenführung, ob sich das Projekt mit vorhande­nen Patterns der Post CH AG abwickeln lässt oder ob sie einen UI Developer be­auf­tra­gen müssen, der schnell ein pas­sen­des Frontend realisiert. Letzteres sei meis­tens der Fall, meint Carla Hofer: »Im nächsten Schritt setzen UI-Developer, UX-Konzepter und Visual Designer direkt einen HTML-­Proto­typ auf, den sie dann ge­mein­sam ite­­rie­­­ren.« Weil man im Code keine ­sta­ti­schen Layout­vorlagen benötigt, über­nimmt der Visual Designer in dieser neuen Konstella­tion die Rolle des Art Directors und vermei­det so Mehrfacharbeit.

Diese so erstellten HTML-Dummys haben außerdem noch den Vorteil, dass man bereits sämtliche Funktionsweisen und das Verhal­ten der Elemente auf den ver­schie­de­nen Endgeräten im normalen Browser verfolgen und schnell anpassen kann. »Das Bes­te ist, dass sich der fertige Code einfach ins Projekt einbinden lässt und damit die Anwendung bereits komplett steht«, erklärt Carla Hofer. Schon mehr als hundert Projekte hat das Team bei der Schweizerischen Post in dem neuen Prozess um­gesetzt, darunter eine neue App für die Sen­dungs­vor­an­kün­digung, mit der Kunden Paket­aus­lie­ferungen steuern können, so­wie die De­­mo-App der IT-Abteilung, die den Entwick­lern seither als Dokumentation des Common Web Front­ends dient.

Implementierung: Demo-App und Roadshow

In ihrer Demo-App erarbeiten die UI-Developer alle Komponenten und stellen sie auf jeweils einer eigenen Unterseite mit den zugehörigen Codeschnipseln vor.

»Die Ent­wickler sind grundsätzlich froh, wenn sie sich keine Sorgen um das Styling eines But­tons machen müssen, sondern sich das fer­tige Element als Code Snippet einfach in ihre Applikation kopieren können«

so Carla Hofer. Die Demo-App erspart ihnen die langwierige Suche nach dem richtigen Code im umfangreichen Styleguide.

Den CSS- und JavaScript-Code des CWF können die Entwickler ganz einfach als Sty­­ling-Paket installieren, sodass es in jedem Webprojekt bereits vorgeladen ist. Diese Vor­lagen zeigen den Developern dann bei­­spielsweise alle Zustände, die ein Button haben kann, sowie mögliche Hintergründe und Animationen. Ist das Styling-Paket einmal installiert, genügt also Copy-and-paste von HTML. Verantwortlich für die Pflege der Demo-App sind alle UI-­De­ve­loper gemeinsam. »Die Demo-App ist eine Ressource für Entwickler, die genau wissen, was sie brauchen, weil sie sich zusam­men mit den UX-Konzeptern und Visu­al-Designern das Konzept angeschaut haben und es nur noch entsprechend um­set­zen müssen«, erklärt der neue User Interface Developer Philipp Gfeller.

Noch sind das CWF und die Demo-App nicht offiziell ausgerollt, da letzte Optimie­rungen an den Styling-Paketen notwendig sind. Dennoch können Developer bereits jetzt damit arbeiten, und das Team plant für das erste Quartal 2021 eine Roadshow durch sämtliche relevanten Abteilun­gen der Schwei­zerischen Post. »Damit alle betroffenen Mitarbeiter den neuen Design­prozess verstehen und davon Gebrauch machen, werden wir die Fachteams besuchen und nach Ansprechpartnern Ausschau hal­ten, ausgerüstet mit illustrativen A1-Pos­tern, die den neuen CWF-Prozess erklären«, so Andreas Badstöber.

An den Standorten Wankdorf, Zollikofen und Bellinzona – wo alles begann – hängen die Poster schon, sodass sich die Kollegen dem neuen Prozess langsam annähern können. Das Team ist überzeugt davon, dass dieser schon jetzt den Entwicklungsprozess an vielen Stellen verkürzt und dass die Schweizerische Post dadurch auch schnel­ler und kostengünstiger neue digitale Projekte umsetzt – und das mit einer einheitlichen Brand Experience an allen Touchpoints.

Research-Prozess

Design Doing – Design Thinking – Design Being

Bevor er daranging, einen neuen Designprozess für die Schweizerische Post zu entwerfen, musste sich Brand Art Director Digital Andreas Badstöber zunächst einen genauen Eindruck von der Lage im Konzern verschaffen. Also führte er zahlreiche Interviews und versuchte die bisherigen Gestaltungsprozesse zu verstehen. Zudem führte er bei seinen Recherchen mehrere sogenannte Design-Maturity-Tests durch, um zu erfahren, wie die Mitarbeitenden den Stand von Design im Unternehmen wahrnehmen. Dazu teilte er alle Designaktivitäten der Schweizerischen Post nach einem Modell des Designforschers Jan-Erik Baars in die Kategorien »Design Doing«, »Design Thinking«und »Design Being« auf und wertete die Interviews danach aus:

Während es beim Design Doing und Design Being schon gut aussah, fehlte es noch am gemeinsamen Design Thinking, auf das sich verschiedene Personen aus unterschiedlichsten Bereichen einigen müssen. So schlüpfte Badstöber während des Prozesses aus seiner Rolle des Designers mehr und mehr in die eines Beraters und Diplomaten, der zwischen den Abteilungen vermittelt und sich Mitstreiter sucht, um Silos aufzubrechen. »Wenn so ein Projekt die Aufgabe einer einzelnen Person wäre, dann wäre es ganz sicher zum Scheitern verurteilt«, so Andreas Badstöber. Aber der Designer traf mit seinen Plänen bei der Schweizerischen Post stets auf Gehör und konnte das Projekt mit dem CWF-Team entsprechend schnell und problemlos vorantreiben.

So läuft der CWF-Prozess ab

Jeder Common-Web-Frontend-Prozess startet mit einem Project Request. Wird die Prozessanfrage angenommen, setzen sich UX Design, Brand­management und Visual Design zusam­men, um mit verschiedenen Tools ein UX-Konzept zu erarbeiten und es so lange zu iterieren, bis es umsetzungsfähig ist. Danach folgt der Pattern-Check: Liegen die nötigen Komponenten im CWF vor, geht das Konzept in die IT. Dort erstellt das Scrum-Team aus den Patterns ein neues Interface. Das UX-Team ist involviert und verant­wortet den Austausch zwischen Brandmanagement, Visual Design und UI-Entwicklung. Zum Schluss aktua­lisieren die Programmierer, wenn nötig, das CWF und veröffentlichen die Applikation.