Willkommen zu unserem 0t1 Artikel.
Im folgenden Beitrag zeigen wir die Ergebnisse unserer Recherchen und Bearbeitungen zum diesjährigen Semesterprojekt.
Das Projekt dieses Semester war es, einen digitalen Portier für die Stadt Ulm zu entwickeln. Dieser sollte die Services des Rathauses für Ulmer Bürger aufzeigen und bedienen, sowie Touristen bei der Navigation in und um Ulm herum helfen.
Wichtig war, dass wir deutlich kennzeichnen mussten, wofür das Rathaus Ulm zuständig ist, sowie eine klare, elegante Designsprache für den Portier zu entwickeln, um eine optimale User Experience zu erschaffen.
Wir zeigen, wie wir von Grund auf, eine zur Stadt Ulm passende User Experience erschaffen haben. Sie umfasst den vollständigen Konzeptions-und Designprozess unseres Projektes.
Hinweis zur Sprache in diesem Text
In diesem Artikel verwenden wir sprachliche Formen, die der Lesbarkeit und dem Sprachfluss dienen. Dabei sind jedoch alle Menschen gemeint – unabhängig von Geschlecht.
Empathize Phase
Die Empathize-Phase im Design hat das Ziel, die Bedürfnisse, Perspektiven und Emotionen der Nutzer zu verstehen, um eine nutzerzentrierte Gestaltung zu konzipieren.
Ziel: Tiefes Einfühlen in die Erfahrungen und Herausforderungen der Nutzer, um ihre Probleme und Wünsche zu erkennen.
Unsere Aufgabe: Beobachten, Zuhören und Interagieren durch Methoden wie Interviews, Befragungen oder Beobachtungen, um echte Einblicke in ihre Welt zu gewinnen.
Im ersten Schritt, haben wir eine Google-Umfrage erstellt. Wir haben insgesamt 28 Personen befragt, darunter Touristen, Mitarbeiter und Bürger und die Ergebnisse analysiert um die Bedürfnisse aller Zielgruppen festzustellen.
Um die entsprechenden Daten zu sammeln, befragten wir 28 Personen, darunter Touristen, Mitarbeiter und Bürger.
Es folgt unsere Analyse:

Die Demografie zeigt, dass wir viele (junge) Erwachsene haben, die deutsch sprechen und die Rathausdienste nur selten benötigen. Draus schlussfolgern wir, dass wir das System einfach und verständlich aufbauen müssen.

Daraus schlussfolgern wir, dass wir viele Dinge direkt am Portier zur Verfügung stellen sollten. Darunter zählen unter anderem die Dienstleistungen des Rathauses.
Auch wird sich Hilfe für die Bedienung des Portiers gewünscht, da die Systeme (in ihrem aktuellen Zustand) die Nutzer überfordern.

Anhand dieser Problem-Statements konnten wir unsere Ziele und Aufgaben für die Konzeption und Gestaltung des digitalen Portiers formulieren.
Mit diesen Erkenntnissen haben wir weitergemacht und die nächsten Schritte eingeleitet.
Um in den nächsten Schritten festzulegen, welche Funktionen und Gestaltungsregelungen im Fokus liegen, haben wir die Anliegen durch Affinity Mapping in vier Kategorien aufgeteilt.

Dienste und Anwendungen


Barrierefreiheit


Erkenntnisse:
Leichte/Einfache Sprache sollte verwendet werden, um alle Nutzer abzuholen
Unterschiedliche Sprachen sollten angeboten werden, um möglichst Barrierefrei und für alle zugänglich zu sein
Wir benötigen einfache, klare und Darstellung für maximale Verständlichkeit
UX und Verwendung


Erkenntnisse:
Simple und schlichte Designs werden von den Nutzern bevorzugt
Die Nutzer wünschen sich eher keinen Avatar/ein Maskottchen
Die Nutzer wünschen sich eine schnelle, unkomplizierte Bedienung
Support


