Gemeinsam mit der Stadt Ulm haben wir einen digitalen Portier für das Rathaus entwickelt, der den Service vor Ort einfacher und zugänglicher macht. Ziel des Projekts war es, eine digitale Stele zu gestalten, die Bürgern*innen sowie Tourist*innen gleichermaßen bei ihren Anliegen unterstützt. Die Stele ermöglicht einen schnellen und unkomplizierten Zugang zu wichtigen Informationen rund um das Rathaus und die Stadt. Dabei lag der Fokus auf einer intuitiven Bedienung und einer benutzerfreundlichen Gestaltung.
Emphatize Phase
Alle gesammelten Informationen und Ergebnisse aus der Recherche sowie der Analyse wurden übersichtlich in unserem gemeinsamen FigJam Board zusammengetragen. Diese Plattform ermöglichte es uns, Ideen und Daten strukturiert zu organisieren, so dass wir effizient darauf zugreifen und die nächsten Schritte im Designprozess planen konnten.
2.1 Interviews mit Front- und Back-Office-Mitarbeiter*innen
Die Interviews mit Mitarbeiter*innen lieferten wertvolle Einblicke in die Anforderungen und Herausforderungen des Rathausbetriebs. Die wichtigsten Ergebnisse waren:
Zuständigkeiten: Bedarf an strukturierter Weiterleitung von Anfragen an die richtigen Stellen.
Strukturierung von Informationen: Verbesserung des Zugriffs auf Inhalte von ulm.de.
Wegführung: Klare und effiziente Navigation im Rathaus und in der Stadt.
Mehrsprachigkeit: Wunsch nach einer benutzerfreundlichen, mehrsprachigen Oberfläche.
FAQs: Integration häufig gestellter Fragen für eine bessere Selbsthilfe der Nutzer*innen.
Unterstützungsangebote: Fokus auf schnelle Hilfe in Krisensituationen (z. B. Hochwasser, Corona).
2.2 Umfrage
Die Umfrage kombinierte persönliche Befragungen auf der Straße mit einer digitalen Umfrage über Google Forms. Mit 47 Teilnehmenden entstand eine repräsentative Datenbasis.
Wichtigste Erkenntnisse:
Probleme bei Rathausbesuchen:Unklare Öffnungszeiten.Lange Wartezeiten.Schwierige Terminvereinbarung über die Website.Orientierungslosigkeit bei Zuständigkeiten.
Bedenken bei der Nutzung:Datenschutzbedenken.Barrieren für Menschen mit Einschränkungen.Schwierigkeiten für ältere Nutzer*innen.
2.3 Affinity Mapping
Um die gesammelten Informationen zu organisieren, wurde das Affinity Mapping genutzt. Die Daten wurden in folgende Kategorien unterteilt:
Benutzer (Lila): Nutzerperspektiven und Bedürfnisse.
Rathaus (Pink): Anforderungen an die Navigation und Organisation.
Bedienbarkeit (Blau): Barrierefreiheit und Nutzerfreundlichkeit.
Interface (Grün): Gestaltung und visuelle Hierarchie.Diese Struktur erleichterte es, relevante Themen zu identifizieren und gezielt weiterzuentwickeln.

2.4 Ich-Aussagen
Die Ich-Aussagen wurden auf Basis der Umfrageergebnisse formuliert, um die individuellen Perspektiven und Wünsche der Nutzer*innen greifbar zu machen. Sie halfen dabei, die Designentscheidungen auf die tatsächlichen Anforderungen auszurichten.
Beispiele:
„Ich komme aus der Umgebung von Ulm und nutze häufig die Dienstleistungen des Rathauses.“
„Ich suche oft nach Informationen zu Zuständigkeiten und Öffnungszeiten der Ämter.“
„Ich benötige hohe Kontraste auf der Webseite, um Inhalte gut lesen zu können.“
„Farbliche Markierungen helfen mir dabei, wichtige Informationen schnell zu erkennen.“
Define Phase
In der Define Phase wurden die Erkenntnisse aus der Empathie-Phase weiterentwickelt und konkretisiert, um gezielte Designlösungen zu definieren. Durch Personas, User Journeys und Wettbewerbsanalysen konnten zentrale Problemstellungen identifiziert und erste Ansätze für die Gestaltung des digitalen Portiers entwickelt werden.
3.1 Personas und User Journeys
Personas und User Journeys wurden entwickelt, um typische Zielgruppen und deren Bedürfnisse besser zu verstehen. Die Personas repräsentieren verschiedene Nutzertypen, die in den Interviews und der Umfrage identifiziert wurden, während die User Journeys deren Interaktionen mit der Anwendung visualisieren.


