Mitarbeiterservice Bayern – Barrierefreies Design System & UX/UI Design

Die FinanzIT BAYERN betreibt ein umfangreiches Online-Portal zur Abwicklung interner Prozesse. Wir haben dabei unterstützt, ein barrierefreies Design System aufzubauen und die verschiedenen Dienste mit optimiertem UX/UI zu relaunchen.

Leistungen

Projektzeitraum

September 2021 – heute

Unsere Aufgabe

Die FinanzIT BAYERN beim Landesamt für Finanzen suchte Unterstützung bei der Überarbeitung des Mitarbeiterservice Bayern und aller darin enthaltenen Anwendungen. Für ca. 300.000 registrierte Personen existieren Dienste zum Datenaustausch, zur Buchung, Genehmigung und Abrechnung von Reisen und zur Verwaltung von Bezügen und Beihilfe. Unterstützung wurde insbesondere in den Bereichen Barrierefreiheit und Design Systeme, Usability und UX gesucht.

In enger Abstimmung mit Personen aus dem UX Design und der Frontend-bzw. Angular-Entwicklung sollte ein komponentenbasiertes UI-Kit erstellt werden. In Form von Prototypen sollten die einzelnen Dienste überarbeitet, getestet und an die Entwicklung übergeben werden.

Drei verschiedene Darstellungen einer mobilen Benutzeroberfläche für den “Mitarbeiterservice Bayern”. Die erste Ansicht zeigt eine Liste von Dokumenten mit Datum und Titel, die ausgewählt werden können. Die zweite Ansicht zeigt eine Filterfunktion mit Dropdown-Listen und Schaltflächen zum Löschen und Filtern. Die dritte Ansicht zeigt ein Navigationsmenü mit verschiedenen Punkten und einer Dropdown-Liste für Rollen und Berechtigungen. Die Designs variieren in der Hintergrundfarbe, wobei die mittlere Ansicht einen dunklen Modus zeigt.

Ausgangssituation und Projekt-Roadmap

Zum Zeitpunkt des Projektbeginns existierten bereits alle Dienste in einer technischen und gestalterischen Version 1. Gestaltung und Code waren uneinheitlich und Anforderungen bzw. Best Practises im Bereich der Usability oder Barrierefreiheit nicht optimal erfüllt. Alle Dienste sollten ein konsistentes und modernes Erscheinungsbild und optimierte UX erhalten.

Kurzfristig sollte eine bereits begonnene UI-Bibliothek auf Basis von Adobe XD fertiggestellt werden. Mittelfristig sollten alle Dienste im einheitlichen Look überarbeitet werden. Langfristig soll eine aus der UI Bibliothek abgeleitete Code-Bibliothek erstellt werden.

Zwei Ansichten aus Version 1 der Dienste. Deutlich erkennbar sind die großen gestalterischen Inkonsistenzen.

Tech Stack und Design/Dev-Workflow

Für ein persönliches Kennenlernen zwischen Jonas Hellwig und dem MSB-Projekt-Team fanden Workshops in Regensburg statt. Hier wurden u.a. die System-Architektur und der Design/Dev-Workflow besprochen.

Die Dienste basierten auf verschiedenen Technologien und Konzepten. Der sog. Portalrahmen nutzte beispielsweise ein klassisches CMS sowie ein Bootstrap-Frontend. Die einzelnen Dienste basierten überwiegend auf Angular mit einem Frontend auf Basis von Material UI.

Diagramm zeigt den Workflow von Funktionalität über Benutzeroberfläche und Designvorgaben bis zum Produkt. Die erste Zeile zeigt “Redaxo CMS” als Funktionalität, die zu “Bootstrap UI” als Benutzeroberfläche und schließlich zum “Styleguide” führt, der das Produkt “Portalrahmen” ergibt. Die nächsten drei Zeilen zeigen jeweils “Angular JS” als Funktionalität, die zu “Material UI” als Benutzeroberfläche führt, dann zum “Styleguide” und schließlich zu den Produkten “Dienst 2” und “Dienst 3”. — Workflow zum Projektstart mit redundanten Ergebnissen und Abhängigkeiten von UI Frameworks

Naturgemäß ergeben sich dadurch technische und gestalterische Abhängigkeiten. Wir haben dem Team vorgestellt, wie wir uns den zukünftigen Design/Dev-Workflow vorstellen. Ziel war ein Design System, indem das ursprüngliche UI-Kit nur einen Bestandteil ausmachte.

Diagramm zeigt den verbesserten Workflow von Funktionalität über das MSB Design System bis zum Produkt. Die erste Zeile zeigt “Redaxo CMS” als Funktionalität, die über das MSB Design System zum Produkt “Portalrahmen” führt. Das MSB Design System enthält Elemente wie “Design Tokens”, “UI Kit”, “Component Library”, “Flows”, “a11y” (Accessibility) und “RWD” (Responsive Web Design). Die nächsten drei Zeilen zeigen jeweils “Angular JS” als Funktionalität, die über das MSB Design System zu den Produkten “Dienst 1”, “Dienst 2” und “Dienst 3” führen. — Angestrebter Workflow mit einem einheitlichen Design System – basierend auf Styles, UI-Kit und Code Component Library – für alle Dienste