Erkenntnisse:
Die Nutzer wünschen sich einen Live-Chat oder einen persönlichen Support
Weitere Hilfestellungen wie eine Anleitung o.ä. wird sich ebenfalls von Nutzern gewünscht
Ein detailliertes Feedbacksystem wird benötigt
Define Phase
Auf Basis der Interviews und des Affinity Mapping haben wir zwei Personas erstellt - еine primäre Persona und eine sekundäre Persona.
Die Personas haben wir so entwickelt, dass sie die Bedürfnisse und Wünsche unserer Zielgruppe repräsentieren. Die primäre Persona repräsentiert unsere Hauptzielgruppe und die sekundäre Persona entspricht den Bedürfnissen eines weiteres Benutzersegments.
Unsere primäre Persona ist eine Bürgerin der Stadt Ulm, weil wir diese (Bürger der Stadt Ulm) als unsere Hauptzielgruppe definiert haben. Unsere sekundäre Persona ist eine nach Ulm zugezogene Person.
Bei der Erstellung der Personas war es wichtig, die Ziele und Herausforderungen der Nutzer zu verstehen, damit wir in der nächsten Konzeptionsphase passende Lösungen dazu finden konnten.
Persona 1 - primär
Was führt sie zum Rathaus:
Anmeldung der Eheschließung
Besprechung vom Hochzeitstermin
Dokumente prüfen

Persona 2 - sekundär
Was führt ihn zum Rathaus:
Anmeldung bei der Stadt
Meldebescheinigung
Informationen für Neubürger

Nachdem wir unsere Personas entwickelten, haben wir für jede Persona eine User Journey aufgebaut. Die User Journeys zeigen, wie unsere Personas mit unserer Anwendung umgehen, sowie welche Schritte die Personas durchgegangen sind, um ihre Ziele zu erreichen. Zudem werden auch die Emotionen und Herausforderungen bei der Interaktion mit der Anwendung unserer Personen berücksichtigt.
Auf Basis der User Journey Maps haben wir dann bestimmte Bereiche unserer Anwendung identifiziert, bei denen die User Experience verbessert werden kann.
Persona 1
Ziele:
Behördengänge für die Hochzeit plannen
Termin buchen
Checklist mit allen erfrorderlichen Dokumente zu bekommen

Persona 2
Ziele:
Zuweisung zur richtigen Einrichtung/Standort
Termin buchen für Anmeldung bei der Stadt Ulm
Checklist mit allen erforderlichen Dokumente zu bekommen

Ideation Phase
In dieser Phase entwickeln wir Ideen und Ansätze um mögliche Probleme zu lösen und Elemente für den Portier zu Sammeln.
Für unser Brainstorming haben wir uns die Organisation und Aufbereitung von Informationen zum Ziel gemacht.
Durch die SCAMPER Methode haben wir für einen Variantenreichtum an Lösungen und USPs erarbeitet und durch die MoSCow Methode diese kategorisiert und aussortiert.
Unser Portier muss beinhalten:

Unser Portier sollte beinhalten:

Unser Portier kann beinhalten:

Um möglichst weit voraus zu planen und die nötigen Elemente festzustellen haben wir Task Flows mit unterschiedlichen User Goals entwickelt.
User möchte Sehenswürdigkeiten finden

User möchte einen Termin ausmachen

User möchte einen anderen Ort aufsuchen

User sucht einen andern Ort im Rathaus

Prototyping Phase
Basierend auf die erstellten Task Flows haben wir unsere ersten Low-Fidelity Wireframes gemacht, um zu visualisieren, wie die User die Tasks erledigen.
Ziel bei den Low-Fidelity Wireframes war, es die Grundstruktur und Funktionalität unserer Anwendung zu definieren. Es wurden auch die Basisnavigationselemente festgelegt, während die Positionen der Inhalte anhand von Platzhalter definiert wurden.
Zuerst haben wir mit händischen Skizzen angefangen, welche wir danach in Figma digitalisiert und verbessern haben.

