KERN UX-Standard

Der Auftrag

Das Land Schleswig-Holstein, die Freie Hansestadt Hamburg und viele weitere Menschen und Institutionen deutschlandweit sind überzeugt: Wir brauchen einen modernen, digital zugänglichen Staat. Barrierefrei, transparent und intuitiv nutzbar für alle Bürger*innen, Institutionen und Unternehmen im Land. Denn Stand jetzt ist die Digitalisierung der deutschen Verwaltung vom Föderalismus geprägt.

Digitale staatliche Angebote (Antragsformulare, Online-Dienste, Plattformen oder Fachverfahren) werden von verschiedenen Betreibern und auf unterschiedlichen Plattformen realisiert. Dies führt zu einer Fragmentierung der Benutzeroberflächen, zu fortlaufenden Designbrüchen, fehlender Wiedererkennbarkeit und Einheitlichkeit digitaler staatlicher Leistungen, zu schwankender Qualität und zu unzähligen digitalen Barrieren.

Die Tat-Sachen

User-Research
Logodesign, Corporate Design
Token-Systematik und Komponenten-Library
Umsetzung in Figma und Code
Dokumentation des Design-Systems
Prototypen für User-Tests
Pitch-Deck, Social-Media-Posts, Eventmaterialien
Community-Betreuung

Zur Website

Der Lösungsweg

Gemeinsam in einem Team aus Mitarbeiter*innen von Dataport AÖR, Allgeier, Microsoft, Cassini, Vertreter*innen der Staatskanzlei Schleswig-Holstein und der Senatskanzlei Hamburg schufen wir mit KERN einen offenen, modularen und barrierefreien UX-Standard.

Dieser besteht aus einem Design-System, aus einer aktiven, teilnehmenden Community und aus Unterstützungsangeboten, um die Verbreitung von KERN voranzutreiben. Auf diese Weise entsteht ein digitales Pilot-Produkt, das, ganz im Sinne des "Einer für Alle"-Gedankens (EfA), für alle interessierten Verwaltungen, Institutionen und Unternehmen anknüpfungsfähig ist.

Nach dem Release des MVP (März 2023), dem Major Release v1.0 (Juni 2024) und KERN 2 (April 2025) sind wir auch fortlaufend Bestandteil des Projektteams hinter KERN.

Da KERN die ganze deutsche Verwaltung begeistern soll, braucht es auch eine unverwechselbare, klare Identität. Die haben wir erschaffen. Das Logo besteht aus sehr klaren und kraftvollen Grundformen und greift damit gestalterisch die Attribute und Werte des Projekts auf. Es besteht im Wesentlichen aus den sehr prägnanten, leicht modifizierten Glyphen der Schrift Montserrat semibold, Das E wurde wegen seiner gestalterischen Nähe an die Form eines “Hamburger-Menü”-Icon angepasst - passend für ein Design-System.

Neben dem Logo wurde auch ein Farbspektrum, die Typografie zur Marke KERN und ein Satz grafischer Elemente sowie ein Illustrationsstil festgelegt, der zur Gestaltung von Kommunikationsmaßnahmen genutzt werden kann.

Zentrales Element von KERN ist die Komponenten-Bibliothek des Design-Systems. Hier finden die Nutzenden, ob Designer oder Entwickler alles, was sie für den Aufbau eines guten barreirefreien User Interfaces benötigen: Vom Button über Inputs bis zur Card ist hier alles gut dokumentiert enthalten. Alles wird dabei auf eine klug angelegte Token-Struktur zurückgeführt, in der Abstände, Größen, Farben und Typografie definiert sind. Dadurch werden Handoffs zwischen Design und Entwicklung radikal vereinfacht, denn beide sprechen damit die gleiche Sprache.

Das System erlaubt dabei auch die Anwendung des Dark Modes und die Integration von Themes zur individuellen Anpassung an das eigene Corporate Design. Auch ein Layering-Konzept für den Aufbau des Designs in mehreren Ebenen mit kontextuellen Farben, die auf ihre jeweiligen Hintergründe reagieren, wurde von uns mitkonzipiert und realisiert. Ganz „nebenbei“ entwickelten wir KI-gestützt ein Farbtool, mit dessen Hilfe sich individuelle Farbpaletten für barrierefreie Designs nicht nur für die Integration in KERN ganz komfortabel umsetzen lassen.

Die Dokumentations-Website

KERN bietet nicht nur eine Komponenten-Bibliothek wie viele andere auch. Der Clou ist die Website kern-ux.de, auf der wir an der Dokumentation dieser Bibliothek und des gesamten Design-Systems mitarbeiten. Jede Komponente, jedes Pattern wird dabei durchleuchtet und Anwendungsfälle, Dos und Don’ts werden formuliert sowie Barrierefreiheits-Hinweise gegeben, denn KERN hat den Anspruch, mindestens nach Konformitätsstufe AA barrierefrei zu sein.

Mithilfe der Dokumentation sollen Entwickler*innen und Designende befähigt werden, nutzerfreundliche, barrierefreie Anwendungen für die Bürger*innen ihres Landes oder ihrer Kommune zu bauen, um Behördengänge zu vereinfachen oder im besten Fall zu erübrigen. Da es zu Beginn noch keine Website gab, haben wir sie kurzerhand auf Basis des Website-Generators Docusaurus unter Berücksichtigung des Brandings gestaltet und umgesetzt.

Um den Nutzer*innen von KERN noch eine bessere Vorstellung davon zu geben, wie Online-Dienste künftig damit aussehen können, haben wir im Team mithilfe von Prototypen und Klickdummies bestehende Online-Dienste optimiert. Dabei erarbeiteten wir Lösungen, wie diese einheitlicher, verständlicher, schneller und einfacher zu bedienen sind und dabei noch gut aussehen. Diese Lösungen wurden in User-Tests erprobt, die Ergebnisse dokumentiert und erhielten Einfluss in weitere Iterationen der Komponenten und Pattern.

Design-Systeme gibt es viele. Der Unterschied, den KERN macht, ist seine Community. Menschen, die ein Interesse an nahtloser User Experience bei digitalen Behördengängen haben. Wir richteten dafür als Kommunikationskanal Nummer 1 Mattermost ein, wo sich die Community austauschen kann. Auf Messen, zu denen wir Postkarten erstellten, in Vorträgen, zu denen wir einen Powerpoint-Master gestalteten, und in sozialen Medien, zu denen wir Postings kreierten, findet weiterer Kontakt zu der stetig wachsenden Fangemeinde statt. Unser Expertenwissen teilen wir zudem in Formaten wie der Online-Sprechstunde, in offenen Reviews mit Beitragenden oder in 1:1‑Gesprächen mit Interessierten.

So geht es weiter

KERN ist kein Projekt, das irgendwann zu Ende ist. KERN lebt und verändert sich stetig. Die Akzeptanz in der Community ist riesig, sie wächst immer weiter und füllt das Projekt mit Leben. Ab 2027 übernimmt die FITKO KERN – und NC ist weiterhin Teil dieser aufregenden Reise.