Designsystem und Komponentenbibliothek für einheitliche Fachanwendungen der Parlamentsdienste
Einheitliche User Experience für die parlamentarische Arbeit
Die Parlamentsdienste sind die Stabsstelle der Bundesversammlung und ihrer Organe. Sie unterstützen diese bei der Erfüllung ihrer Aufgaben und stellen dafür moderne Informatiksysteme und Anwendungen bereit.
Im Rahmen der Einführung der neuen Plattform ParlNet (entwickelt durch ti&m) zeigte sich früh, dass für die nachhaltige Weiterentwicklung und Wiederverwendung künftiger Anwendungen eine einheitliche, zukunftsfähige Design- und Komponentenbasis benötigt wird.
Mit der Entwicklung dieser Komponentenbibliothek wurden Lambda IT und Designsensor beauftragt.
Seit der Integration des Lambda-Teams in die BEGASOFT wird die technische Kompetenz im Bereich Frontend-Entwicklung, Open-Source-Architekturen und komponentenbasierte Systeme weitergeführt – in enger Zusammenarbeit mit langfristigen Partnern wie Designsensor.
Vom Fachanwendungsprojekt zum integrierten Design- und Komponentensystem
Ziel des Projekts war es, ein einheitliches, zukunftsfähiges Design- und Komponentensystem zu schaffen, das langfristig alle digitalen Fachanwendungen der Parlamentsdienste einheitlich, barrierefrei und technologieunabhängig unterstützt.
In enger Zusammenarbeit mit dem Team „Innovation und Fachanwendungen“ der Parlamentsdienste entwickelte Designsensor ein UX- und UI-Designsystem, das klare Designprinzipien, visuelle Richtlinien und Benutzerflüsse definiert. Diese sind auf Verständlichkeit, Zugänglichkeit und Effizienz ausgerichtet.
Durch früh getestete Benutzerflüsse, Prototypen und einheitliche Gestaltungsrichtlinien entstand eine konsistente Benutzererfahrung, die Benutzer:innen Orientierung bietet und komplexe Abläufe vereinfacht.
Die Kernprinzipien des UX/UI-Designs:
- Struktur schafft Klarheit: User Flows und Prototypen wurden früh getestet, um reale Nutzungsszenarien zu simulieren und zu optimieren.
- Konsistenz durch klare Regeln: Einheitliche Designprinzipien und praxisnahe Beispiele sichern die Wiedererkennbarkeit über alle Anwendungen hinweg.
- UX im Fokus: intuitive Abläufe, einfache Orientierung und klare Informationsarchitektur für Benutzer:innen mit unterschiedlichstem Hintergrund.
- Transparenz im Prozess: Das Designsystem, der Styleguide und alle Komponenten stehen in Storybook offen zur Verfügung – sichtbar, dokumentiert und testbar.
- Weitere Informationen zum UX/UI-Design finden sich in der Projektbeschreibung von Designsensor
Die technische Umsetzung
Parallel dazu realisierte Lambda IT die technische Komponentenbibliothek – basierend auf offenen Webstandards und modernen Open-Source-Technologien. Diese stellt die wiederverwendbaren UI-Bausteine bereit, die das Designsystem in der Praxis lebendig machen und auf dem sämtliche zukünftigen Fachanwendungen aufbauen werden.
Zu den standardisierten Bausteinen gehören Formularfelder, Buttons, Navigationskomponenten, Layout-Elemente bis hin zu Überschriften und Icons. Besondere Aufmerksamkeit lag auf Accessibility und Usability: Alle Formularelemente sind vollständig über die Tastatur steuerbar und entsprechen gängigen Accessibility-Standards.
Ein wichtiger Meilenstein folgte 2025: Die Standard-Webkomponenten wurden mit Framework-Integrationen für Angular, React und Vue erweitert. Damit können die Bausteine nahtlos in modernen Webframeworks verwendet werden und unterstützen die jeweils Framework spezifischen Features, wie etwa die Anbindung an Formular-Validierungen.
Kernfunktionen und Vorteile:
- Wiederverwendbare UI-Komponenten: Einheitliche Bausteine, die über alle Applikationen hinweg eingesetzt werden können.
- Framework-unabhängig und flexibel: Unterstützung für Angular, React und Vue für maximale Kompatibilität mit bestehenden und künftigen Systemen.
- Modernes Frontend-Engineering: Umsetzung mit StencilJS, einem Open-Source-Tool, das die Erstellung von wiederverwendbaren, standardkonformen Web Components ermöglicht.
- Open Source und nachhaltig: Die Library ist vollständig dokumentiert, offen zugänglich und kann durch externe Partner weiterentwickelt werden.
- Accessibility und Usability first: Alle Komponenten sind barrierefrei, tastaturbedienbar und erfüllen die Anforderungen an die Accessibility.
- Effizienz in Entwicklung und Betrieb: Einheitliche Komponenten verkürzen Entwicklungszyklen, erhöhen die Codequalität und sichern eine konsistente User Experience.
- Live-Dokumentation: Das zentrale Nachschlagewerk ist öffentlich zugänglich und dokumentiert in Storybook.
Kundennutzen
Die Parlamentsdienste verfügen heute über ein skalierbares, zukunftssicheres Design- und Komponentenfundament. Dieses geht weit über ein technisches Hilfsmittel hinaus, da es das Nutzererlebnis ihrer gesamten digitalen Umgebung prägt.
- Konsistenz: Alle Anwendungen basieren auf denselben visuellen und funktionalen Prinzipien.
- User Experience: Nutzungsverhalten, Symbole und Interaktionen bleiben vertraut – kein Umlernen nötig.
- Effizienz: Durch wiederverwendbare, getestete Komponenten entstehen neue Anwendungen schneller und zuverlässiger.
- Flexibilität: Einsatzfähig in verschiedenen Frameworks und Projekten.
- Offen: Dank Open Source bleibt die Lösung unabhängig und langfristig nutzbar.
- Identifikation: Das System ist Ausdruck der Professionalität und Innovationskraft der Parlamentsdienste.
Fazit und Ausblick
Die Komponentenbibliothek kommt künftig in allen neuen Fachanwendungen der Parlamentsdienste zum Einsatz und wird kontinuierlich von BEGASOFT weiterentwickelt. Damit bildet sie ein zentrales Element der digitalen Architektur und unterstützt interne sowie externe Teams bei der effizienten Umsetzung neuer Lösungen. Erste Projekte – darunter das von ti&m umgesetzte Serviceportals für Parlamentardienste – setzen bereits erfolgreich auf die Bibliothek und bestätigen ihren praktischen Nutzen.
Dank des offenen, technologieunabhängigen Ansatzes bleibt das
Designsystem flexibel, nachhaltig und breit einsetzbar. Es schafft ein
digitales Fundament, das mit zukünftigen Anforderungen mitwächst und
langfristig für Konsistenz und Qualität in den Anwendungen der
Parlamentsdienste sorgt.
Kundenkommentar
Annette Feitscher, Business Ownerin Ratsmitgliederplattformen
Das Parlament passt sich ständig neuen Ansprüchen und Arbeitsweisen an. Deshalb setzt es auf digitale Lösungen.
Zu den Kundinnen und Kunden gehören nicht nur 246 Ratsmitglieder und deren Mitarbeitende, sondern auch Fraktionssekretariate sowie die Mitarbeitenden der Parlamentsdienste. Die Wiedererkennungseffekt digitaler Lösungen ist mir angesichts des zunehmenden Gewichts digitaler Lösungen und der heterogenen Nutzergruppe besonders wichtig. Mit dem Designsystem und der Komponentenbibliothek haben wir eine nachhaltige Grundlage dafür geschaffen, deren positive Effekte sich in der Zukunft zeigen werden. Davon bin ich überzeugt.
Die erfolgreiche Zusammenarbeit mit Lambda IT war dabei ein wichtiger Schritt. Umso mehr freut es mich, dass diese Kompetenz mit BEGASOFT nahtlos weitergeführt und langfristig gesichert wird.