Minimalistische Gestaltung mit viel Weiß Raum
Wenige Elemente auf die einzelnen Screens, damit den Nutzer nicht überladen wird
Beim Startseite wichtigsten funktionen als größe klickbaren Flächen
Unten Platzhalter für Chat-Bot Icon.
Minimalistische Navigationsleiste mit Datum, Uhrzeit, Burger Menu und Suchleiste oben
Wichtig war es genug Weißraum zu lassen und Startseite nicht zu überladen
Einheitliche Spacing zwischen den Elementen und Sektionen
Durch Spacing werden die zusammengehörige Elementen gruppiert
Einzelne Schritte beim Termin vereinbaren in verschiedenen Screens aufgeteilt
User muss dadurch den Task Schritt für Schritt erledigen, was den Prozess unkomplizierter macht.
Basierend auf den Low-Fidelity Wireframes haben wir im nächsten Schritt Mid-Fidelity Wireframes erstellt.
Ziel bei den Mid-Fidelity Wireframes war, es die Grundstruktur und Elementaufteilung festzulegen. Durch grobe Verteilung und Anwendung von Grid-Methoden konnten die Elemente sinnvoll und ordentlich platziert werden.
Zuerst haben wir alle Basisseiten wie etwa die Startseite definiert.

Hauptinhalte werden in einer großen Sektion angezeigt
Dynamische Veränderung des Sektionsinhaltes
Navigation und Suchleiste oben
Im Footer Platzhalter für Chat-bot und Hilfe Icons.
Angepasstes Spacing
Dienstleistungen als erste Sektion direkt auf dem Home Screen
FAQ Elemente als Akkordeon mit den wichtigsten Fragen zum Portier und Rathaus
Erste Texteinsätze für besseres Verständnis und Verteilung der Elemente.
Basierend auf den Mid-Fidelity Wireframes haben wir im nächsten Schritt High-Fidelity Wireframes erstellt.
Ziel bei den High-Fidelity Wireframes war, es die Style des Portiers festzulegen und die Elemente ansprechend zu gestalten. Es werden Schriften, Farben, Bilder und interaktive Elementen integriert, um das Look and Feel zu definieren

Lageplan, Termin, FAQ direkt erreichbar vom Startscreen
Mit der Design dieser Bereich wurde weiter ausprobiert
Zu viele schwarze Flächen - nehmen die Aufmerksamkeit und wirken zu schwer aus
Beim zweiten Entwurf wird Karte direkt angezeigt, damit es nicht so viele schwarze Flächen gibt
Unten Übersicht der Dienstleistungen im Rathaus
Floating Hilfe Button zum Aufrufen des Chat-Bots
Minimalistisches Footer - Home button, Zurück Button und Hilfe Button
Allgemein wurde der Look and Feel minimalistich und modern gehaltet
Zwei Farben - Schwarz und Weiß (Passen zum CD von der Stadt Ulm)
Aus den bisher gezeigten Wireframes, die von den Gruppenmitgliedern gemacht wurden, haben wir bestimmte Elementen aus jeden Entwurf ausgewählt, die uns am meisten gefallen haben.
Mit diesen Elementen haben wir dann unseren ersten interaktiven Prototyp gestaltet.
Test Phase
Ziel: Ziel des Tests ist herauszufinden, ob unsere Zielgruppe(n) den Prototypen und dessen Inhalte verstehen. Unverständliche oder Störende Dinge, die unserer Zielgruppe auffällt, wollen wir verbessern und eine bessere User Experience erschaffen.
Umfang: Getestet wird der Prototyp den wir erstellt haben. Die Nutzer sollen die von uns festgelegten “Key-Features” wie Termine ausmachen, nach Dienstleistungen suchen und Sehenswürdigkeiten durchstöbern testen.
Testpersonen: Unsere Testpersonen sind Freunde, Familie und Bekannte allen Alters, die potentielle Nutzer des Portiers im Rathaus sein können. Sprich, Personen die Dienste wie Urkundenerstellung o.ä., Trautermine etc. gebrauchen könnten.
Moderation: Die Tests werden moderiert und unmoderiert stattfinden, um eine größere Bandbreite an Informationen zu sammeln.
Remote vs. In-Person: Die Tests werden sowohl remote als auch in-Person stattfinden um diversere Ergebnisse zu erhalten.
Werkzeug und Ausstattung: Für die Tests benötigen Nutzer ein internetfähiges Gerät (egal ob Smartphone oder Computer), da die der Prototyp in Figma getestet wird.
Metrik: Gemessen sollen allgemeine Bewertung (in Zahlen von 1 bis 5) zu unserem Prototyp werden, sowie eine allgemeine Wertung (gut, okay, schlecht) und Aussagen die unseren Nutzern während der Nutzung einfallen/auffallen.
Getestet wurde mit folgenden 6 Personen:
Männlich 17, deutsch, Azubi.
Männlich 39, deutsch, Kaufmann
Männlich 53, deutsch, Handwerker
Weiblich 44, türkisch, Bürokauffrau
Weiblich 22, deutsch, Studentin
Männlich 24, bulgarisch, Softwareentwickler
Zuerst haben wir die Daten als Stoplight Chart organisiert, um einen groben aber schnellen Überblick zu bekommen, welche Features gut sind und welche wir verbessern müssen.