3.2 Problem Statements und "How Might We" Statements
Basierend auf den Personas und den Umfrageergebnissen wurden zentrale Problemstellungen definiert und in "How Might We" Statements umformuliert, um den Designprozess zu leiten.
Beispiele:
„Ich brauche hohe Kontraste, um Inhalte besser lesen zu können.“
„Ich möchte schnell und einfach einen Termin buchen können.“
„Ich suche oft lange nach Informationen zu Zuständigkeiten.“
3.3 Wettbewerbsanalyse
Eine umfassende Wettbewerbsanalyse wurde durchgeführt, um Best Practices und Verbesserungsmöglichkeiten zu identifizieren. Die Analyse basierte auf den folgenden Kriterien:
Gestalterische Mittel: Wie werden visuelle Elemente wie Farbcodierung und Icons genutzt?
Intuitive Bedienung: Wie benutzerfreundlich ist die Navigation?
Engagement-Strategien: Gibt es interaktive oder motivierende Elemente?
Ablaufgestaltung: Wie klar und effizient sind die Prozesse strukturiert?
Onboarding: Wie werden neue Nutzer*innen in die Anwendung eingeführt?
Beispiele aus der Analyse:
Vangenhassend: Fokus auf klare Wegführung und Informationssysteme.
RedPengoo: Interaktive Besuchermanagement-Lösungen.
Duolingo: Gamification-Ansätze und personalisiertes Onboarding.
3.4 SWOT-Analyse
Eine SWOT-Analyse wurde durchgeführt, um Stärken, Schwächen, Chancen und Risiken zu identifizieren.
Beispiele:
Strengths: Klare visuelle Gestaltung und interaktive Funktionen.
Weaknesses: Fehlende Konsistenz bei bestimmten Funktionen.
Opportunities: Einführung von Vergleichsoptionen und barrierefreien Einstellungen.
Threats: Technische Abhängigkeiten und Konkurrenz durch andere Anbieter.
Ideation Phase
In der Ideenfindungs- und Konzeptentwicklungsphase wurden verschiedene kreative Ansätze und Methoden genutzt, um innovative und benutzerzentrierte Lösungen zu entwickeln. Ziel war es, konkrete Ideen zu generieren, die auf die identifizierten Bedürfnisse und Herausforderungen aus der Empathize- und Define-Phase eingehen.
4.1 Brainstorming
Die Teams wurden in spezifische Fokusgruppen unterteilt, um gezielt auf verschiedene Aspekte der Benutzerfreundlichkeit und Zugänglichkeit einzugehen. Die vier Hauptkategorien, die aus der Analysephase entstanden, sind:
Effizienz und Zeitersparnis:
Benutzer*innen sollen ihre Aufgaben schnell und effizient erledigen können.Themen: Gezielte Suche, Sofort-Service, Zeitersparnis.
Benutzerfreundlichkeit und Zugänglichkeit:
Die Anwendung soll leicht verständlich und intuitiv bedienbar sein.Themen: Intuitive Navigation, Icons und Text, Verständlichkeit.
Barrierefreiheit und Lesbarkeit:
Die Anwendung soll für alle Nutzer*innen zugänglich sein, einschließlich Personen mit Einschränkungen.Themen: Farb-Leitsystem, Barrierefreiheit, Lesbarkeit.
Orientierung und Strukturierung:
Nutzer*innen sollen schnell die benötigten Informationen finden.
Um die Ideen zu visualisieren und weiterzuentwickeln, wurden Mind-Maps erstellt, die die verschiedenen Kategorien und deren Unterthemen strukturiert darstellen. Dadurch konnten Zusammenhänge und Prioritäten identifiziert werden, die in den späteren Schritten berücksichtigt wurden.
4.2 Visual Ideation
Mit der abgewandelten „Crazy 8s“-Methode wurden innerhalb kurzer Zeit viele Ideen visualisiert. Die besten Ansätze wurden in dieser Phase priorisiert und für die nächsten Schritte verfeinert.
4.3 Relational Ideation
Eine detaillierte Mind-Map wurde erstellt, um den gesamten Umfang der relevanten Themenbereiche abzudecken. Diese Übersicht ermöglichte es, den Fokus gezielt auf die wichtigsten Elemente zu legen und gleichzeitig die Beziehungen zwischen den einzelnen Aspekten zu verdeutlichen.
4.4 SCAMPER
Die SCAMPER-Methode wurde angewandt, um bestehende Ideen weiterzuentwickeln und neue Perspektiven zu eröffnen. Die zentralen Ergebnisse sind:
Substitute (Ersetzen): Text durch Grafiken ersetzen; kontextabhängige Menüs je nach Nutzergruppe einführen.
Combine (Kombinieren): Icons und Text kombinieren; Verlinkungen zu externen Ressourcen integrieren.
Adapt (Anpassen): Anpassung der Schriftgröße und Sprache für unterschiedliche Nutzergruppen.
Modify (Ändern): Interaktive Startseiten gestalten; Suche mit Autovervollständigung und Filteroptionen ergänzen.
Eliminate (Beseitigen): Überflüssige Kategorien ausblenden, lange Textblöcke nur auf Wunsch einblenden.
Rearrange (Neu anordnen): Wichtigste Informationen prominent platzieren; gespeicherte Inhalte visuell hervorheben.
4.5 Priorisierung der Ideen
Die MoSCoW-Methode wurde genutzt, um die Ideen nach ihrer Relevanz zu priorisieren:
Must-Have (essentiell):
Übersichtsseite mit klarer Navigation.
Anpassbare Schriftgrößen und barrierefreie Farbgestaltung.
Mehrsprachigkeit und einfache Sprache.
Suchleiste mit Auto-Vervollständigung.
Should-Have (wichtig):
Breadcrumb-Menü und klare visuelle Struktur.
Kontrasterhöhung und progressives Offenlegen von Inhalten.
Verzicht auf komplizierte Sprache („Beamtendeutsch“).
Could-Have (optional):
Schnellantworten und One-Tap-Buttons.Filteroptionen für eine gezielte Suche.
Won’t-Have (vorerst ausgeschlossen):
Komplexe Kalendersynchronisation mit externen Tools.
Erinnerungen an Termine.

