1
Zwei moderne Smartphones zeigen das „Bürgerbeteiligung“-Logo und eine interaktive Benutzeroberfläche für den Gemeinschaftsaufbau und die Bürgerbeteiligung.

iOS-Bürgerbeteiligungs-App für digitale Bürgerbeteiligung

Das Ziel: Mehr Transparenz, stärkere Bürgernähe und eine höhere Identifikation der Menschen mit ihrer Stadt.

Ein Schloss

Meine Rolle

UX/UI-Designerin:

  • Nutzerforschung & Analyse
  • Wireframing & Prototyping
  • UI-Design & Styleguide
  • Usability-Testing & Iterationen
Achtung

Tools

  • Figma
  • Sketch
  • Adobe Creative
  • Miro
Ein Schlüssel

Team

Entwickler:innen, Projektleitung, Stakeholdern aus der Stadtverwaltung
Eine stilisierte Stoppuhr mit hellviolettem Rand und grünen Zeigern vor einer abstrakten blauen Form.

Die vorhandenen Apps wurden von vielen Bürger:innen als kompliziert und wenig ansprechend empfunden. Das führte zu geringer Nutzung und schwacher Beteiligung – und genau hier begann meine Herausforderung.

Dateisuchsymbol mit einer Lupe über einem Dokument, das die Aktion der Dateisuche symbolisiert.

Durch Nutzerrecherche und Wettbewerbsanalyse konnte ich wertvolle Einblicke in die Bedürfnisse der Nutzer sowie in bestehende Apps gewinnen.

Diagramm zur Veranschaulichung der vier Schritte der Customer Journey: Bewusstsein, Überlegung, Entscheidung und Bindung.
Grafik zur Veranschaulichung der Benutzerforschung
Interviews

Qualitative Einblicke ins Nutzungsverhalten

Die häufigsten Probleme aus den Interviews habe ich zusammengefasst und in einem Balkendiagramm dargestellt:

Teilnehmer*innen:
8 Bürger*innen (18–65 Jahre).
Dauer:
ca. 20 Minuten.
Format:
Online-Videoanruf + kurze praktische Testaufgabe in der App.

Ein Balkendiagramm, das die Prozentsätze der Benutzerprobleme bei der Verwendung der App in verschiedenen demografischen Gruppen anzeigt.
Symbol einer Zwischenablage mit einem Stift, das das Notieren symbolisiert
Ein Balkendiagramm mit Emoticons, die jeweils eine Emotion darstellen und deren prozentuale Stärke durch unterschiedliche Höhen angezeigt wird.
Grafik zur Veranschaulichung der Benutzerforschung
Umfragen

Quantitative Bestätigung & Muster

Um die qualitativen Erkenntnisse aus den Interviews mit quantitativen Daten zu stützen, habe ich eine Online-Umfrage durchgeführt.

Teilnehmerzahl:
45 Bürger*innen (18–70 Jahre).
Fragebogen:
10 Fragen (Likert-Skala 1–7) zu Navigation, Verständlichkeit, Interaktivität, Barrierefreiheit und Gesamtzufriedenheit
Ziel: Nutzung, Probleme, Erwartungen erfassen

Diagramm, das die Navigationsebenen durch Balken zeigt, wobei jeder Balken einen eindeutigen Datensatz zum einfachen Vergleich darstellt.
Symbol einer Zwischenablage mit einem Stift, das das Notieren symbolisiert

60 % seltene Nutzung ·
68 % verwirrte Navigation ·
55 % wünschen Austausch ·
40 % ältere Nutzer mit Problemen Durchschnittswerte: Navigation (3.5), Interaktivität (3.8), Barrierefreiheit (3.9) – alle unter neutral (4) → deutlicher Verbesserungsbedarf.

Grafik zur Veranschaulichung der Wettbewerbsanalyse
Andere Bürger-Apps

Stärken & Schwächen bestehender Lösungen

Um die bestehenden Lösungen besser zu verstehen, habe ich zwei etablierte Bürgerbeteiligungs-Plattformen analysiert:
Decidim (Spanien, Open Source) I MeinBerlin.de (Deutschland, Senatsverwaltung Berlin)

Symbol einer Zwischenablage mit einem Stift, das das Notieren symbolisiert

Austausch und Feedback fehlen oft → Integration von Kommentaren, Likes & Push-Benachrichtigungen.
Weniger Text, mehr Icons, Module & klare Informationsblöcke.
Klare Sprache, große Buttons & barrierefreie Kontraste für ältere Zielgruppen.

Eine Illustration mit einer Glühbirne und einer Sanduhr, die Ideen symbolisieren

Auf Basis der Pain Points entwickelte ich erste Konzeptideen und Wireframes. Durch Feedback und Tests wurden die Ansätze schrittweise verfeinert.

