Zurück zum Portfolio
UI/UX Portfolio
2026
Mobile App Design
BürgerApp —
Behörden neu gedacht
Eine KI-gestützte Behörden-App die Bürgerinnen durch komplexe Verwaltungsprozesse führt – ohne Wartezimmer, ohne Formulardschungel, ohne Frust.
Interaction Design
User Experience Research
Visual Communication
Prototyping and Wireframing
Usability Testing
Information Architecture
01 Das ProBlem
Behörden sind digital gescheitert
Bestehende Behörden-Apps und Portale zwingen Bürgerinnen dazu, zuerst den richtigen Verwaltungsakt zu kennen, bevor sie überhaupt mit dem Prozess beginnen können. Das Ergebnis: Millionen Menschen stehen vor geschlossenen Türen – digital wie physisch.
Die Kernfrage war: Warum muss ein Bürger wissen, wie die Behörde denkt? Stattdessen sollte die App den Bürger verstehen – sein Problem, seine Situation, seinen nächsten Schritt.
73%
der Deutschen brechen Online-Behördengänge ab weil sie den richtigen Antrag nicht finden
4,2h
Durchschnittliche Zeit die Bürger pro Behördengang aufwenden – inklusive Recherche und Wartezeit
0,0
Dienste die proaktiv erkennen wenn Folgeprozesse notwendig werden
02 Persona
Lena Reincke29, Grafikdesignerin
Freelancerin, gerade innerhalb Hamburgs umgezogen. Technikaffin, aber keine Erfahrung mit Behördenprozessen. Sie weiß, dass sie sich ummelden muss – aber nicht was danach kommt.
Lena Reincke
29 Jahre · Freiberufliche Grafikdesignerin · Hamburg
Alte Adresse
Bahrenfelder Straße 23
26524 Hamburg-Altona
Neue Adresse
Stellinger Weg 1420255 Hamburg-Eimsbüttel
20255 Hamburg-Eimsbüttel
Fahrzeug
VW Golf · HH-LR 2291
Noch nicht umgemeldet
Reisepass
Läuft ab: 14. März 2026
Reise geplant: August 2026
Ziel
Alle Ummeldungs-Formalitäten
ohne Stress erledigen
Frustration
Weiß nicht was sie nicht weiß –
fehlende Schritte kosten Zeit
03 Information Architecture
Sitemap
& Navigationsstruktur
Die App ist um fünf klare Bereiche organisiert. Der KI-Assistent steht im Mittelpunkt der Navigation – er ist kein Feature, sondern der primäre Einstiegspunkt.
04 Design Kontext
Drei Prinzipien,
eine Lösung
Das Konzept bricht mit der klassischen Behörden-Logik. Statt Bürger durch Kategorien zu führen, versteht die App das Problem – und übernimmt die Orientierung.
🤖
KI statt Kategorie
Kein Dienste-Menü. Keine Kategorien. Die KI versteht natürlichsprachige Fragen und generiert einen personalisierten Schritt-Plan – direkt aus dem Chat heraus.
✅
Checkliste statt Formular
Jeder Vorgang wird zur interaktiven Checkliste. Jeder Punkt erklärt sich selbst via Drawer – was, warum, wie. Nutzer arbeiten im eigenen Tempo, ohne etwas zu vergessen.
🔮
Proaktiv statt reaktiv
Smart Vorschläge erkennen Folgeprozesse automatisch. Nach der Ummeldung fragt die App: "Fahrzeug auch schon umgemeldet?" Kein Wissen vorausgesetzt.
05 User Flows
Drei Flows,
eine Geschichte
Alle drei Use Cases spielen sich in Lenas Leben ab – sie bauen aufeinander auf und zeigen die volle Bandbreite der App.
Flow 02
Anträge stellen · Ummeldung innerhalb Hamburgs
Lena zieht von Altona nach Eimsbüttel – und weiß nicht was sie alles erledigen muss
✦ KI-Stärke: Führt durch unbekannten Prozess · erkennt fehlende Dokumente · generiert Vermieter-Mail
KI-Chat
“Ich bin umgezogen...”
KI-Antwort
Plan + CTA
Termin buchen
Verlauf/Timeline
Bestätigung
Checkliste
Nachrichten
Fr. Müller
Postfach
Bestätigung
Schritt 01 · BürgerAssist
Fragen statt
suchen
Lena tippt ihr Problem in natürlicher Sprache ein – kein Formular, keine Kategorien. BürgerAssist versteht den Kontext und generiert sofort einen personalisierten Schritt-Plan mit allen notwendigen Aufgaben.
KI-Moment: Die App erkennt „umgezogen" und weiß automatisch, dass Ummeldung, Fahrzeug und Adressänderungen zusammengehören.
Schritt 02 · Vorgang / Verlauf
Prozess-Transparenz
auf einen Blick
Der Vorgang-Tab „Verlauf" zeigt Lena wo sie im Prozess steht – als vertikale Timeline mit farbcodierten Status-Punkten. Rot bedeutet Handlungsbedarf, Grün ist abgeschlossen, Grau ist ausstehend.
Design-Entscheidung: Der Default-Tab wechselt kontextabhängig – bei offenen Aufgaben öffnet der Vorgang direkt auf „Aufgaben", nicht auf „Verlauf".
Schritt 03 · Vorgang / Aufgaben
Checkliste mit
In-Context Drawer
Jeder Punkt der Checkliste öffnet bei Klick einen Bottom Drawer – kein Seitenwechsel, kein Kontextverlust. Der Drawer erklärt was zu tun ist, warum es nötig ist, und ermöglicht die direkte Aktion (Upload, Formular, Link).
Interaction Pattern: Gesperrte Aufgaben werden erst freigeschaltet wenn der vorherige Schritt abgeschlossen ist – Progressive Disclosure verhindert Überforderung.
Schritt 04 · Vorgang / Nachrichten
Direkter Draht zum
Sachbearbeiter
Im Nachrichten-Tab kommuniziert Lena direkt mit Fr. Karola Müller vom Einwohnermeldeamt – im Kontext ihres Vorgangs. Kein Telefon, keine E-Mail, kein erneutes Erklären des Anliegens.
Unterschied zu globalem Postfach: Nachrichten hier sind kontextbezogen auf diesen Vorgang. Das globale Postfach zeigt alle Behördenkommunikation aggregiert.
Flow 02
Termine buchen · KFZ-Ummeldung
BürgerAssist erkennt proaktiv den nächsten notwendigen Schritt – ohne dass Lena danach fragen muss
✦ KI-Stärke: Proaktiver Smart Vorschlag · Kennzeichen behalten · Terminbuchung mit Kalender
Smart Vorschlag
Dashboard ✦ AI
KI-Chat
Zulassungsstelle
Termin buchen
Kalender-Auswahl
Bestätigung
Zusammenfassung
Postfach
Terminbestätigung
Schritt 01 · Dashboard / Smart Vorschläge
Die App denkt
voraus
Nach Abschluss der Ummeldung erscheint automatisch ein Smart Vorschlag auf dem Dashboard: „KFZ-Zulassung · Nicht gestartet". Die KI erkennt durch das Profil, dass Lena ein Fahrzeug hat – und dass der nächste Schritt fällig ist.
Kein Wissen vorausgesetzt: Lena muss nicht wissen, dass sie das KFZ nach dem Umzug ummelden muss. Die App erinnert proaktiv – das ist der zentrale Mehrwert.
Schritt 02 · KI-Chat / KFZ
Kennzeichen behalten –
KI weiß es
BürgerAssist erklärt nicht nur den Prozess, sondern gibt kontextbezogene Tipps: Da Lena innerhalb Hamburgs umgezogen ist, kann sie ihr Kennzeichen HH-LR 2291 behalten. Kein unnötiger Gang zur Zulassungsstelle für neue Schilder.
KI-Mehrwert: Diese Information findet Lena sonst nur nach langem Suchen auf Behördenseiten. Die App liefert sie proaktiv im richtigen Moment.
Schritt 03 · Termin buchen
Termin in zwei Schritten
gebucht
Der Kalender zeigt Verfügbarkeit auf einen Blick: blaue Punkte bedeuten viele freie Termine, orangene wenige. Lena wählt Tag und Uhrzeit – danach kommt ein Bestätigungsscreen mit Mitzubringen-Liste.
Alternativ-Flow: BürgerAssist schlägt den nächsten freien Termin direkt im Chat vor. „Anderen Termin wählen" öffnet erst dann diesen Kalender-Screen.
Flow 02
Status prüfen · Reisepass Erneuerung
Die KI warnt Lena proaktiv – ihr Pass läuft in 4 Monaten ab, die Reise ist in 3 Monaten geplant
✦ KI-Stärke: Frist-Erkennung · Konsequenz-Warnung · Express-Empfehlung · Termin direkt gebucht
Smart Vorschlag
Läuft bald ab
KI-Chat
Frist Warnung
Termin wählen
Kalender-Auswahl
Bestätigung
Checkliste
Postfach
Terminbestätigung
KI-Empfehlung
Express
Schritt 01 · KI-Chat / Reisepass
KI warnt vor
Konsequenzen
Lena fragt ob ihr Pass für die Kanada-Reise in 3 Monaten reicht. BürgerAssist erkennt sofort: Die Kombination aus Restlaufzeit (4 Monate) und Bearbeitungszeit (4–6 Wochen) ist kritisch. Keine Behördenseite würde diese Verbindung herstellen.
Der stärkste KI-Moment des gesamten Projekts: Die App denkt nicht nur mit – sie warnt vor einem Fehler den Lena noch nicht gemacht hat. Das ist echter Mehrwert.
Schritt 02 · Postfach · Alle 3 Flows
Das Postfach als
Abschluss der Journey
Am Ende aller drei Flows zeigt das Postfach die gesamte Behördenkommunikation auf einen Blick: Ummeldungsbestätigung, KFZ-Terminbestätigung und Reisepass-Terminbestätigung. Die vollständige User Journey sichtbar in einem Screen.
Stärkster Portfolio-Moment: Dieser Screen zeigt dass alle drei Flows zusammengehören – Lenas Geschichte wird in einem einzigen Postfach erzählt.
06 Screen Inventar
Alle Screens im Überblick
01
Start · Dashboard
Alle Flows
02
KI-Assistent · Start
Alle Flows
03
KI-Chat · Ummeldung
Flow 01
04
KI-Chat · KFZ
Flow 02
05
KI-Chat · Reisepass
Flow 03
06
Meine Vorgänge
Alle Flows
07
Vorgang · Verlauf
Flow 01 + 02
08
Vorgang · Aufgaben
Flow 01 + 03
09
Vorgang · Nachrichten
Flow 01 + 02
10
Vorgang · Info/Standort
Flow 02
11
Kalender
Flow 02 + 03
12
Termin · Bestätigung
Flow 02 + 03
13
Postfach · Übersicht
Alle Flows
14
Postfach · Nachrichten
Flow 01 + 02
15
Postfach · Bescheide
Alle Flows
16
Postfach · KI-Chats
Alle Flows
17
Profil
Alle Flows
18
KI-Chat · Leer / Start
Alle Flows
07 Was dieses Projekt zeigt
Design,das Probleme löst
🧭
Systems Thinking
Sitemap, Navigation, Komponenten-Hierarchie und Informationsarchitektur sind als kohärentes System entworfen – nicht als Sammlung einzelner Screens.
🤖
AI-First UX
Der KI-Assistent ist kein Add-on – er ist der primäre Einstiegspunkt. Das Konzept zeigt wie proaktive KI Behörden-UX fundamental verändern kann.
🔗
Connected User Journeys
Drei Use Cases die aufeinander aufbauen und eine echte Geschichte erzählen. Lenas Reise von der Ummeldung bis zum Reisepass ist ein durchgehender Flow – kein Demo.
📐
Component Design
Wiederverwendbare Komponenten mit klarer Benennung: List Item/Navigable, List Item/Toggle, Badge/Success, Filter Bar/Item. Skalierbar und konsistent.
💬
Interaction Design
Drawer-Pattern, kontextabhängige Default-Tabs, Progressive Disclosure in der Checkliste – jede Interaktionsentscheidung hat ein „Warum" dahinter.
🇩🇪
Real-World Kontext
Echte Hamburger Adressen, echte Gesetze (§ 17, § 19 BMG), echte Bearbeitungszeiten und echte Kosten. Kein generischer Placeholder-Content.
Zurück zum Portfolio
Zurück zum Portfolio
UI/UX Portfolio
2026
Mobile App Design
BürgerApp —
Behörden neu gedacht
Eine KI-gestützte Behörden-App die Bürgerinnen durch komplexe Verwaltungsprozesse führt – ohne Wartezimmer, ohne Formulardschungel, ohne Frust.
Interaction Design
User Experience Research
Visual Communication
Prototyping and Wireframing
Usability Testing
Information Architecture
01 Das ProBlem
Behörden sind digital gescheitert
Bestehende Behörden-Apps und Portale zwingen Bürgerinnen dazu, zuerst den richtigen Verwaltungsakt zu kennen, bevor sie überhaupt mit dem Prozess beginnen können. Das Ergebnis: Millionen Menschen stehen vor geschlossenen Türen – digital wie physisch.
Die Kernfrage war: Warum muss ein Bürger wissen, wie die Behörde denkt? Stattdessen sollte die App den Bürger verstehen – sein Problem, seine Situation, seinen nächsten Schritt.
73%
der Deutschen brechen Online-Behördengänge ab weil sie den richtigen Antrag nicht finden
4,2h
Durchschnittliche Zeit die Bürger pro Behördengang aufwenden – inklusive Recherche und Wartezeit
0,0
Dienste die proaktiv erkennen wenn Folgeprozesse notwendig werden
02 Persona
Lena Reincke29, Grafikdesignerin
Freelancerin, gerade innerhalb Hamburgs umgezogen. Technikaffin, aber keine Erfahrung mit Behördenprozessen. Sie weiß, dass sie sich ummelden muss – aber nicht was danach kommt.
Lena Reincke
29 Jahre · Freiberufliche Grafikdesignerin · Hamburg
Alte Adresse
Bahrenfelder Straße 23
26524 Hamburg-Altona
Neue Adresse
Stellinger Weg 1420255 Hamburg-Eimsbüttel
20255 Hamburg-Eimsbüttel
Fahrzeug
VW Golf · HH-LR 2291
Noch nicht umgemeldet
Reisepass
Läuft ab: 14. März 2026
Reise geplant: August 2026
Ziel
Alle Ummeldungs-Formalitäten
ohne Stress erledigen
Frustration
Weiß nicht was sie nicht weiß –
fehlende Schritte kosten Zeit
03 Information Architecture
Sitemap
& Navigationsstruktur
Die App ist um fünf klare Bereiche organisiert. Der KI-Assistent steht im Mittelpunkt der Navigation – er ist kein Feature, sondern der primäre Einstiegspunkt.
04 Design Kontext
Drei Prinzipien,
eine Lösung
Das Konzept bricht mit der klassischen Behörden-Logik. Statt Bürger durch Kategorien zu führen, versteht die App das Problem – und übernimmt die Orientierung.
🤖
KI statt Kategorie
Kein Dienste-Menü. Keine Kategorien. Die KI versteht natürlichsprachige Fragen und generiert einen personalisierten Schritt-Plan – direkt aus dem Chat heraus.
✅
Checkliste statt Formular
Jeder Vorgang wird zur interaktiven Checkliste. Jeder Punkt erklärt sich selbst via Drawer – was, warum, wie. Nutzer arbeiten im eigenen Tempo, ohne etwas zu vergessen.
🔮
Proaktiv statt reaktiv
Smart Vorschläge erkennen Folgeprozesse automatisch. Nach der Ummeldung fragt die App: "Fahrzeug auch schon umgemeldet?" Kein Wissen vorausgesetzt.
05 User Flows
Drei Flows,
eine Geschichte
Alle drei Use Cases spielen sich in Lenas Leben ab – sie bauen aufeinander auf und zeigen die volle Bandbreite der App.
Flow 02
Anträge stellen · Ummeldung innerhalb Hamburgs
Lena zieht von Altona nach Eimsbüttel – und weiß nicht was sie alles erledigen muss
✦ KI-Stärke: Führt durch unbekannten Prozess · erkennt fehlende Dokumente · generiert Vermieter-Mail
KI-Chat
“Ich bin umgezogen...”
KI-Antwort
Plan + CTA
Termin buchen
Verlauf/Timeline
Bestätigung
Checkliste
Nachrichten
Fr. Müller
Postfach
Bestätigung
Schritt 01 · BürgerAssist
Fragen statt
suchen
Lena tippt ihr Problem in natürlicher Sprache ein – kein Formular, keine Kategorien. BürgerAssist versteht den Kontext und generiert sofort einen personalisierten Schritt-Plan mit allen notwendigen Aufgaben.
KI-Moment: Die App erkennt „umgezogen" und weiß automatisch, dass Ummeldung, Fahrzeug und Adressänderungen zusammengehören.
Schritt 03 · Vorgang / Aufgaben
Checkliste mit
In-Context Drawer
Jeder Punkt der Checkliste öffnet bei Klick einen Bottom Drawer – kein Seitenwechsel, kein Kontextverlust. Der Drawer erklärt was zu tun ist, warum es nötig ist, und ermöglicht die direkte Aktion (Upload, Formular, Link).
Interaction Pattern: Gesperrte Aufgaben werden erst freigeschaltet wenn der vorherige Schritt abgeschlossen ist – Progressive Disclosure verhindert Überforderung.
Schritt 02 · Vorgang / Verlauf
Prozess-Transparenz
auf einen Blick
Der Vorgang-Tab „Verlauf" zeigt Lena wo sie im Prozess steht – als vertikale Timeline mit farbcodierten Status-Punkten. Rot bedeutet Handlungsbedarf, Grün ist abgeschlossen, Grau ist ausstehend.
Design-Entscheidung: Der Default-Tab wechselt kontextabhängig – bei offenen Aufgaben öffnet der Vorgang direkt auf „Aufgaben", nicht auf „Verlauf".
Schritt 04 · Vorgang / Nachrichten
Direkter Draht zum
Sachbearbeiter
Im Nachrichten-Tab kommuniziert Lena direkt mit Fr. Karola Müller vom Einwohnermeldeamt – im Kontext ihres Vorgangs. Kein Telefon, keine E-Mail, kein erneutes Erklären des Anliegens.
Unterschied zu globalem Postfach: Nachrichten hier sind kontextbezogen auf diesen Vorgang. Das globale Postfach zeigt alle Behördenkommunikation aggregiert.
Flow 02
Termine buchen · KFZ-Ummeldung
BürgerAssist erkennt proaktiv den nächsten notwendigen Schritt – ohne dass Lena danach fragen muss
✦ KI-Stärke: Proaktiver Smart Vorschlag · Kennzeichen behalten · Terminbuchung mit Kalender
Smart Vorschlag
Dashboard ✦ AI
KI-Chat
Zulassungsstelle
Termin buchen
Kalender-Auswahl
Bestätigung
Zusammenfassung
Postfach
Terminbestätigung
Schritt 01 · Dashboard / Smart Vorschläge
Die App denkt
voraus
Nach Abschluss der Ummeldung erscheint automatisch ein Smart Vorschlag auf dem Dashboard: „KFZ-Zulassung · Nicht gestartet". Die KI erkennt durch das Profil, dass Lena ein Fahrzeug hat – und dass der nächste Schritt fällig ist.
Kein Wissen vorausgesetzt: Lena muss nicht wissen, dass sie das KFZ nach dem Umzug ummelden muss. Die App erinnert proaktiv – das ist der zentrale Mehrwert.
Schritt 03 · Termin buchen
Termin in zwei Schritten
gebucht
Der Kalender zeigt Verfügbarkeit auf einen Blick: blaue Punkte bedeuten viele freie Termine, orangene wenige. Lena wählt Tag und Uhrzeit – danach kommt ein Bestätigungsscreen mit Mitzubringen-Liste.
Alternativ-Flow: BürgerAssist schlägt den nächsten freien Termin direkt im Chat vor. „Anderen Termin wählen" öffnet erst dann diesen Kalender-Screen.
Schritt 02 · KI-Chat / KFZ
Kennzeichen behalten –
KI weiß es
BürgerAssist erklärt nicht nur den Prozess, sondern gibt kontextbezogene Tipps: Da Lena innerhalb Hamburgs umgezogen ist, kann sie ihr Kennzeichen HH-LR 2291 behalten. Kein unnötiger Gang zur Zulassungsstelle für neue Schilder.
KI-Mehrwert: Diese Information findet Lena sonst nur nach langem Suchen auf Behördenseiten. Die App liefert sie proaktiv im richtigen Moment.
Flow 02
Status prüfen · Reisepass Erneuerung
Die KI warnt Lena proaktiv – ihr Pass läuft in 4 Monaten ab, die Reise ist in 3 Monaten geplant
✦ KI-Stärke: Frist-Erkennung · Konsequenz-Warnung · Express-Empfehlung · Termin direkt gebucht
Smart Vorschlag
Läuft bald ab
KI-Chat
Frist Warnung
KI-Empfehlung
Express
Termin wählen
Kalender-Auswahl
Bestätigung
Checkliste
Postfach
Terminbestätigung
Schritt 01 · KI-Chat / Reisepass
KI warnt vor
Konsequenzen
Lena fragt ob ihr Pass für die Kanada-Reise in 3 Monaten reicht. BürgerAssist erkennt sofort: Die Kombination aus Restlaufzeit (4 Monate) und Bearbeitungszeit (4–6 Wochen) ist kritisch. Keine Behördenseite würde diese Verbindung herstellen.
Der stärkste KI-Moment des gesamten Projekts: Die App denkt nicht nur mit – sie warnt vor einem Fehler den Lena noch nicht gemacht hat. Das ist echter Mehrwert.
Schritt 02 · Postfach · Alle 3 Flows
Das Postfach als
Abschluss der Journey
Am Ende aller drei Flows zeigt das Postfach die gesamte Behördenkommunikation auf einen Blick: Ummeldungsbestätigung, KFZ-Terminbestätigung und Reisepass-Terminbestätigung. Die vollständige User Journey sichtbar in einem Screen.
Stärkster Portfolio-Moment: Dieser Screen zeigt dass alle drei Flows zusammengehören – Lenas Geschichte wird in einem einzigen Postfach erzählt.
06 Screen Inventar
Alle Screens im Überblick
01
Start · Dashboard
Alle Flows
02
KI-Assistent · Start
Alle Flows
03
KI-Chat · Ummeldung
Flow 01
04
KI-Chat · KFZ
Flow 02
05
KI-Chat · Reisepass
Flow 03
06
Meine Vorgänge
Alle Flows
07
Vorgang · Verlauf
Flow 01 + 02
08
Vorgang · Aufgaben
Flow 01 + 03
09
Vorgang · Nachrichten
Flow 01 + 02
10
Vorgang · Info/Standort
Flow 02
11
Kalender
Flow 02 + 03
12
Termin · Bestätigung
Flow 02 + 03
13
Postfach · Übersicht
Alle Flows
14
Postfach · Nachrichten
Flow 01 + 02
15
Postfach · Bescheide
Alle Flows
16
Postfach · KI-Chats
Alle Flows
17
Profil
Alle Flows
18
KI-Chat · Leer / Start
Alle Flows
07 Was dieses Projekt zeigt
Design,das Probleme löst
🧭
Systems Thinking
Sitemap, Navigation, Komponenten-Hierarchie und Informationsarchitektur sind als kohärentes System entworfen – nicht als Sammlung einzelner Screens.
🤖
AI-First UX
Der KI-Assistent ist kein Add-on – er ist der primäre Einstiegspunkt. Das Konzept zeigt wie proaktive KI Behörden-UX fundamental verändern kann.
📐
Component Design
Wiederverwendbare Komponenten mit klarer Benennung: List Item/Navigable, List Item/Toggle, Badge/Success, Filter Bar/Item. Skalierbar und konsistent.
🔗
Connected User Journeys
Drei Use Cases die aufeinander aufbauen und eine echte Geschichte erzählen. Lenas Reise von der Ummeldung bis zum Reisepass ist ein durchgehender Flow – kein Demo.
💬
Interaction Design
Drawer-Pattern, kontextabhängige Default-Tabs, Progressive Disclosure in der Checkliste – jede Interaktionsentscheidung hat ein „Warum" dahinter.
🇩🇪
Real-World Kontext
Echte Hamburger Adressen, echte Gesetze (§ 17, § 19 BMG), echte Bearbeitungszeiten und echte Kosten. Kein generischer Placeholder-Content.
Zurück zum Portfolio
Zurück zum Portfolio
UI/UX Portfolio
2026
Mobile App Design
BürgerApp —
Behörden neu gedacht
Eine KI-gestützte Behörden-App die Bürgerinnen durch komplexe Verwaltungsprozesse führt – ohne Wartezimmer, ohne Formulardschungel, ohne Frust.
Interaction Design
User Experience Research
Visual Communication
Prototyping and Wireframing
Usability Testing
Information Architecture
01 Das ProBlem
Behörden sind digital gescheitert
Bestehende Behörden-Apps und Portale zwingen Bürgerinnen dazu, zuerst den richtigen Verwaltungsakt zu kennen, bevor sie überhaupt mit dem Prozess beginnen können. Das Ergebnis: Millionen Menschen stehen vor geschlossenen Türen – digital wie physisch.
Die Kernfrage war: Warum muss ein Bürger wissen, wie die Behörde denkt? Stattdessen sollte die App den Bürger verstehen – sein Problem, seine Situation, seinen nächsten Schritt.
73%
der Deutschen brechen Online-Behördengänge ab weil sie den richtigen Antrag nicht finden
4,2h
Durchschnittliche Zeit die Bürger pro Behördengang aufwenden – inklusive Recherche und Wartezeit
0,0
Dienste die proaktiv erkennen wenn Folgeprozesse notwendig werden
02 Persona
Lena Reincke29, Grafikdesignerin
Freelancerin, gerade innerhalb Hamburgs umgezogen. Technikaffin, aber keine Erfahrung mit Behördenprozessen. Sie weiß, dass sie sich ummelden muss – aber nicht was danach kommt.
Lena Reincke
29 Jahre · Freiberufliche Grafikdesignerin · Hamburg
Alte Adresse
Bahrenfelder Straße 23
26524 Hamburg-Altona
Neue Adresse
Stellinger Weg 14
20255 Hamburg-Eimsbüttel
Fahrzeug
VW Golf · HH-LR 2291
Noch nicht umgemeldet
Reisepass
Läuft ab: 14. März 2026
Reise geplant: August 2026
Ziel
Alle Ummeldungs-Formalitäten
ohne Stress erledigen
Frustration
Weiß nicht was sie nicht weiß –
fehlende Schritte kosten Zeit
03 Information Architecture
Sitemap
& Navigationsstruktur
Die App ist um fünf klare Bereiche organisiert. Der KI-Assistent steht im Mittelpunkt der Navigation – er ist kein Feature, sondern der primäre Einstiegspunkt.
04 Design Kontext
Drei Prinzipien,
eine Lösung
Das Konzept bricht mit der klassischen Behörden-Logik. Statt Bürger durch Kategorien zu führen, versteht die App das Problem – und übernimmt die Orientierung.
🤖
KI statt Kategorie
Kein Dienste-Menü. Keine Kategorien. Die KI versteht natürlichsprachige Fragen und generiert einen personalisierten Schritt-Plan – direkt aus dem Chat heraus.
✅
Checkliste statt Formular
Jeder Vorgang wird zur interaktiven Checkliste. Jeder Punkt erklärt sich selbst via Drawer – was, warum, wie. Nutzer arbeiten im eigenen Tempo, ohne etwas zu vergessen.
🔮
Proaktiv statt reaktiv
Smart Vorschläge erkennen Folgeprozesse automatisch. Nach der Ummeldung fragt die App: "Fahrzeug auch schon umgemeldet?" Kein Wissen vorausgesetzt.
05 User Flows
Drei Flows,
eine Geschichte
Alle drei Use Cases spielen sich in Lenas Leben ab – sie bauen aufeinander auf und zeigen die volle Bandbreite der App.
Flow 01
Anträge stellen · Ummeldung innerhalb Hamburgs
Lena zieht von Altona nach Eimsbüttel – und weiß nicht was sie alles erledigen muss
✦ KI-Stärke: Führt durch unbekannten Prozess · erkennt fehlende Dokumente · generiert Vermieter-Mail
KI-Chat
“Ich bin umgezogen...”
KI-Antwort
Plan + CTA
Termin buchen
Verlauf/Timeline
Bestätigung
Checkliste
Nachrichten
Fr. Müller
Postfach
Bestätigung
Schritt 01 · BürgerAssist
Fragen statt
suchen
Lena tippt ihr Problem in natürlicher Sprache ein – kein Formular, keine Kategorien. BürgerAssist versteht den Kontext und generiert sofort einen personalisierten Schritt-Plan mit allen notwendigen Aufgaben.
KI-Moment: Die App erkennt „umgezogen" und weiß automatisch, dass Ummeldung, Fahrzeug und Adressänderungen zusammengehören.
Schritt 03 · Vorgang / Aufgaben
Checkliste mit
In-Context Drawer
Jeder Punkt der Checkliste öffnet bei Klick einen Bottom Drawer – kein Seitenwechsel, kein Kontextverlust. Der Drawer erklärt was zu tun ist, warum es nötig ist, und ermöglicht die direkte Aktion (Upload, Formular, Link).
Interaction Pattern: Gesperrte Aufgaben werden erst freigeschaltet wenn der vorherige Schritt abgeschlossen ist – Progressive Disclosure verhindert Überforderung.
Schritt 02 · Vorgang / Verlauf
Prozess-Transparenz
auf einen Blick
Der Vorgang-Tab „Verlauf" zeigt Lena wo sie im Prozess steht – als vertikale Timeline mit farbcodierten Status-Punkten. Rot bedeutet Handlungsbedarf, Grün ist abgeschlossen, Grau ist ausstehend.
Design-Entscheidung: Der Default-Tab wechselt kontextabhängig – bei offenen Aufgaben öffnet der Vorgang direkt auf „Aufgaben", nicht auf „Verlauf".
Schritt 04 · Vorgang / Nachrichten
Direkter Draht zum
Sachbearbeiter
Im Nachrichten-Tab kommuniziert Lena direkt mit Fr. Karola Müller vom Einwohnermeldeamt – im Kontext ihres Vorgangs. Kein Telefon, keine E-Mail, kein erneutes Erklären des Anliegens.
Unterschied zu globalem Postfach: Nachrichten hier sind kontextbezogen auf diesen Vorgang. Das globale Postfach zeigt alle Behördenkommunikation aggregiert.
Flow 02
Termine buchen · KFZ-Ummeldung
BürgerAssist erkennt proaktiv den nächsten notwendigen Schritt – ohne dass Lena danach fragen muss
✦ KI-Stärke: Proaktiver Smart Vorschlag · Kennzeichen behalten · Terminbuchung mit Kalender
Smart Vorschlag
Dashboard ✦ AI
KI-Chat
Zulassungsstelle
Termin buchen
Kalender-Auswahl
Bestätigung
Zusammenfassung
Postfach
Terminbestätigung
Schritt 01 · Dashboard / Smart Vorschläge
Die App denkt
voraus
Nach Abschluss der Ummeldung erscheint automatisch ein Smart Vorschlag auf dem Dashboard: „KFZ-Zulassung · Nicht gestartet". Die KI erkennt durch das Profil, dass Lena ein Fahrzeug hat – und dass der nächste Schritt fällig ist.
Kein Wissen vorausgesetzt: Lena muss nicht wissen, dass sie das KFZ nach dem Umzug ummelden muss. Die App erinnert proaktiv – das ist der zentrale Mehrwert.
Schritt 03 · Termin buchen
Termin in zwei Schritten
gebucht
Der Kalender zeigt Verfügbarkeit auf einen Blick: blaue Punkte bedeuten viele freie Termine, orangene wenige. Lena wählt Tag und Uhrzeit – danach kommt ein Bestätigungsscreen mit Mitzubringen-Liste.
Alternativ-Flow: BürgerAssist schlägt den nächsten freien Termin direkt im Chat vor. „Anderen Termin wählen" öffnet erst dann diesen Kalender-Screen.
Schritt 02 · KI-Chat / KFZ
Kennzeichen behalten –
KI weiß es
BürgerAssist erklärt nicht nur den Prozess, sondern gibt kontextbezogene Tipps: Da Lena innerhalb Hamburgs umgezogen ist, kann sie ihr Kennzeichen HH-LR 2291 behalten. Kein unnötiger Gang zur Zulassungsstelle für neue Schilder.
KI-Mehrwert: Diese Information findet Lena sonst nur nach langem Suchen auf Behördenseiten. Die App liefert sie proaktiv im richtigen Moment.
Flow 03
Status prüfen · Reisepass Erneuerung
Die KI warnt Lena proaktiv – ihr Pass läuft in 4 Monaten ab, die Reise ist in 3 Monaten geplant
✦ KI-Stärke: Frist-Erkennung · Konsequenz-Warnung · Express-Empfehlung · Termin direkt gebucht
Smart Vorschlag
Läuft bald ab
KI-Chat
Frist Warnung
KI-Empfehlung
Express
Termin wählen
Kalender-Auswahl
Bestätigung
Checkliste
Postfach
Terminbestätigung
Schritt 01 · KI-Chat / Reisepass
KI warnt vor
Konsequenzen
Lena fragt ob ihr Pass für die Kanada-Reise in 3 Monaten reicht. BürgerAssist erkennt sofort: Die Kombination aus Restlaufzeit (4 Monate) und Bearbeitungszeit (4–6 Wochen) ist kritisch. Keine Behördenseite würde diese Verbindung herstellen.
Der stärkste KI-Moment des gesamten Projekts: Die App denkt nicht nur mit – sie warnt vor einem Fehler den Lena noch nicht gemacht hat. Das ist echter Mehrwert.
Schritt 02 · Postfach · Alle 3 Flows
Das Postfach als
Abschluss der Journey
Am Ende aller drei Flows zeigt das Postfach die gesamte Behördenkommunikation auf einen Blick: Ummeldungsbestätigung, KFZ-Terminbestätigung und Reisepass-Terminbestätigung. Die vollständige User Journey sichtbar in einem Screen.
Stärkster Portfolio-Moment: Dieser Screen zeigt dass alle drei Flows zusammengehören – Lenas Geschichte wird in einem einzigen Postfach erzählt.
06 Screen Inventar
Alle Screens im Überblick
01
Start · Dashboard
Alle Flows
02
KI-Assistent · Start
Alle Flows
03
KI-Chat · Ummeldung
Flow 01
04
KI-Chat · KFZ
Flow 02
05
KI-Chat · Reisepass
Flow 03
06
Meine Vorgänge
Alle Flows
07
Vorgang · Verlauf
Flow 01 + 02
08
Vorgang · Aufgaben
Flow 01 + 03
09
Vorgang · Nachrichten
Flow 01 + 02
10
Vorgang · Info/Standort
Flow 02
11
Kalender
Flow 02 + 03
12
Termin · Bestätigung
Flow 02 + 03
13
Postfach · Übersicht
Alle Flows
14
Postfach · Nachrichten
Flow 01 + 02
15
Postfach · Bescheide
Alle Flows
16
Postfach · KI-Chats
Alle Flows
17
Profil
Alle Flows
18
KI-Chat · Leer / Start
Alle Flows
07 Was dieses Projekt zeigt
Design,das Probleme löst
🧭
Systems Thinking
Sitemap, Navigation, Komponenten-Hierarchie und Informationsarchitektur sind als kohärentes System entworfen – nicht als Sammlung einzelner Screens.
🤖
AI-First UX
Der KI-Assistent ist kein Add-on – er ist der primäre Einstiegspunkt. Das Konzept zeigt wie proaktive KI Behörden-UX fundamental verändern kann.
🔗
Connected User Journeys
Drei Use Cases die aufeinander aufbauen und eine echte Geschichte erzählen. Lenas Reise von der Ummeldung bis zum Reisepass ist ein durchgehender Flow – kein Demo.
📐
Component Design
Wiederverwendbare Komponenten mit klarer Benennung: List Item/Navigable, List Item/Toggle, Badge/Success, Filter Bar/Item. Skalierbar und konsistent.
💬
Interaction Design
Drawer-Pattern, kontextabhängige Default-Tabs, Progressive Disclosure in der Checkliste – jede Interaktionsentscheidung hat ein „Warum" dahinter.
🇩🇪
Real-World Kontext
Echte Hamburger Adressen, echte Gesetze (§ 17, § 19 BMG), echte Bearbeitungszeiten und echte Kosten. Kein generischer Placeholder-Content.
Zurück zum Portfolio