4.6 Task Flows
Task Flows wurden erstellt, um die Nutzerpfade für verschiedene Anwendungsfälle zu visualisieren. Diese zeigen, wie Nutzer*innen mit dem digitalen Portier interagieren können, um bestimmte Ziele zu erreichen.
Terminvereinbarung Hochzeit:
Nutzer*innen durchlaufen eine klare Abfolge: Begrüßung, Serviceauswahl, Eingabe persönlicher Daten, Terminwahl und abschließende Bestätigung.
Fahrzeuganmeldung:
Fokus auf einfache Navigation: Begrüßung, Auswahl zwischen online oder vor Ort, Weiterleitung zur Kfz-Zulassungsstelle.
Info zum Gelben Sack:
Schnelle Suchfunktion und direkter Zugriff auf relevante Informationen durch Verlinkungen zur EBU-Seite.
Veranstaltungssuche:
Nutzer*innen können Veranstaltungen nach Kategorie und Datum filtern, Details einsehen und direkt buchen.Die Task Flows gewährleisten ein reibungsloses Nutzererlebnis, indem sie klare, intuitive Schritte und visuell unterstützende Elemente einbinden.
Prototyping Phase
In der Prototyping-Phase wurde der Fokus auf die iterative Entwicklung und Verfeinerung der Benutzeroberfläche gelegt. Ziel war es, eine benutzerfreundliche und funktionale Lösung zu gestalten, die sowohl die Bedürfnisse der Nutzer*innen als auch die Anforderungen des Projekts erfüllt. Der Prozess gliederte sich in drei Hauptschritte: Low-Fidelity, Mid-Fidelity und High-Fidelity Wireframes.
5.1 Low-Fidelity Wireframes
Low-Fidelity Wireframes (Low-Fi) wurden genutzt, um die grundlegende Struktur und Nutzerführung schnell und effizient zu visualisieren. Der Schwerpunkt lag auf der Darstellung der Inhalte und Funktionen, ohne sich auf ästhetische Details wie Farben oder Typografie zu konzentrieren.
Erstellung der Wireframes: Mithilfe von Figma wurde die erste Version der Wireframes erstellt. Figma ermöglichte eine kollaborative Bearbeitung in Echtzeit und trug zur Konsistenz der Designs bei.
Kategorisierung nach Farben: Die Wireframes wurden in vier Kategorien unterteilt, um die Komplexität zu reduzieren:
Lila: Hauptbildschirm
Pink: Onboarding
Grün: Formulare
Blau: Terminvereinbarung
Diese Strukturierung erleichterte die gezielte Weiterentwicklung der einzelnen Bereiche und förderte die Übersichtlichkeit im Designprozess.
Iterative Auswahl: Nach der Erstellung der Low-Fi Wireframes wurden die vielversprechendsten Elemente identifiziert und kombiniert, um die Stärken der verschiedenen Ansätze in die nächste Phase zu überführen.