Das Ergebnis daraus war, dass wir die UI Verständlichkeit anpassen , sowie das Termin buchen System verbessern müssen. Hilfsangebote müssen besser gekennzeichnet werden, aber Sehenswürdigkeiten benötigen keine größeren Änderungen.
Um genauere Einblicke in unsere Tests zu bekommen, haben wir die Testpersonen danach gefragt die ihnen gestellten Aufgaben/Bereiche mit messbaren Werten (Zahlen von 1 (schlecht) bis 5 (sehr gut)) zu bewerten.

Das Ergebnis daraus war, dass wir dringend an unserem Terminsystem arbeiten müssen, sowie Hilfsangebote und die allgemeine Verständlichkeit dieser erhöhen müssen.
Für weitere Meinungen und Aussagen, haben wir die Aussagen der Testpersonen dokumentiert, um zu sehen, welche weiteren/anderen Probleme oder auch Anmerkungen sie hatten.


Generell ist unser Prototyp ganz gut angekommen, es waren jedoch immer kleinere Details die bemängelt worden sind, welche wir uns für unsere anzustrebenden Verbesserungen notiert haben. Basierend auf diesen Erkenntnissen konnten wir die User Stories erstellen.
User Stories
Anhand der Testergebnisse konnten wir “User Stories” definieren, die uns Aufschluss über die nächsten Schritte gegeben haben. Angefangen haben wir, mit dem typischen Ulmer Bürger, welcher auf dem aktuellen Stand bleiben möchte.

Dann folgte der Ulmer Bürger, der ein Anliegen hat.

Zuletzt folgte der Tourist, der an den Sehenswürdigkeiten von Ulm interessiert ist.

Implement Phase
Flow Charts
Für den digitalen Portier im Rathaus haben wir User Flows erstellt, die mehrere Nutzerpfade abdecken. Die wichtigsten Nutzungen sind hier die Terminbuchung und Sehenswürdigkeitensuche.
Ziel: Um die User Experience so reibungslos, nutzerfreundlich und Barrierefreundlich wie möglich zu gestalten, gehen wir hier auh auf mögliche Probleme und Fehlerseiten ein.


Style Guide


Verbesserter Prototyp
Anhand unserer Erkenntnisse haben wir den Prototypen angepasst und verbessert, um ihn nutzerfreundlicher zu gestalten und ein kohärenteres Gesamtbild zu erschaffen.
Termin Icon entfernt, da Nutzer Schwierigkeiten hatten es zu verstehen
Dienstleistungen in der Priorität nach oben gesetzt, da der Fokus auf diesen liegen soll
Chatbot als “Hero Element” eingesetzt
Startseite verlängert, mehr Informationen bereitgestellt, wie direktes Termin ausmachen oder Raumplan
Viele Slider als UI Elemente genutzt um auf Sub-Seiten wenig bis kein Scrolling zu haben (Ziel: Einfachheit/Reduktion)
A0 Mockup Poster
Als Mockup und Zusammenfassung dient noch das A0 Poster für das Projekt.

