Mit Patterns und System gute digitale Services effektiv und effizient gestalten

Wir sollten das Rad, wenn’s rollt, nicht neu erfinden. Wenn es um die Gestaltung von digitalen staatlichen Leistungen geht, passiert das jedoch ständig. Nur wenige digitale Angebote sehen einander ähnlich und funktionieren gleich. Hundesteuer bezahlen, BAföG beantragen, Auto anmelden – jede Leistung ist gänzlich anders strukturiert und gestaltet.

Zum immer größeren visuellen Wildwuchs möchten wir beim DigitalService nicht bei­ tragen. Obwohl wir in den vergangenen Jahren eigene Komponentenbibliotheken und Designsysteme entwickelt haben, verfolgen wir diese Arbeit nicht weiter. Stattdessen verwenden wir in Zukunft in bestehenden und neuen Projekten beim DigitalService, wo immer möglich, das KERN Designsystem.

In diesem Beitrag zeigen wir auf, wie Teams des DigitalService zu dieser Entscheidung gekommen sind. Wir geben einen Überblick über unsere Arbeit in den vergangenen Jahren und darüber, wie wir übergreifende Komponenten und Patterns bei der Ent­wick­lung neuer Online-Services verwenden. Unsere Zielsetzung ist dabei immer die gleiche: mit möglichst wenig Aufwand Online-Services von gleichbleibend hoher Qualität zu bauen.

Seit fünf Jahren entwickeln wir beim DigitalService digitale staatliche Leistungen. Zu den ersten gehörten Services der Finanzverwaltung: Steuerlotse für Rente und Pension im Jahr 2021 und die Grundsteuererklärung für Privateigentum 2022. Im gleichen Jahr begannen wir, an Justiz-Leistungen zu arbeiten. Die meisten Services entstehen im Auftrag des Bundes, oft jedoch auch in Zusammenarbeit mit den Ländern.

Um Vertrauen in die Angebote aufzubauen, blieben wir gestalterisch möglichst nah an den existierenden Vorgaben. Denn was Staat ist, soll wie Staat aussehen. Im Styleguide der Bundesregierung sind diverse Gestaltungsmittel beschrieben. Wir verwendeten Schrif­ten und Farben, die zunächst für Drucksachen festgelegt wurden. Einzelne Ele­men­ te sind jedoch auch speziell für Webseiten vorgesehen. Dazu gehören Knöpfe und Eingabefelder.

Die Sektion der Webkomponenten des Styleguides ist jedoch nicht allumfänglich. Zahl­rei­che Elemente, die es braucht, um digitale Services zu entwickeln, fehlen bislang. In der Arbeit an den neu entstandenen Services ergänzten wir daher, was fehlte. Dabei setzten wir wiederum auf die Erfahrungen von internationalen Vorbildern und die Vor­ar­beit von Kolleg:innen aus anderen Ländern auf. Eine wichtige Referenz war das britische GOV.UK Design System, an dem seit über zehn Jahren gearbeitet und das breit genutzt und weiterentwickelt wird.

Während der Gestaltung verschiedener Steuerleistungen begannen wir, unsere Arbeit an Interfaces stärker zu systematisieren. Wir entwickelten eine Bibliothek mit Komponenten. Sie enthält Elemente wie Eingabefelder, Auswahlboxen und Fehlermeldungen – essen­ziel­le Bausteine für digitale Services. Diese Bibliothek ist für alle im DigitalService verfügbar. Mittlerweile ist sie auch auf GitHub offen einsehbar. Die Idee: Kein Team soll Dinge neu entwickeln, wenn es ein anderes bereits gestaltet und getestet hat.

Jedes Team verwendet existierende Patterns und Komponenten wieder - ist eines un­se­rer zwölf Delivery-Prinzipien. Diese beschreiben gemeingültige Arbeitsweisen beim DigitalService. Die Idee der Wiederverwendung ist gut und wichtig. Jedoch müssen Patterns und Komponenten sowie deren Dokumentation die notwendige Reife haben. Das macht Arbeit und benötigt Zeit. Wir stellten regelmäßig fest: Im Rahmen regulärer Projekt­arbeit ist es kaum möglich, neue Services zu gestalten und parallel dazu universelle und skalierbare Muster abzuleiten.

Mit dem Beginn unserer Arbeit an service.justiz.de, einer neuen Service-Plattform für Online-Leistungen der Justiz, war die Skalierbarkeit eine Prämisse. Nach der Entwicklung des Angebots zu Beratungshilfe erhalten nutzten die nächsten Services Prozesskostenhilfe erhalten und Fluggastrechte einfordern dieselben Patterns und Komponenten. Durch die Wiederverwendung sparten die Teams wertvolle Ent­wick­lungs­zeit. Zugleich entwickelten wir stets nur die Dinge, die gerade notwendig waren. Patterns entstanden organisch. Zugleich blieben Lücken, die jedoch keine Prioritäten in der lau­fen­den Serviceentwicklung waren.