5.2 Mid-Fidelity Wireframes
Die Mid-Fidelity Wireframes (Mid-Fi) bauten auf den ausgewählten Low-Fi Frames auf und verfeinerten diese weiter. Diese Phase legte den Fokus auf die detailliertere Ausarbeitung von Layouts, Interaktivität und ersten visuellen Elementen.
Verbesserungen: Die Struktur der Benutzeroberfläche wurde weiter optimiert, um eine klarere Navigation und bessere Nutzbarkeit zu gewährleisten. Erste Interaktionsdetails wurden ergänzt, um ein realistischeres Nutzungserlebnis zu simulieren.
Neue Ansätze: Basierend auf dem Feedback aus der Low-Fi-Phase wurden neue Ideen integriert, um die Benutzererfahrung weiter zu verbessern. So wurden beispielsweise Kachelsysteme für die Navigation, Breadcrumb-Menüs und Filteroptionen für die Terminvereinbarung entwickelt.Die Mid-Fi Wireframes halfen, die Funktionalität der Anwendung zu konkretisieren und mögliche Herausforderungen im Designprozess frühzeitig zu identifizieren.

5.3 High-Fidelity Wireframes
Die High-Fidelity Wireframes (High-Fi) stellten die finalen Prototypen dar, die das Design und die Interaktionen der Anwendung möglichst detailgetreu abbilden. Diese Phase zielte darauf ab, die visuelle und funktionale Umsetzung präzise darzustellen, um eine optimale Grundlage für die Entwicklung zu schaffen.
Detaillierte Gestaltung: High-Fi Wireframes beinhalteten die endgültige visuelle Darstellung, einschließlich Farbkonzepten, Typografie und interaktiven Elementen. Das Ziel war es, ein ansprechendes und funktionales Design zu präsentieren, das den Anforderungen der Nutzer*innen entspricht.
Entwicklungsbasis: Diese Wireframes dienten als Leitfaden für die Umsetzung durch die Entwickler*innen und stellten sicher, dass alle Anforderungen und Funktionen in der finalen Anwendung berücksichtigt werden.