Fazit
Das Hauptziel im Fach Interaction Design 1 war es, einen Prototypen eines digitalen Portiers für die Stadt Ulm zu gestalten.
Dieses Ziel haben wir erreicht und sind zufrieden mit dem Ergebnis.
Durch Verteilung von Aufgaben im Team, Absprachen und konsequenten Zusammenarbeiten konnten wir ein spannendes, sowie modernes Projekt verwirklichen. Durch die Terminplanung und Einteilung von Prof. Gerbaulet hatten wir selten das Gefühl das Aufgaben nicht zu bewältigen waren oder dass es zu größeren Problematiken durch zeitlichen Aufwand kam.
Generell konnte jeder seine Stärken und Schwächen mit ins Team bringen, was uns zu einer interessanten und auch vielfältigen Gestaltung des Portiers brachte.
Für uns war es interessant zu sehen und auch selber zu erleben, wie ein solches Projekt von Grund auf erschaffen wird. Der ausführliche Prozess war spannend und hat uns geholfen eine Einsicht in das Gestalten solcher Projekte zu bekommen.
Auch war es spannend und eine wertvolle Lernerfahrung, zu sehen wie User Feedback ein Projekt und dessen Gestaltung verändern kann. Wie eigene Erwartungen mit denen von Nutzern kollidieren, man diese vergleichen und abwägen muss.
Zudem war dieses Projekt durch seine mögliche reale Umsetzung besonders spannend und motivierend, da es nicht nur die Neugier sondern auch den Ehrgeiz weckt.
Mit großer Wahrscheinlichkeit werden wir vieles, was wir durch die Arbeit an diesem Semesterprojekt gelernt haben, mit auf unseren weiteren (Arbeits-)Weg mitnehmen.
Insgesamt sind wir stolz auf das was wir erreicht haben und die Erkenntnisse die wir dabei gewonnen haben.
Quellen
Bilder im Portier: https://www.ulm.de/ (Zugriff 26.01.2025)
Digitales Rathaus Schwäbisch Hall: https://buergerservice.schwaebischhall.de/startseite (Zugriff 26.01.2025)
Das Bayernportal: https://www.bayernportal.de/ (Zugriff 26.01.2025)
Stadt Freiburg: https://www.freiburg.de/pb/205252.html (Zugriff 26.01.2025)
Digitales Rathaus Darmstadt: https://digitales-rathaus.darmstadt.de/ (Zugriff 26.01.2025)
Stadt Hamburg: https://www.hamburg.de/barrierefrei (Zugriff 26.01.2025)
Stadt München: https://stadt.muenchen.de/buergerservice.html (Zugriff 26.01.2025)
Stadt Frankfurt: https://frankfurt.de/service-und-rathaus/service ; https://frankfurt.de/leistungen (Zugriff 26.01.2025)
Stadt Kempten: https://www.kempten.de/digital-29034.html (Zugriff 26.01.2025)
Stadt Mainhausen: https://www.mainhausen.de/digitales-rathaus (Zugriff 26.01.2025)
Stadt Heidelberg: https://www.heidelberg.de/HD/Rathaus.html (Zugriff 26.01.2025)
Stadt Magdeburg: https://www.magdeburg.de/B%C3%BCrger-Stadt/Verwaltung-Service/B%C3%BCrgerService/Online-Services/Was-erledige-ich-wo-.php?object=tx,37.42104.1 (Zugriff 26.01.2025)
Typografie (DM Sans): https://fonts.google.com/specimen/DM+Sans (Zugriff 26.01.2025)
Icons: https://fonts.google.com/icons (Zugriff 26.01.2025)