Inventur, Konsistenz und eine neue Design Systematik

In enger Zusammenarbeit mit der internen UX-Abteilung der Finanz IT Bayern, haben wir zunächst alle Dienste ausführlich gesichtet und eine Inventur der UI Komponenten durchgeführt. Wir konnten so Muster erkennen und unsere Arbeit priorisieren. Anschließend haben wir eine übergreifende Design-Systematik mit Design Tokens, Basis-Layouts und dem responsiven Verhalten des Portalrahmens erstellt.

Wir haben die bestehende Farbpalette barrierefrei überarbeitet und aufgeräumt. Auch haben wir eine Spacing- und Typo-Hierarchie eingeführt und Elevation-Tokens definiert. Da Adobe XD als Design-Tool nicht alle Systematiken sinnvoll abbilden konnte, haben wir in Ergänzung HTML/CSS-Demos gebaut und dort u.a. CSS Variablen dokumentiert.

Das Bild zeigt verschiedene Design-Token-Beispiele für ein Design-System.Oben links ist eine Farbpalette auf weißem Hintergrund dargestellt, die Farben in verschiedenen Sättigungsgraden und Transparenzstufen zeigt. Oben rechts ist die gleiche Farbpalette auf schwarzem Hintergrund zu sehen.Unten links sind verschiedene Kreise in unterschiedlichen Zuständen und Verwendungen dargestellt, wie “clickable”, “non-modal”, “sticky” und “modal” in den Zuständen “Default” und “:hover”.Unten rechts sind verschiedene Größen von Quadraten dargestellt, die von XXS bis XXL reichen, um unterschiedliche Größenstufen zu veranschaulichen. — Einige grundlegende Style-Definitionen, dokumentiert als sog. Design Tokens

UI-Bibliothek auf Basis von Adobe XD

Nachdem das Basis-Layout abgestimmt war, haben wir begonnen, alle Komponenten und States festzulegen. Jede Komponente wurde Mobile First und barrierefrei gestaltet, mit den technische Vorgaben von Angular Material UI abgeglichen und nach Abstimmung mit dem Dev-Team in die Adobe XD-Bibliothek übernommen.

Verschiedene Darstellungen der Benutzeroberfläche des “Mitarbeiterservice Bayern” auf verschiedenen Bildschirmgrößen und in verschiedenen Layouts. Oben sind drei große Ansichten von Desktop-Layouts zu sehen, die eine Seitenleiste mit Navigation und ein Rasterlayout im Hauptbereich darstellen. Unten sind mehrere mobile und Tablet-Ansichten zu sehen, die die Navigationselemente und Kopfzeilen in verschiedenen Zuständen darstellen. Die mobilen Ansichten zeigen ein Dropdown-Menü für Dienste und Einstellungen, während die Desktop-Ansichten eine horizontale Navigation mit verschiedenen Registerkarten und Optionen anzeigen. — Responsives Verhalten der Komponenten – hier am Beispiel des gesamten Layouts, sowie der globalen Header-Komponente

Die verschiedenen Dienste haben wir mit Hilfe von Prototypen überarbeitet

Auf Grundlage der vorerst finalen XD-Bibliothek haben wir begonnen, die Dienste zu überarbeiten. Wir haben einzelne User-Flows identifiziert und mit Hilfe der Komponenten-Bibliothek neu konzipiert und aufgebaut. Häufig haben wir verschiedene Varianten erstellt, die dann getestet wurden. Alles entstand über einen Zeitraum von knapp zwei Jahren in wöchentlichen Remote-Workshops.

Ein Design-Tool, das die verschiedenen Bildschirme und Interaktionen eines Administrationsprozesses im Mitarbeiterservice Bayern darstellt. Mehrere Bildschirmansichten sind in einem Gitterlayout angeordnet, und blaue Pfeile zeigen die Navigationsflüsse zwischen den einzelnen Ansichten. Die dargestellten Prozesse beinhalten Genehmigungsrechte, Rechte übertragen, Max Anzahl überschritten und Person schon vorhanden. Jeder Prozess hat mehrere Schritte, die durch die verschiedenen Bildschirme und deren Verbindungen visualisiert werden. Rechts im Bild befindet sich ein Bedienfeld mit Interaktionseinstellungen. — Verschiedene mittels »Prototyping« erstellte User Flows im Kontext der Administration eines Dienstes

Migration der Library von XD zu Figma

Im Projektverlauf wurde immer offensichtlicher, dass XD als Tool perspektivisch nicht sinnvoll war. U.a. wurde XD nicht mehr weiterentwickelt und das Konkurrenz-Tool Figma launchte mit dem Dev Mode und Variablen mehrere Features, die für unser Projekt höchst interessant waren.