Test Phase
In der Testphase wurden die Prototypen intensiv auf Benutzerfreundlichkeit und Funktionalität geprüft, um wertvolle Erkenntnisse zu sammeln, Schwachstellen zu identifizieren und Verbesserungsmöglichkeiten aufzudecken. Der Fokus lag dabei auf A/B-Tests, der Bewertung von Designoptionen und der Integration des Feedbacks in die Weiterentwicklung der Anwendung.
6.1 Usability Testing
Testprozess um ein besseres Verständnis für die Bedürfnisse und Erwartungen der Zielgruppen zu gewinnen, wurde ein mehrstufiger Testprozess durchgeführt:
A/B-Tests: Die Teilnehmer testeten zwei Prototypen (A und B) und bewerteten ihre Präferenzen.
Optionenbewertung: Verschiedene Design- und Funktionsvarianten wurden getestet, darunter Farbschemata, Menüstrukturen und Maskottchen.
Detailliertes Feedback: Teilnehmer konnten Verbesserungsvorschläge machen und ihre Wünsche für das finale Design äußern.
6.1.1 Testplan
Zweck des Tests: Validierung von Designentscheidungen. Ermittlung von Nutzerpräferenzen.Identifikation von Schwachstellen und Hindernissen in der Nutzung.
Zielgruppe:
Primäre Persona: Personen im Alter von 41–60 Jahren.
Sekundäre Persona: Jüngere Nutzer im Alter von 19–30 Jahren.
Durchführung: Die Tests wurden remote moderiert, um eine flexible Teilnahme zu ermöglichen.Teilnehmer nutzten Smartphones und PCs, um die Prototypen zu testen.
Metriken: Qualitative und quantitative Daten (z. B. Zufriedenheitsskalen, detaillierte Kommentare).
6.1.2 A/B-Test Ergebnisse
Prototyp B wurde klar bevorzugt.
Feedback zu Prototyp B:
Übersichtliches Design.
Persönliche Note durch den „InfoSpatz“.
Verbesserungsvorschläge: Größere Kästchen und ein besser lesbarer Kalender.
6.1.3 Optionenbewertungen Designbewertungen
Farbschema: Blau wurde als Hauptfarbe bevorzugt, stärkere Kontraste wurden empfohlen.
Maskottchen „InfoSpatz“: Der Spatz wurde als spielerisches Element geschätzt, sollte jedoch dezent eingesetzt werden.Startbildschirm: Der linke Startbildschirm wurde bevorzugt.
Menüstruktur: Größere Kästchen und klarere Navigation wurden hervorgehoben.
Fehlende Funktionen:Anpassbare Textgrößen.Rückmeldungen bei Beschwerden (z. B. Müllablage). Verbesserte digitale Übertragungsmöglichkeiten.
6.2 Verbesserungen nach Usability Testing
Onboarding: Kombination der Startbildschirme aus den Prototypen, um eine klare und intuitive Einführung zu schaffen.
Hauptstartbildschirm: Entwicklung von zwei Varianten (2er- und 3er-Raster).Mehr Padding und Zeilenabstand für ein luftigeres Design.
Terminvereinbarung & Formulare: Zentral positioniertes Tab-Menü.Integration von Filteroptionen in die Kalenderansicht.Einführung ticketförmiger Schnellwahloptionen für eine spielerischere Nutzererfahrung.
Chatbot: Der Name „Info Spatz“ wurde festgelegt.Designanpassungen, damit der Chatbot deutlicher hervorsticht.
Mängelmelder: Verwendung des dunklen Blautons als Akzentfarbe.Erhöhung des Zeilenabstands für bessere Lesbarkeit.
Zuständigkeiten: Entwicklung einer Seite für die Übersicht über Zuständigkeiten.Test von Popup-Darstellungen für Informationen und Bestätigungen.
Implement Phase
In der Implementierungsphase wurde das finale Design des digitalen Portiers entwickelt und getestet, um eine nutzerfreundliche, barrierefreie und ansprechende Anwendung sicherzustellen. Die Ergebnisse aus den vorherigen Phasen wurden integriert, um die Funktionalität und das Nutzererlebnis zu optimieren.
7.1 Finales DesignÜberarbeitungen und Anpassungen
Das finale Design beinhaltet wesentliche Änderungen, um die Benutzerfreundlichkeit zu maximieren:
Navigation: Neu strukturiert, um Barrierefreiheit zu gewährleisten und die Bedienung unabhängig von der Bildschirmgröße zu erleichtern.
Farbschema: Blau wurde bevorzugt, mit reduzierter Farbsättigung für eine zeitlose und angenehme Ästhetik.
Info Spatz: Als Floating Button hervorgehoben und visuell angepasst.
Onboarding: Integration eines Hohe-Kontrast-Modus direkt beim Einstieg.
Touristenansicht: Angepasste Inhalte und Tabs wie „Sehenswürdigkeiten“, ergänzt durch Bilder und dezent platzierte Informationen.
7.1.1 Style Guide Farbschema
- Blau als Hauptfarbe, angepasst an die Präferenzen der Nutzer.
- Runde Elemente für eine einladende Ästhetik.
- Hoher Kontrast-Modus basierend auf dem Corporate Design der Stadt Ulm.

