Ein neues Kapitel für unsere Governance Apps

In den letzten 5 Jahren hat sich unsere Plattform von einer kleinen Sammlung an Governance Tools zu einer Suite von Anwendungen entwickelt, die mehrere Bereiche des Microsoft 365 Ecosystems unterstützen. Unsere Produkte haben funktioniert und unsere Kunden waren begeistert, aber mit dem Wachstum unseres Portfolios wurde eines immer klarer: Neue Features allein voranzutreiben reicht nicht mehr aus.

Als SaaS Unternehmen wissen wir, dass nachhaltige Produktgeschwindigkeit, UI Konsistenz und userzentriertes Design grundlegende Voraussetzungen für Skalierbarkeit sind. Schnelle Iterationszyklen, planbare Releases und eine konsistente User Experience beeinflussen direkt die Kundenzufriedenheit, operative Effizienz und langfristige Wartbarkeit.

Diese Herausforderung geht weit über ein einfaches Redesign hinaus. Es ist ein grundlegender Wandel darin, wie sich unsere Plattformen anfühlen, verhalten und skalieren.

Begeistert? Wir sind es auf jeden Fall.

Der Bedarf an einem internen Design System

Ein Design System ist eine gemeinsame Sammlung von Regeln, Komponenten und Richtlinien, die definieren wie ein Produkt aussieht und sich verhält. Es umfasst wiederverwendbare Elemente, wie Buttons, Formulare, Farben, Typografie und Layouts, die von Designern und Entwicklern als Bausteine genutzt werden, um Apps und Websites konsistent zu erstellen.

Wenn man etwas wie eine App oder eine Website baut, gibt es grundsätzlich zwei Ansätze: Man nutzt ausgelagerte Bausteine oder man entwickelt eigene.

In den frühen Phasen des Unternehmens war die Nutzung eines Third Party UI Frameworks, also sofort einsatzbereiter Design Systeme für Entwickler, eine logische Entscheidung. Wir haben auf solche Frameworks gesetzt, um die Entwicklung zu beschleunigen, die Anfangsinvestitionen gering zu halten und unseren Fokus auf das Wesentliche zu richten: schnell Produktwert zu liefern.

Allerdings gibt es dabei einen Haken. Wenn ein Produkt auf Third Party UI Frameworks basiert, übernimmt es auch einen Teil ihres Lebenszyklus. Das bedeutet, dass zentrale Verantwortlichkeiten wie Wartung, Security Patching, Kompatibilitätsupdates und architektonische Weiterentwicklung implizit an externe Projekte ausgelagert werden. Dadurch waren Stabilität, Lieferzeiten und die visuelle Konsistenz unserer Produkte von externen Anbietern abhängig.

Mit zunehmender Skalierung unserer Produkte wurde diese Abhängigkeit zu einem strategischen Risiko.

Zusätzlich wollten wir, dass Look and Feel unserer Produkte die Identität unseres Unternehmens widerspiegelt: klar, einfach und mit einer starken Persönlichkeit.

Letztlich führten all diese Herausforderungen zu einer gemeinsamen Lösung: einem internen Design System.

Unser Design System: vorher vs. nachher.

Der Einfluss auf die Produktgeschwindigkeit

Wenn ich von Produktgeschwindigkeit spreche, meine ich die Fähigkeit eines Produktteams kontinuierlich wertvolle Verbesserungen schnell, planbar und nachhaltig zu liefern.

Schnell sein allein reicht nicht – es geht darum, schnell zu sein, ohne Dinge zu beschädigen, Chaos zu hinterlassen oder sich langfristig selbst im Weg zu stehen.

Ein internes Design System reduziert wiederholte Arbeit, senkt die kognitive Belastung bei der Umsetzung und hilft dabei, die Geschwindigkeit auch mit wachsender Produktsuite aufrechtzuerhalten. Durch wiederverwendbare Komponenten, klare Interaktionsmuster und standardisierte Design Tokens müssen Entwickler keine einzelnen Designs mehr neu interpretieren oder für jedes Feature eigene UI-Lösungen entwickeln. Stattdessen setzen sie auf konsistente, vordefinierte Bausteine, die sie mit Vertrauen kombinieren können.

Das reduziert doppelte Arbeit, verkürzt Entwicklungszyklen, vereinfacht Tests und macht es einfacher neue Features auszuliefern, und das alles bei gleichbleibender visueller und funktionaler Konsistenz im gesamten Produkt.