Auf unsere Empfehlung hin, haben wir das Design System als Figma-Library neu aufgebaut. Im Zuge dessen haben wir alle Design Tokens semantisch organisiert und den Dark Mode umgesetzt. Die Aufwände für die Neuerstellung der Bibliothek konnten daher mit neuen Features sinnvoll verbunden werden.

Semantischen Farben für ein Akkordeon-Element im Light- und Dark-Mode sowie eine globale Farbpalette. — Beispiel für die Abstraktion einer Farb-Palette auf semantische Variablen für Light Mode und Dark Mode – hier am Beispiel einer einfachen »Expansion Component«

Knapp 1000 Komponenten und Varianten, über 500 Variablen

Die Figma Library wurde sehr detailliert aufgebaut und getestet. Knapp 1000 Komponenten bzw. Varianten von Komponenten wurden gestaltet. Alles folgt dem Intrinsic Design- und Mobile First-Konzept und steht im Light und Dark Mode zur Verfügung. Alle Farben, Abstände und sonstige gestalterische Attribute wurden als Variablen definiert.

Ausgewählte Komponenten der Figma Library – links wird die jeweilige Komponente mit allen Varianten gestaltet, rechts werden Edge Cases in Light Mode und Dark Mode getestet

Die Figma-Library wird permanent weiterentwickelt

Auf Grundlage dieser UI Bibliothek wurden Finanz IT-intern alle Code-Komponenten entwickelt. Wir haben dazu den Figma Dev Mode genutzt und zusätzlich einige Workshops mit der Entwicklung durchgeführt, um die Prozesse zu optimieren.

Bei der weiteren Arbeit mit dem Design System fallen immer wieder Dinge auf, die bisher nicht bedacht waren, bzw. noch nicht aufgetreten sind. Wir führen die Änderungen jeweils in die Bibliothek zurück, aktualisieren und erweitern Komponenten oder Tokens und stimmen uns dazu über den Figma Dev Mode mit dem Development ab.

Verschiedene UI-Komponenten wie Buttons und Labels sind in mehreren Zeilen angeordnet. Die Abstände zwischen den Elementen sind in Pixeln und mit Bezeichnern wie “spacing/space-s”, “spacing/space-m”, “spacing/space-xs” und “spacing/space-xl” angegeben. Pfeile und Maße markieren die Abstände und Größen der einzelnen Komponenten im Layout. — Ansicht des Dev Modes von Figma mit eingeblendeten Spacing-Variablen

Die ersten Dienste sind online, die Arbeit geht weiter

Die ersten überarbeitete Dienste auf Basis der XD Bibliothek sind im November 2022 online gegangen. Version 1.0 der Figma Library haben wir im Sommer 2024 erreicht. Etwa zu diesem Zeitpunkt standen auch alle Komponenten im Code in Version 1. zur Verfügung.

Wir unterstützen weiterhin und sorgen dafür, dass die Finanz IT Bayern bald selbstständig und mit internen Ressourcen das Design System fortführen kann. Zur effizienten Zusammenarbeit werden u.a. Hotfix- und Feature-Branches in Figma genutzt und darauf aufbauend neue Versionen veröffentlicht.

Branch-Workflow für Versionsverwaltung in Figma. Oben im roten Bereich sind Hotfixes dargestellt. Im blauen Mittelbereich, der als “Main = Library” bezeichnet ist, beginnt der Workflow mit “Version 1”, die über automatische Speicherung zu “Version 1.0.1” führt, bevor sie mit “Version 2” endet. Im grünen unteren Bereich befinden sich Entwicklungs- und Feature-Branches, die in den Main-Branch integriert werden. — Gemeinsam erstelltes Workflow-Konzept für Branches in Figma

Und was sagt die Kundin?

Vielen Dank für die tolle Zusammenarbeit! Die Erstellung unseres Design Systems mithilfe von Adobe XD und die reibungslose Migration zu Figma verliefen optimal. Die Design-Komponenten-Bibliothek bildet eine perfekte Grundlage für zukünftige Entwicklungen und unsere neuen Projekte. Das äußerst strukturierte und effiziente Vorgehen hat nicht nur dazu beigetragen, dass wir uns bestens in die Materie eingearbeitet haben, sondern hat auch die Übernahme optimal vorbereitet und erleichtert – ganz abgesehen davon, dass es auch noch viel Spaß gemacht hat!

Als Behörde ist für uns besonders die gründliche und kontinuierliche Überprüfung im Hinblick auf Barrierefreiheit von großer Bedeutung. Auch in diesem Bereich erhielten wir stets optimale Beratung und viele wertvolle Tipps.

Wir freuen uns bereits auf die kommenden Projekte, die wir gemeinsam mit Jonas realisieren können.

November 2023, Beate Köferl, Landesamt für Finanzen – FinanzIT BAYERN