Ein Diagramm, das die vier wesentlichen Schritte zum Erreichen einer erfolgreichen Benutzererfahrung darstellt: User Flow, Designsystem, High-Fidelity-Prototyp, Testen.
Grafik zur Veranschaulichung der User Flow
Im User Flow habe ich dargestellt, wie Bürger:innen an einer Abstimmung teilnehmen – von der Auswahl eines Projekts über die Stimmabgabe bis hin zur Einsicht der Ergebnisse. Der Flow macht den Entscheidungsprozess transparent und für alle nachvollziehbar.
Visuelle Darstellung eines User Flows, die den Ablauf und die Interaktionen verschiedener Schritte detailliert beschreibt.
Grafik zur Veranschaulichung der Design-System
Durch die Erstellung des Design Systems konnte ich eine konsistente App gestalten, die Verwirrung sowohl bei Entwickler:innen als auch bei Nutzer:innen reduziert. Dadurch bleibt mehr Fokus auf dem eigentlichen Produkt und den Lösungen.(Ein Teil des gesamten Systems.)
Farbpalette für ein Designsystem mit einer harmonischen Mischung aus Farbtönen und Schattierungen für visuelle Designkonsistenz.
Texte und Buttons in unterschiedlichen Größen und Farben für ein Designsystem mit einer harmonischen Mischung aus Farbtönen und Schattierungen für eine visuelle Designkonsistenz.
Grafik zur Veranschaulichung der High-Fidelity und Usability-Test
Im High-Fidelity-Design habe ich die finalen Layouts, Interaktionen und visuelle Sprache der App ausgearbeitet. Anschließend führte ich Usability-Tests durch, um die Nutzerfreundlichkeit zu überprüfen.
 Das Feedback zeigte, dass die Registrierung zu Beginn viele Nutzer:innen abschreckte – daher wurde dieser Schritt entfernt.
 Zusätzlich habe ich Filterfunktionen hinzugefügt, um Themen leichter auffindbar zu machen.
 Auf Basis der Tests identifizierte ich weitere Verbesserungen wie die Vereinfachung der Navigation, die Reduzierung von Formularfeldern und die Einführung klarer Call-to-Action-Buttons.
Drei Personen setzen große Puzzleteile zusammen, wobei eine Person auf einer Leiter steht und die anderen die Teile halten, vor einem einfachen, farbenfrohen Hintergrund.

Meine Lösungen

Zwei Smartphones zeigen eine Community-Umfrage-App mit Schwerpunkt auf der Entwicklung von Grünflächen und lokalen Nachrichten-Updates.
BürgerInnen stimmen über eingereichte Ideen anderer ab, wobei die besten Vorschläge von der Kommune umgesetzt werden.
Auf dem Bildschirm eines Smartphones ist eine Feedback-App mit Nutzermeinungen zu den Themen Kindergarten, Café-Außensitzplätze und Vogelschutz zu sehen, jeweils beschriftet und datiert.
BürgerInnen können eigene Vorschläge und Meinungen einreichen und diese zur Abstimmung stellen.
Grafik zur öffentlichen Meinung zur Grünflächengestaltung in der Venloer Straße: Spielplatz (65 %), Hundewiese (10 %), Sitzpark (8 %), Blumenwiese (4 %).
Klare und verständliche Grafiken und Informationen, um die Ergebnisse von Abstimmungen und Diskussionen darzustellen.
Screenshot einer mobilen App, die neue Benachrichtigungen, einschließlich Chat, Umfragen und Nachrichtenaktualisierungen in einem übersichtlichen Layout anzeigt.
Übersicht eigener Beiträge, Meinungen und Benachrichtigungen.- Anpassung der Einstellungen.
Mobile App-Oberfläche mit den Kontaktdaten des Bürgeramts Ehrenfeld, der Stadt Köln und einem stilisierten Gebäudesymbol.
Eine direkte Kommunikationsmöglichkeit mit Kommunen und Verwaltungen für Fragen oder Feedback.
Zwei Smartphones zeigen eine mobile App-Oberfläche mit Filtern für Kategorien wie Umwelt, Familie und Gesundheitsdienste.
Ein Umfeld- und Zeitfilter ermöglicht BürgerInnen, Nachrichten und Themen einfach nach persönlichen Interessen und Zeiträumen zu sortieren.
Eine Rakete schwebt über einem Laptop-Bildschirm und symbolisiert Innovation und Technologie in einer dynamischen digitalen Umgebung.

Die überarbeitete Bürgerbeteiligungs-App führte zu messbaren Verbesserungen in der Nutzung und Akzeptanz:

- Verbesserte Nutzerfreundlichkeit:
Klar strukturierte Navigation → 95 % der Nutzer*innen fanden Inhalte schneller.
Vereinfachte Formulare → -50 % Abbruchrate bei Anliegen-Einreichungen.

- Positives Feedback:
Bürger*innen bewerteten die App als einfacher, transparenter und inklusiver.
Projektleitung lobte die klare Struktur und die gestiegene Akzeptanz in unterschiedlichen Altersgruppen.

- Beispielhafte Wirkung:
Die App entwickelte sich von einer schwer zugänglichen Plattform hin zu einem intuitiven, inklusiven Tool für Bürgerdialog und Mitgestaltung.

Klemmbrett mit einer Checkliste und einer Glühbirne, das Planung und Kreativität bei der Problemlösung veranschaulicht.

Durch die Arbeit an der Bürgerbeteiligungs-App habe ich wichtige Erkenntnisse für meine Rolle als UX/UI-Designerin gewonnen:
- Nutzerfeedback in frühen Phasen spart Zeit und verhindert Fehlentwicklungen.
- Reduzierte Formulare und klare Navigation steigern die Zufriedenheit deutlich.
- Bürger*innen beteiligen sich aktiver, wenn sie Kommentare, Likes oder direkte Rückmeldungen geben können.
- Barrierefreiheit und altersgerechtes Design sind Schlüsselfaktoren für breite Akzeptanz.

Persönlich habe ich gelernt, wie wichtig es ist, Design-Entscheidungen datenbasiert zu validieren und die Nutzer*innen konsequent in den Mittelpunkt zu stellen.

Ein farbenfrohes Portfolio-Cover für Behnaz Hatami, eine Web- & UX/UI-Designerin, mit geometrischen Formen und markanter Typografie.

Ich liebe es, durch kreative Problemlösungen beeindruckende digitale Erlebnisse zu gestalten. Lade meine Portfolio-Mappe herunter, um mehr über meine Erfahrung, Projekte und Designphilosophie zu erfahren.