Wir fragten uns, ob wir nicht nur service-, sondern auch verwaltungsübergreifend an Patterns arbeiten können.

Bereits seit Mai 2022 nahmen wir regelmäßig an verwaltungsübergreifenden Arbeits­treffen teil. Der Fokus dabei lag auf einem Designsystem für Deutschland. Die Staatskanzlei Schleswig-Holsteins hatte dazu eingeladen. Verschiedene ver­wal­tungs­interne Einheiten wie Dataport, das ITZ Bund und der DigitalService folgten dem Ruf.

Um einen besseren Überblick zu Entwicklungen zu bekommen, luden wir zudem im September 2023 im Rahmen der NeXT-Community Nutzerzentriertes Design zu einem Austausch zum Thema Design-Systeme und Komponentenbibliotheken ein. Dataport, die Deutsche Rentenversicherung Bund und Berlin.de erläuterten ihre Arbeit in diesem Bereich. In den folgenden Monaten erfuhren wir von etwa einem weiteren Dutzend ähnlicher Entwicklungen.

Ab Januar 2024 veranstalteten wir gemeinsam mit anderen Stakeholdern aus der Verwaltung eine Reihe an Workshops, um die Arbeit an diversen eigenen Design­systemen auf den Prüfstand zu stellen. Es kamen Akteure aus verschiedenen Ver­wal­tungs­bereichen, wie AKDB, Dataport, ITZBund und die Staatskanzlei Schleswig-Holstein. Wir stellten einander unsere jeweilige Arbeit vor. Gemeinsam fragten wir uns, wie eine veränderte Verwaltungslandschaft im Jahr 2029 aussehen soll. Wie würden wir dann digitale Services effektiver gestalten können? Wie sähe der Weg zu einem ein­heit­lich­en und übergreifenden Designsystem aus? Und was bräuchte es, um unsere derzeitigen Aufwände zusammenzuführen und Kräfte zu bündeln?

Diese Workshops führten innerhalb des DigitalService zu einer kritischen Reflexion über unsere zukünftigen Entwicklungen. Im Sommer 2024 prüfte daher eine Arbeitsgruppe im DigitalService, ob wir auf ein externes Designsystem wechseln sollten. Dabei betrachte­ten unsere Designer:innen und Entwickler:innen offen verfügbare Design­systeme. Ge­schlos­sene und proprietäre Systeme mussten aufgrund unserer Arbeit entlang des Servicestandards ausgeschlossen werden. Das beinhaltet auch bereits ausgereifte Systeme aus anderen Digitaleinheiten des öffentlichen Sektors, zu denen wir keinen direkten Zugang erhielten. Nur was offen und zugänglich war, konnten wir betrachten und bewerten.

Unsere Arbeitsgruppe entwickelte Kriterien, um externe Designsysteme bewerten zu können. Diese beinhalteten deren Funktionalität und Anwendbarkeit, Design und Standardi­sie­rung, die dahinterliegende Strategie und den Reifegrad sowie die Governance und Möglichkeiten der Mitwirkung. Anhand dieser Kriterien wurden schließ­lich die Kandidaten untersucht. Schnell reduzierte sich die Anzahl der validen Optionen auf das britische GOV.UK Design System und das deutsche KERN Designsystem. Im Rahmen eines Hack-Days im November 2024 testeten Designer:innen aus verschiedenen Teilen des DigitalService beide gründlich auf ihre Einsatzfähigkeit. Letztlich überzeugten sie jeweils in unterschiedlichen Kategorien.

Nach gründlicher Abwägung formulierten die Mitglieder der Arbeitsgruppe aus Design und Software-Entwicklung eine Empfehlung an das Executive-Team des DigitalService: in Zukunft Online-Services mit dem KERN Designsystem zu entwickeln.

Die Einführung der Digitalen Dachmarke hat nochmals zu mehr Klarheit geführt. Sie wurde 2024 vom IT-Planungsrat verabschiedet und umfasst vier flexibel einsetzbare Elemente. Eines davon ist das KERN Designsystem.

Die Digitale Dachmarke wurde entwickelt, um digitale Angebote von Bund, Ländern und Kommunen zu kennzeichnen. Die Idee – mit ihren vier Elementen sind staatliche Leistungen sofort und eindeutig erkennbar.

Im Frühsommer 2025 entwickelten wir die neue Webseite des Servicestandards und veröffentlichten sie auf servicestandard.gov.de. Als erstes Verwaltungsangebot in­te­grier­te sie nicht nur einzelne, sondern alle vier Elemente der Dachmarke.

Von internationalen Projekten wissen wir, welchen positiven Effekt eine klar erkennbare Marke in Kombination mit einem umfassenden Baukasten für digitale Services haben kann. Das britische Pendant GOV.UK hat eine Markenbekanntheit von über 98% erreicht. Dazu hat es in einer wirtschaftlichen Analyse errechnet, dass das dazugehörige GOV.UK Design System der britischen Verwaltung jährlich über 36 Millionen Pfund bei der Ent­wick­lung von digitalen Services einspart. Vor 5,5 Jahren lag die Prognose noch bei 17 Millionen Pfund jährlicher Ersparnis. Die durchschnittliche Zufriedenheitsquote von digitalen Leistungen auf GOV.UK liegt bei circa 80 Prozent.