7.1.2 Seitenaufbau und Funktionen
Onboarding:
Wie bereits implementiert, sowohl im normalen als auch im hohen Kontrastmodus, mit zusätzlichen Anpassungen der Startseite.

Hauptstartbildschirm:
Reduktion auf sechs Kernkategorien für Übersichtlichkeit.„Häufig gesucht“ als Standard-Tab für schnelle Zugriffe. Angepasste Touristenansicht mit spezifischen Kategorien und Bildern.

Info Spatz:
Als interaktiver Chatbot integriert, um Informationen schnell bereitzustellen.Inhalte für Touristen entsprechend angepasst.

Terminvereinbarung:
Optimiertes Ticketdesign mit dezentem Look.Visuelle Führung durch Abschwächung des aktuellen Tages bei Auswahl einer Schnellwahloption.

Suchfunktion und Formulare:
Auto-Complete-Funktion für schnelle Suchvorschläge.Anzeige relevanter Veranstaltungen unterhalb der Suchleiste.

Mängelmelder und Inaktivitätsscreen:
Ergänzung eines Inaktivitätsscreens mit spielerischen Elementen des Info Spatz.Nutzerfreundlicheres und interaktives Design.

Zuständigkeiten:
Einheitliches Layout mit klarer Weiterleitungs- und Bestätigungsstruktur.

Screen Reader:
Aktivierung über die Einstellungen auf jeder Seite möglich.Visuelle Hervorhebung aktuell vorgelesener Abschnitte.

7.2 Wireflows Visualisierung der User Flows
Die Wireflows veranschaulichen die Benutzerführung und Interaktionen in verschiedenen Bereichen der Anwendung
Terminvereinbarung: Logischer und intuitiver Ablauf von der Sprachauswahl bis zur Buchung.
Formulare: Klar strukturierte Schritte zur Eingabe und Übermittlung von Informationen.
Mängelmelder: Benutzerfreundliche Navigation und einfache Bedienung.
Hoher Kontrast: Aktivierung und Vorschau des Kontrastmodus zur Verbesserung der Barrierefreiheit.
Screen Reader: Integration von visuellen und funktionalen Feedbacks zur Unterstützung von Menschen mit Sehbeeinträchtigungen.
Touristenansicht: Angepasste Navigation und Inhalte, um die Bedürfnisse von Touristen zu erfüllen.
Fazit
Das Projekt „Digitaler Portier“ war für uns als Team eine interessante und bereichernde Erfahrung. Von der ersten Idee bis zum finalen Design haben wir gemeinsam an einem Produkt gearbeitet, das intuitive Navigation, ein ansprechendes visuelles Design und umfassende Barrierefreiheit vereint. Der digitale Portier bietet Bürgerinnen und Touristinnen eine effiziente Lösung, um das Rathaus zu navigieren, Informationen schnell zu finden und Anliegen unkompliziert zu lösen.