meinBerlin — Bürgerbeteiligungsplattform

Die Herausforderung

meinBerlin ist die offizielle digitale Beteiligungsplattform der Stadt Berlin, betrieben von Liquid Democracy e.V. Sie ermöglicht Bürger:innen die Teilnahme an Stadtplanung, Bürgerhaushalt und politischen Entscheidungsprozessen in allen 12 Berliner Bezirken. Die bestehende Plattform war über Jahre organisch gewachsen, mit einem veralteten Frontend, eingeschränkten Benachrichtigungsfunktionen und ohne Möglichkeit für Bürger:innen, relevante Projekte in ihrer Nachbarschaft proaktiv zu entdecken. Ein grundlegendes Redesign war nötig — ohne den laufenden Betrieb für tausende aktive Teilnehmende zu unterbrechen.

Der Ansatz

Das Redesign wurde inkrementell über die Hauptanwendung (a4-meinberlin) und das gemeinsam genutzte Open-Source-Framework adhocracy4 umgesetzt, das mehrere Beteiligungsplattformen antreibt. Die Arbeit erstreckte sich über den gesamten Stack: Neue React-Komponenten ersetzten jQuery-basierte Interfaces, Django-Models wurden auf GeoDjango für räumliche Abfragen migriert, und eine Wagtail-basierte CMS-Schicht wurde für flexibles Content-Management eingeführt. Dabei wurden Barrierefreiheit (WCAG-Konformität) und mobile Responsivität als zentrale Anforderungen behandelt — jede interaktive Komponente erhielt passende ARIA-Attribute, semantisches HTML und Tastaturnavigation.

Umsetzung

Kiezradar — Projektentdeckung auf Bezirksebene: Ein neues Feature namens „Kiezradar" (jetzt „Kiezauswahl") wurde von Grund auf entwickelt. Es ermöglicht Bürger:innen, personalisierte Suchprofile basierend auf Bezirk, Kiez und Beteiligungsinteressen zu erstellen. Das Backend nutzt GeoDjangos räumliche Fähigkeiten — Projekt-, Plan- und Bauleitplan-Models wurden von einfachen JSON-Punktfeldern auf native GeoDjango-PointField-Typen migriert, was distanzbasierte Datenbankabfragen ermöglicht. Im Frontend wurde eine React-basierte Oberfläche mit Combobox-Suche, Polygon-Kartengrenzen (via MapLibre GL und Leaflet) und modalbasierter Profilverwaltung entwickelt. Suchprofile werden über Django-Signals mit neuen Projekten abgeglichen und lösen E-Mail-Benachrichtigungen über Celery-Hintergrundaufgaben aus.

Benachrichtigungssystem: Eine vollständige Benachrichtigungsinfrastruktur wurde implementiert: eine Django-Modellebene mit REST-API-Endpunkten, granulare Benachrichtigungseinstellungen pro Nutzer:in (inklusive Master-Toggles) und ein React-Frontend mit mehreren Feed-Ansichten — Interaktionen, gefolgte Projekte und Suchprofil-Treffer. Funktionen umfassen aggregierte Bewertungsbenachrichtigungen, Als-gelesen-markieren mit Race-Condition-Handling, Ungelesen-Zähler in der Navigationsleiste und Unterstützung für verschiedene Ereignistypen (Kommentare, Bewertungen, Offline-Events, Umfragen, Planabgleiche).

UI/UX-Redesign: Die visuelle Überarbeitung betraf nahezu jede nutzerseitige Oberfläche: eine neue Hero-Komponente mit integrierter Suche, neu gestaltete Projektdetailseiten mit Timelines und Insight-Statistiken, überarbeitete Modul-Kacheln mit Sortierung und Grid-Layouts, modernisierte Breadcrumb-Navigation via Custom Template Tag, ein umstrukturiertes Burger-Menü und konsistente Alert-/Card-/Button-Komponenten nach BEM-Methodologie. Das Bewertungssystem wurde in React neu geschrieben mit barrierefreiem Screen-Reader-Text und neuen Icon-Sets. CMS-Inhaltsblöcke (Wagtail) wurden für Teaser-Blöcke, Info-Leisten, Mitmach-Sektionen und Projekt-Teaser hinzugefügt — was Redakteur:innen flexible Seitengestaltungswerkzeuge bietet.

Framework-Beiträge (adhocracy4): Parallele Arbeit am gemeinsamen adhocracy4-Framework umfasste die Migration von React-Kartenkomponenten (BaseMap, AddressSearch, ChoosePointMap), den Bau eines wiederverwendbaren useCombobox-Hooks, die Modernisierung der Bewertungskomponente, verbesserte E-Mail-Anhangverwaltung und das Schreiben umfassender Python- und JavaScript-Tests für die neue Kartenschicht.

Ergebnisse

Das Redesign lieferte eine vollständig modernisierte Beteiligungsplattform: über 120 React-Komponenten, ein räumliches Suchsystem für alle Berliner Bezirke, eine Echtzeit-Benachrichtigungspipeline und eine barrierefreie, Mobile-First-Oberfläche. Die komponentenbasierte Architektur — mit geteiltem Code in adhocracy4 und projektspezifischen Erweiterungen in meinBerlin — sichert Wartbarkeit und Wiederverwendbarkeit über das gesamte Portfolio von Liquid Democracys Beteiligungsplattformen. Alle interaktiven Elemente erfüllen Barrierefreiheitsstandards mit umfassender ARIA-Unterstützung, semantischem HTML und tastaturnavigierbaren Oberflächen.