In Zeiten von knappen Budgets, sinkendem Staatsvertrauen und weiterhin mangelnder Servicequalität von deutschen Verwaltungsleistungen sollten Teams auf die kombinierten Elemente der Digitalen Dachmarke zurückgreifen. Nur wenn staatliche Angebote kon­sis­tent und einheitlich gestaltet sind, können sie Vertrauen zurückgewinnen. Wir verwenden die kombinierten Elemente in allen Projekten, die es gestatten – denn sie helfen uns, Angebote von hoher Qualität, zeit- und kostenschonend zu entwickeln. Wo wir Lücken in Bestandteilen der Dachmarke entdecken und Verbesserungsmöglichkeiten sehen, arbeiten wir zu. Das kann das Verhalten der Kopfzeile oder das Erweitern von Pattern im Designsystem sein. Durch verwaltungsübergreifende Nutzung und kol­la­borative Weiterentwicklung werden die Einsatzmöglichkeiten fortwährend besser.

Unsere Arbeit – und ebenso die des Teams hinter dem KERN Designsystem – kon­zen­trier­te sich zunächst maßgeblich auf Stile und Komponenten: Es wurden Farb­palet­ten, Schrif­ten und Größen definiert, Bedienelemente, Fehlermeldungen sowie Ein­ga­be­felder fest­ge­legt. Um gute, konsistente Services zu erhalten, braucht es jedoch mehr. Das wird derzeit auch an verschiedenen Angeboten, die Elemente der Dachmarke verwenden, deutlich. Die Services sehen in Teilen verwandt aus, aber ähneln sich in Gesamterscheinung und Struktur nur bedingt.

Damit unterschiedliche Verwaltungsservices tatsächlich gleich aussehen und funk­tio­nie­ren, müssen sie ganze Serviceteile gemeinsam nutzen. Bislang fehlen solche um­fas­sen­den Patterns in Deutschland jedoch. Hier bietet der GovStack-Baukasten Un­ter­stützung. Unter anderem mit der Deutschen Gesellschaft für Internationale Zusammenarbeit (GIZ GmbH) finanziert vom Bundesministerium für Wirtschaftliche Zusammenarbeit und Ent­wick­lung (BMZ), der UN International Telecommunication Union (ITU) und der estnischen Regierung für Staaten des globalen Südens entwickelt, enthält er Anleitungen zur Ent­wick­lung funktionaler Serviceteile. Dazu gehören größere Design-Patterns. Die Idee: Seitentypen, Service-Segmente und ganze Arten von Services – wie zum Beispiel Ge­neh­mi­gun­gen – werden stets nach der gleichen Struktur entwickelt. Das macht die Entwicklung noch effizienter und Services besser, denn zahlreiche internationale Kolleg:innen haben daran mitgearbeitet.

Seit Sommer 2024 setzen wir uns stärker mit den GovStack-Design-Patterns auseinander. Wir organisierten zunächst einen Workshop mit internationalen Kolleg:innen. Im Sep­tem­ber dieses Jahres trugen wir entlang der Vorlagen von Seitentypen alles zu­sam­men, was in den vergangenen fünf Jahren im DigitalService entstand. Im nächsten Schritt werden wir Seitentypen konsolidieren und an die Digitale Dachmarke und das KERN Designsystem anpassen.

Wir sehen es als unsere Verpflichtung, mit den uns anvertrauten Steuergeldern die bestmöglichen Angebote zu entwickeln – und zwar so effizient wie möglich. Das KERN Designsystem ist als Teil der Digitalen Dachmarke in den vergangenen Jahren zur besten Option für Komponentenbibliotheken geworden. Wir kombinieren es mit den größeren Service-Pattern des GovStack-Baukastens. Damit lassen sich konsistent gute digitale Services entwickeln.

Nach der breiten politischen Zustimmung zum Beschluss des IT-Planungsrats und der Verankerung der Dachmarke im Servicestandard ist klar: An der Digitalen Dachmarke und dem KERN Designsystem führt für Serviceteams kein Weg vorbei.

Die Nutzung des KERN Designsystems erspart uns die stetige Neuerfindung von visuellen Marken, funktionalen Komponenten und ganzen Serviceteilen für neue digitale Angebote. Es erlaubt uns zudem die gemeinsame Weiterentwicklung von qualitativ immer reiferen Service-Bestandteilen mit zahlreichen anderen Verwaltungsakteuren. Unsere Arbeit an Service-Patterns beispielsweise ergänzt das KERN Designsystem dort, wo gerade noch Lücken existieren. So machen wir Gutes im Kollektiv noch besser.