Unsere Design System Color Tokens.

Der Einfluss auf die User Experience

Ein gut aufgebautes Design System ist das Rückgrat einer starken User Experience. Für sich allein löst es jedoch nicht automatisch alle Fragen der Usability.

Um das zu erreichen setzen wir auf userzentriertes Design, ein Gestaltungsprinzip, das die Bedürfnisse und Pain Points echter Nutzer in den Mittelpunkt stellt. Kundenfeedback, interne wie externe Tests und kontinuierliche Iterationen bilden dabei das Fundament unserer Produktentwicklungsstrategie.

Hier einige Beispiele, wie das neue Design System und unser userzentrierter Ansatz uns dabei geholfen haben klarere, einfachere und schnellere Interfaces zu entwickeln.

Ein Microsoft-natives Look and Feel: mit unserem eigenen Twist, klar, einfach und mit einer eigenen Persönlichkeit

Unsere Produkte bewegen sich innerhalb des Microsoft Ecosystems und werden häufig direkt aus Anwendungen wie Teams oder Outlook heraus genutzt. Die Experience muss sich daher vertraut anfühlen und gleichzeitig eine klare Produktidentität bewahren.

Um dieses Gleichgewicht zu erreichen, haben wir uns vom Fluent Design System von Microsoft und dessen etablierten Interaktionsmustern inspirieren lassen. Dadurch konnten wir uns an den bestehenden mentalen Modellen der Nutzer orientieren und die Lernkurve deutlich reduzieren. Gleichzeitig haben wir eine eigene visuelle Sprache entwickelt und mehrere Komponenten angepasst – oder komplett neu aufgebaut –, um die spezifischen Workflows von Governance Anwendungen optimal zu unterstützen.

Unterschiedliche Produkte, ein Ecosystem inspiriert von Fluent.

Mehrere Produkte, ein Ecosystem

Was als kleine Sammlung von Governance Tools begann, hat sich zu einer Suite von Anwendungen entwickelt, die unterschiedliche Bereiche und Nutzerrollen unterstützen. Auch wenn jedes Produkt eigene Workflows abbildet, sind sie durch ein gemeinsames Design System und konsistente Interaktionsmuster miteinander verbunden.

So entsteht ein zusammenhängendes Produkt-Ecosystem: Interfaces fühlen sich über Anwendungen hinweg vertraut an und Nutzer können ihr Wissen von einem Produkt auf ein anderes übertragen. Wiedererkennbaren Mustern und Verhaltensweisen folgend, finden sie sich auch in neuen Umgebungen schnell zurecht und können Aufgaben erledigen, ohne die Funktionsweise der Oberfläche erneut erlernen zu müssen.

Optimierte Layouts für grosse Bildschirme

Da viele unserer Nutzer IT Administratoren sind und auf grossen Bildschirmen arbeiten, haben wir die Benutzeroberfläche so optimiert, dass der verfügbare Platz bestmöglich genutzt wird. Anstatt ein einheitliches Layout für alle Ansichten zu verwenden, haben wir adaptive Layouts entwickelt, die sich am Inhaltstyp und an den Aufgaben der Nutzer orientieren.

Datenintensive Ansichten, wie Tabellen, nutzen die volle Bildschirmbreite um die Informationsdichte zu maximieren und ein effizientes Scannen zu ermöglichen. Kartenbasierte Ansichten nutzen ein Grid mittlerer Breite, um eine klare visuelle Struktur zu gewährleisten. Formulare und andere textlastige Interfaces sind hingegen bewusst schmaler gehalten, um die Lesbarkeit zu erhöhen und die kognitive Belastung zu reduzieren.

Durch die Anpassung der Layoutmuster an Nutzerrollen und Inhaltstypen bleibt die Oberfläche für Power User effizient und bewahrt gleichzeitig Klarheit und gute Usability.

Beispiele für die unterschiedlichen Layouts auf grossen Bildschirmen.

Schlanke, aber leistungsstarke Navigation

Navigation soll Nutzern helfen, die Orientierung zu behalten. In der bisherigen Experience war sie jedoch fragmentiert, wodurch es schwer fiel zu erkennen, wo man sich im Produkt befindet oder wie man zu einem anderen Bereich gelangt.

Deshalb haben wir ein persistentes Menü auf der linken Seite eingeführt, das jederzeit sichtbar bleibt und eine klare Struktur sowie schnellen Zugriff auf die zentralen Bereiche der Anwendung bietet.

