Interaktive Web-Anwendung zur Darstellung politischer Prozesse

Laufzeit
2026
Kund*in
Gestaltungszentrale Politik e. V.
Branche
Bildung und Gesellschaft
Links
Technologien
  • Inertia.js
  • Laravel
  • React
  • Statamic
  • Tailwind CSS
  • Meilisearch
  • Docker
  • PHP
  • TypeScript
  • Ansible
  • CSS
  • Docker Compose
  • Git
  • GitLab
  • GitLab CI
  • HTML
  • nginx
  • npm
  • Vite
  • Blade
  • PHPUnit

Ein digitales Tool, mit dem politische Zusammenhänge einfach und interaktiv erkundet werden können: Mit mappp haben wir Pionierarbeit geleistet. In Zusammenarbeit mit der Gestaltungszentrale Politik e. V. entstand ein Werkzeug, das demokratische Teilhabe fördert.

Die Ausgangssituation

Wie entstehen Gesetze? Und wie kann man sich abseits von Wahlen in die Politik einbringen? Mehr als die Hälfte der 16–30-Jährigen in Deutschland kann diese Fragen nicht beantworten (1). Beteiligungsmöglichkeiten sind unklar, das Vertrauen ins Parlament schwächelt (2, 3). Kein gutes Fundament für Demokratie – und der Hauptgrund, warum wir die Herausforderung, einen interaktiven Atlas für politische Bildung zu schaffen, angenommen haben.

Die Zusammenarbeit mit visuellverstehen war von Anfang an geprägt von einem gemeinsamen Werteverständnis.

Philipp Cartier – Initiator und Leitung der Gestaltungszentrale Politik e. V.

Die Lösung

Nachdem die Gestaltungszentrale Politik e. V. Inhalte und Design erarbeitet hatte – Letzteres stammt von Leon Held –, stiegen wir in unsere eigene Recherche ein: Mit welchen Technologien muss ein so komplexes Thema umgesetzt werden, damit es verschiedene Zielgruppen zum Erkunden einlädt? Angesprochen werden sollten Spitzenbeamte genauso wie Schulkinder. Ein vergleichbares Produkt existierte noch nicht.

Die Umsetzung

Entwickelt haben wir den digitalen Atlas als Flussdiagramm, das Abläufe und Zuständigkeiten dynamisch visualisiert. Bei der Benutzung kann stufenlos gezoomt werden, verschiedene Modi und Funktionen erweitern die Interaktionsmöglichkeiten. Nutzer*innen wählen selbst die Bereiche, die sie interessieren, und den gewünschten Detailgrad.

Verwendete Technologien

Realisiert haben wir das mit dem Content-Management-System Statamic und Laravel als Backend-Framework mit Inertia.js und React als Frontend. Zentral ist außerdem die Bibliothek React Flow, die das Fundament für die Darstellung und Bedienung des Flussdiagramms bereitstellt.

Die redaktionelle Pflege der Inhalte geschieht komfortabel über Statamic: Texte und Seiten können formatiert und verlinkt werden, die Position und Gestaltung von Knoten und Verbindungslinien lässt sich flexibel anpassen. Da kein Gesetzgebungsverfahren dem anderen gleicht, brauchte es maximale Freiheit. Und die haben wir geliefert.

Möchten Sie von YouTube bereitgestellte externe Inhalte laden?

Gemeisterte Herausforderungen

Die inhaltliche und technische Komplexität des Projekts war auch dadurch bedingt, dass es bei einem so neuartigen Vorhaben keine Beispiele gab, an denen wir uns orientieren konnten. Experimente, Recherche und enge Absprachen waren unabdingbar.

Besonders wichtig war uns, dass mappp reibungslos läuft: schnelle Ladezeiten und eine flüssige Bedienung bilden bei einem solchen Tool die Basis der Nutzer*innen-Erfahrung. Und das muss trotz des immensen inhaltlichen Umfangs auf verschiedenen Geräten und Browsern funktionieren.

Die Vision, die wir hatten, war ambitioniert, aber das Team von visuellverstehen hat sich auch auf die wildesten Ideen eingelassen, sie kritisch reflektiert und ihre Umsetzung ermöglicht.

Philipp Cartier – Initiator und Leitung der Gestaltungszentrale Politik e. V.

Ergebnis und Impact

Das Interesse am Atlas für Politik, Prozesse und Partizipation ist groß, die Resonanz überwältigend. Lehrkräfte binden mappp im Unterricht ein, Beamte und Politiker*innen reflektieren damit ihre Arbeit und Vertreter*innen von Initiativen freuen sich über ein Mittel, mit dem sie Projekte planen können. Ein voller Erfolg, und ein gesellschaftlicher Mehrwert, den wir gerne mitgestaltet haben.

Quellenverzeichnis

  1. Vodafone Stiftung Deutschland gGmbH, Börsch-Supan, J., Börsch-Supan, J., Spang, E., & Schubert, L. (2022). Hört uns zu! Wie junge Menschen die Politik in Deutschland und die Vertretung ihrer Interessen wahrnehmen. Vodafone Stiftung Deutschland. vodafone-stiftung.de

  2. TUI Stiftung. (2024). Junges Europa 2024 – Die Jugendstudie der TUI Stiftung. TUI Stiftung. tui-stiftung.de

  3. Bertelsmann Stiftung, McDonnell, S., Döbele, C., Feldmann, D., & von Görtz, R. (2024). genNow: Junges Engagement für sozialen Wandel. Ergebnisse einer Befragung junger Menschen zu politischen Einstellungen und politischem Engagement. Bertelsmann Stiftung. doi.org

Partnerschaften und Auszeichnungen

  • Bilanziert
  • Überdurchschnittlich
  • Veröffentlicht
  • Mitglied
  • Klimakompensiert
  • Mitglied
  • Official
  • Official
  • Integrativ