Über das Designsystem „MUSE“

MUSE ist ein Designsystem, das intern für die Bundesdruckerei (bdr) entwickelt wurde, um eine Vielzahl ihrer digitalen Projekte und Produkte abzudecken. Ausgangspunkt war das Bundesportal, ein Online-Portal zur Digitalisierung von Behördendiensten, das jedem Bürger über einen Webbrowser zugänglich gemacht wird. Daraus entwickelte sich MUSE zu einem vollständig themebaren und flexiblen System. Der Schwerpunkt liegt auf Regierungswebsites und -portalen - wir bieten zum Beispiel einen umfangreichen Satz von Formularelementen, und die erforderlichen Zugänglichkeitsstandards sind von Anfang an in unsere Komponenten integriert.

Barrierefreiheit nach BITV-Standard

Jede Komponente des Designsystems wird sorgfältig auf Barrierefreiheit nach BITV 2.0 getestet. Unser Prozess umfasst Barrierefreiheitssprüfungen in der UX- und der Entwicklungsphase und unsere Ergebnisse werden durch regelmäßige Usability- und Barrierefreiheitstests durch eine externe Agentur validiert.

Vollständig responsiv, mobile first

MUSE wurde in erster Linie für mobile Endgeräte entwickelt, um eine gleichbleibend komfortable Benutzererfahrung auf allen Geräten und in allen Ansichten zu gewährleisten. Wir haben besonders darauf geachtet, alle Funktionen für jedes Gerät zur Verfügung zu stellen und keine Abstriche bei den Optionen für mobile Nutzer zu machen.

Entwicklerfertige Code-Komponenten-Bibliothek

Das Designsystem besteht aus zwei Haupt-Repositories: der Figma-Datei für UX-Design und Komponenten und unserem Storybook, das eine umfangreiche Bibliothek von Code-Komponenten enthält, die von Entwicklern genutzt werden können.

Alles themebar, alles flexibel

Zur Erleichterung der Flexibilität und der Anwendungsmöglichkeiten ist unser Designsystem vollständig themebar. Dazu gehören ein semantisches Farbsystem mit einer Reihe von interaktiven Patterns, anpassbare Schriftvariablen, ein austauschbares Icon-Set, anpassbare Seitenlayouts und Abstände, die alle über Variablen verwaltet werden.

Gut dokumentiert für UX und Frontend

Wir dokumentieren akribisch jeden Aspekt unserer Komponenten, um sicherzustellen, dass es klare Richtlinien für ihre Verwendung sowohl in der UX als auch in der Entwicklung gibt. Jedes Detail wird in Wort und Bild erklärt, aber wir achten darauf, alles so flexibel zu halten, dass das Designsystem universell für eine Vielzahl von digitalen Produkten einsetzbar ist.

Regelmäßig auf Komponentenebene getestet

Wir arbeiten mit einer renommierten externen Agentur zusammen, um unsere Komponenten und die damit erstellten Produkte einmal im Quartal einem gründlichen Usability-Test zu unterziehen. Dies ermöglicht es uns, die Bedürfnisse der Nutzer zu überprüfen und bei der Arbeit an einzelnen Aspekten des Designsystems das große Ganze nicht aus den Augen zu verlieren. Außerdem haben wir dadurch einen hohen Anspruch an die Benutzerfreundlichkeit und den Komfort.

Meine Rolle

Ich bin seit zwei Jahren die leitende Designerin des Projekts und habe das Designsystem von Grund auf aufgebaut (wobei der Grund eine sehr vage Sammlung von UI-Elementen war, die aus verschiedenen Teilen der bestehenden Website zusammengetragen wurden). Ich bin verantwortlich für die Leitung des Designteams, das an MUSE arbeitet (die Größe dieser Gruppe schwankt zwischen 2 und 5 Personen), sowie für die Erstellung und Pflege der Komponenten selbst. Ich führe Barrierefreiheitsprüfungen für alles durch, was wir entwickeln, sowie UX- und Entwicklungsprüfungen und habe mich zeitweise um die Projektkommunikation gekümmert. Derzeit arbeiten sieben Entwicklerteams mit dem Designsystem, jedes mit individuellen Bedürfnissen und Fragen. Ich treffe mich regelmäßig mit ihnen, kümmere mich um ihre Anliegen und erleichtere die Kommunikation mit unserem MUSE-Entwicklungsteam.

Herausforderungen

Es ist schwierig, ein vollständig barrierefreies BITV 2.0-Designsystem zu erstellen - man muss auf Farbkontraste, Größenangaben und mögliche Größenänderungen von Inhalten, Interaktivität, Screenreader-Zugang und vieles mehr achten. Wenn man dieses Designsystem anpassbar und themebar gestaltbar macht, stellt sich dieses Problem auf einer ganz neuen Ebene - wie stellt man sicher, dass nur zugängliche Farben verwendet werden? Können wir die Größe der Komponenten einschränken, oder wird das die notwendigen Zoomstufen auf dem Bildschirm beeinträchtigen? Es war nicht einfach, Lösungen für alle Herausforderungen zu finden, die sich bei der Entwicklung von MUSE ergaben, aber das resultierende Produkt ist eine perfekte Mischung aus Flexibilität und Stabilität.

Entwickler davon zu überzeugen, ein Designsystem zu verwenden, kann ein schwieriges Unterfangen sein. Wir waren in der Lage, die Vorteile unseres Systems aufzuzeigen und die Bedürfnisse der Entwicklungsteams so weit zu berücksichtigen, dass wir Lösungen gefunden haben, die die Arbeit aller Beteiligten erleichtern, was eine sehr bereichernde Erfahrung war.