Für komplexere Seiten unterstützt das Menü zusätzlich die Orientierung innerhalb der Seite: Wird ein Eintrag ausgewählt, scrollt die Ansicht automatisch zum entsprechenden Abschnitt.

So entsteht eine deutlich flüssigere Experience. Nutzer behalten leichter den Kontext und können sich sicher und effizient durch das Produkt bewegen.

Beispiele für Navigation auf einer Übersichtseite und in einer Detailmaske.

Eine flüssigere Experience: "Don’t make me think"

Ein zentrales Ziel des Redesigns war es, häufige Aufgaben schneller, klarer und intuitiver ausführbar zu machen. Nach dem Prinzip „Don’t make me think“ haben wir Interaktionen vereinfacht, dass sich Nutzer auf ihre Aufgaben konzentrieren können, statt darauf, wie die Oberfläche funktioniert.

Klare Primary Calls-to-Action führen Nutzer durch jeden Schritt und bleiben sichtbar, selbst dann, wenn sie deaktiviert sind. So ist jederzeit erkennbar, welche Aktion als Nächstes folgt und welche Informationen noch benötigt werden.

Zusätzlich haben wir Task Panels eingeführt, die sich als Overlays über dem Hauptscreen öffnen. Dadurch können Nutzer Aktionen abschliessen, ohne ihren Kontext zu verlieren.

Für komplexere Prozesse bieten Step-by-Step Wizards klare Fortschrittsanzeigen und Navigationsmenüs, die zeigen, in welchem Schritt sich Nutzer befinden, was als Nächstes folgt und wie viele Schritte noch verbleiben.

Das Ergebnis ist ein flüssigerer, besser vorhersehbarer Ablauf, der Nutzern hilft, orientiert zu bleiben und sich auf die eigentliche Aufgabe zu konzentrieren.

Beispiel für ein Task Panel und einen Wizard.

Klare Prozesse mit kontextuellen Informationen und visuellem Feedback

Das Verwalten von Governance Aufgaben umfasst oft Aktionen mit echten Auswirkungen. Daher sollte die Oberfläche Systemreaktionen klar und nachvollziehbar kommunizieren. Um die Verständlichkeit zu verbessern, haben wir im gesamten Produkt umfangreicheres visuelles Feedback eingeführt.

Success Toasts bestätigen erfolgreich abgeschlossene Aktionen, während subtile Animationen, etwa das Hervorheben einer Tabellenzeile in Grün beim Hinzufügen eines Elements oder in Rot beim Entfernen, Änderungen unmittelbar sichtbar machen.

Zusätzlich haben wir Schutzmechanismen wie Bestätigungsdialoge eingeführt, wenn Nutzer versuchen, eine Detailmaske mit ungespeicherten Änderungen zu verlassen.

Parallel zu diesen Verbesserungen haben wir auch die Produkttexte überarbeitet: Titel, Untertitel, Button-Beschriftungen sowie zuvor rein ikonbasierte Aktionen wurden neu formuliert, um mehr Kontext zu geben.

Zusammen sorgen diese Änderungen für stärkeres Systemfeedback, reduzieren Unsicherheit und geben Nutzern mehr Sicherheit bei der Ausführung wichtiger Aktionen.

Beispiel für eine erfolgreiche Aktion in einer Tabelle und einen Bestätigungsdialog.

Eine Grundlage für die nächste Phase

Dieser Launch ist weit mehr als ein visuelles Update. Er ist das Ergebnis einer tiefgreifenden Produktentwicklung: von fragmentierten Anwendungen hin zu einer konsistenten Suite, von externer Abhängigkeit hin zu echter Ownership und von kurzfristiger Geschwindigkeit hin zu langfristiger Skalierbarkeit.

Das Rebranding ist der Teil, den Nutzer sehen werden, doch der eigentliche Mehrwert liegt in dem, was es ermöglicht: eine Plattform, die wachsen kann, ohne Konsistenz, Stabilität oder Vertrauen zu verlieren.

Und während wir unsere Governance Fähigkeiten im Microsoft Ecosystem weiter ausbauen, stellt diese Grundlage sicher, dass wir weiterhin schnell entwickeln und gleichzeitig unsere User Experience kontinuierlich verbessern können.

Wir können es kaum erwarten zu sehen, was als Nächstes kommt!