Einleitung

Im Rahmen eines Kooperationsprojekts mit der Stadt Ulm haben wir ein digitaler Portier für das Rathaus entwickelt. Unser Ziel war es, eine barrierefreie und intuitive Lösung zu schaffen, die allen Menschen gleichermaßen zugänglich ist. Dabei lag der Fokus auf Nutzerfreundlichkeit und der Berücksichtigung unterschiedlicher Bedürfnisse, um eine inklusive und zeitgemäße Plattform bereitzustellen.

Vorraussetzungen für das Projekt

1. Personalisierung der Inhalte Je nach Nutzerprofil soll eine individuell zugeschnittene Auswahl an Inhalten vorgeschlagen werden, die den Interessen und Bedürfnissen des jeweiligen Nutzers entspricht.
2 .Interaktivität Das Design des Portiers sollte eine natürliche und interaktive Nutzererfahrung bieten, die den Usern zahlreiche Handlungsmöglichkeiten und eine angenehme, intuitive Navigation ermöglicht.
3. Automatisierung administrativer Aufgaben Der Portier soll den Bürgern, Touristen und Angestellten im Rathaus dabei helfen, administrative Aufgaben effizient zu erledigen, indem er Routineprozesse automatisiert und vereinfacht.
4. Zugänglichkeit Der Portier soll besonders benutzerfreundlich gestaltet sein, sodass er für eine breite Zielgruppe – unabhängig von Alter, Erfahrung oder technischen Fähigkeiten – verständlich und leicht nutzbar ist.
5. Sicherheit & Transparenz Der Portier gewährleistet den Schutz persönlicher Daten durch höchste Sicherheitsstandards. Alle Informationen werden vertraulich behandelt, um die Privatsphäre der Nutzer zu wahren und ein hohes Maß an Transparenz zu bieten.

Phase 1: Empathie entwickeln und Probleme definieren

In dieser Phase sollten wir uns damit beschäftigen, welche Probleme Personen begegnen, die mit der Seite Ulm.de und dem Rathaus generell interagieren.

“Welche Personen gehen ins Rathaus?”

“Warum geht man ins Rathaus?”

“Was will die Person im Rathaus erreichen?”

“Erreicht die Person diese Ziele oder gab es Hürden auf dem Weg?”

Diese und weitere Fragen haben wir uns gestellt und eine erste Umfrage durchgeführt.

Ergebnisse der Umfrage zum digitalen Portie an BürgerInnen von Ulm

Befragt wurden insgesamt 42 Personen

Ergebnisse der Umfrage zum digitalen Portie an ToristInnen von Ulm

Befragt wurden insgesamt 25 Personen

Umfrageergebnisse der BürgerInnen, unserer primäre Zielgruppe zusammengefasst

  • Es haben insgesamt 42 Personen an der Umfrage teilgenommen. Die Mehrheit der Befragten ist zwischen 16 und 25 Jahren alt.

  • 57% der Teilnehmenden waren bereits einmal im Rathaus. Die Hauptgründe für den Besuch waren: 4 Personen nahmen an einer Führung teil, 5 besuchten eine Hochzeit, 6 kamen wegen Anträgen und 3 besuchten das Rathaus "einfach so".

  • Wichtige Themen für die Befragten sind Informationen über öffentliche Verkehrsmittel, kulturelle Angebote und die verschiedenen Ämter. Datenschutz wird von allen Teilnehmenden als sehr wichtig erachtet.

  • Ein weiteres wichtiges Anliegen ist die Möglichkeit, Informationen in verschiedenen Sprachen zur Verfügung zu haben.

  • Die Einführung eines digitalen Maskottchens stößt bei 50% der Befragten auf Zustimmung.

Affinity Mapping

Affinity Mapping ist eine Methode, bei der Ideen oder Informationen auf Karten geschrieben und basierend auf Ähnlichkeiten in Gruppen sortiert werden, um Muster und Zusammenhänge zu erkennen.

In unserem Fall haben wir Aussagen und Informationen von BürgerInnen sowie TouristInnen gesammelt und thematisch geordnet.

Bürger

Ulm zählt rund 126.000 Einwohner, von denen viele täglich auf wichtige Informationen, Formulare, Anträge oder Termine angewiesen sind.

Viele Bürger möchten sich kurzerhand im Rathaus über verschiedene Angelegenheiten informieren oder sind noch nicht lange in Ulm und gehen davon aus, dass sie dort sämtliche Auskünfte erhalten können. Dank des digitalen Portals können diese Personen nun schnell und unkompliziert die gewünschten Informationen erhalten – ganz ohne direkten Kontakt oder lange Wartezeiten bei den ServicemitarbeiterInnen.

Touristen

Touristen informieren sich in der Regel anders als Einheimische – sie interessieren sich vor allem für kulturelle Veranstaltungen, Sehenswürdigkeiten und Restaurants.

Ulm wird jährlich von über 500.000 Menschen besucht. Nicht alle davon nutzen ein Smartphone oder planen ihren Aufenthalt im Detail im Voraus. Gerade für diese Gruppe könnte ein digitaler Guide eine wertvolle Unterstützung sein, um das Beste aus ihrem Besuch in der Stadt herauszuholen.

Personas

Um die User Journey zu veranschaulichen, haben wir drei fiktive Personas erstellt. Diese repräsentativen Charaktere helfen uns dabei, den Ablauf am digitalen Portier verständlich und nachvollziehbar darzustellen.

    User Journey & Problem Statements

    Wir haben mithilfe unserer Personas die fiktive Reise der Nutzer durch das ideale Terminal nachgezeichnet. Dabei haben wir nicht nur ihre emotionalen Zustände, sondern auch potenzielle Herausforderungen und Probleme identifiziert. Diese Erkenntnisse nutzen wir, um diese in unserem eigenen Design zu beachten.

    Phase 2: Ideen und Prototypenentwicklung

    In dieser Phase entwickelten wir erste Lösungsansätze für die identifizierten Probleme. Um innovative Ideen zu generieren, haben wir analysiert, wie Konkurrenten vergleichbare Projekte umgesetzt haben. Auf Basis dieser Erkenntnisse entstand ein erster Prototyp.

    Konkurrenzanalyse

    In dieser Wettbewerbsanalyse wurden die Terminals von McDonald’s, der Sparkasse und der AOK untersucht. Dabei wurden sowohl positive Aspekte als auch Verbesserungspotenziale identifiziert und daraus entsprechende Erkenntnisse abgeleitet.

    Alle Ideen wurden gesammelt und in Form einer Mindmap dargestellt, um einen klaren Überblick zu schaffen. Dadurch wird es einfacher, weitere Punkte bei Bedarf hinzuzufügen oder bestehende zu entfernen. Diese strukturierte Herangehensweise ermöglichte es uns eine flexible und gezielte Weiterentwicklung der Inhalte.

    Die SCAMPER-Methode ist ein Werkzeug zur Ideenfindung, das kreative Denkprozesse fördert. SCAMPER steht für sieben Ansätze: Substitute (Ersetzen), Combine (Kombinieren), Adapt (Anpassen), Modify (Verändern), Put to another use (Anders nutzen), Eliminate (Eliminieren) und Reverse (Umkehren). Durch diese Fragen konnten wir bestehende Ideen hinterfragen, variieren und weiterentwickeln, um Lösungen zu finden.

    S(ubstitute) Was kann ersetzt werden? Text -> Ersetzt durch aussagekräftige Icons
    C(ombine) Was kann kombiniert werden? Informationssuche bzw. Formulare werden mit Stadtinformationen/Nachrichten kombiniert
    A(dapt) Was kann angepasst werden? Leichte Sprache (Anpassen an Menschen mit Behinderung: Aux Port für Personen mit Sehschwäche, High Contrast Design, große Schrift / nicht deutsche Muttersprachler), Mehrere Sprachen anbieten
    M(odify) Was kann verändert werden? Maskottchen animieren, Highlights bei gesuchten Unterpunkten (stehen im Spotlight)
    P(ut to another use) Kann man es anders nutzen? Wegweiser für Informationsstand, Orientierungsstreifen ab Boden (auffällig, weil Bildschirm leuchtet)
    E(liminate) Was kann man weglassen? Zu ausführliche Passagen weg lassen bzw. per QR-Code verlinken (Bsp.: Formulare), Icons aussagekräftig gestalten (überschüssige Details weglassen)
    R(everse/Rearrange) Was passiert wenn man etwas neu anordnet? Strukturierte Onepager die man abarbeitet Navigation in Kacheln Möglichkeit zum Nachrichten anschauen direkt nach dem Startbildschirm als einzelne Kachel

    Die Anwendung der MoSCoW-Methode hat uns geholfen, klare Vorgaben zu definieren. Dadurch konnten wir unsere Prioritäten besser erkennen und uns gezielt auf die wichtigsten Aspekte konzentrieren. Dies hat nicht nur die Effizienz gesteigert, sondern auch die Qualität unserer Arbeit verbessert.

    Must-have

    • Terminverwaltung

    • Ulm-News

    • Suchfunktion

    • Kontaktauskunft

    Should-have

    • FAQs

    • Informationsausgabe

    • Feedback-Formular (über Nutzung des Portiers)

    Could-have

    • Maskottchen

    • Veranstaltungskalender

    • Besuchscounter

    Won't-have

    • Log-In

    • Digitaler Wegweiser

    Low-Fidelity Wireframe

    Um einen groben Überblick und eine Struktur für das spätere digitale Portfolio zu schaffen, wurden im ersten Schritt grundlegende Skizzen angefertigt. Diese dienen als erste visuelle Orientierung und Grundlage für die weitere Ausarbeitung.

    Mid-Fidelity Wireframe

    Im weiteren Verlauf haben wir die anfänglichen Skizzen in graue Kästchen umgewandelt und damit begonnen, das Layout weiter zu entwickeln. Dabei wurden die einzelnen Elemente systematisch in den Wireframe integriert, um eine strukturierte und funktionale Gestaltung zu gewährleisten.

    High-Fidelity Wireframe

    Beim letzten Schritt wurde das Design überarbeitet, wobei die grauen Kästchen durch ein einheitliches, modernes Layout ersetzt wurden. Das Raster wurde optimiert und die Farben angepasst, um eine harmonische und ansprechende Optik zu gewährleisten. Diese Änderungen tragen zu einer besseren Übersichtlichkeit bei und verbessern die Benutzererfahrung insgesamt.

    Phase 3: Testen, Verbessern und Umsetzen

    Die finale Phase bestand aus einem iteraktiven Prozess von Testen und Optimieren des Prototyps, um ein möglichst ideales Endergebnis zu erzielen. Besonders in dieser Phase wurden zahlreiche Anpassungen am Design vorgenommen, um ein benutzerfreundliches und visuell ansprechendes Terminal zu schaffen.

    Styleguide

    Farbe zur Festlegung der Informationshierarchie:

    • Weißer Hintergrund à Wichtigste Elemente

    • Grauer Hintergrund à geringerer Kontrast, daher weniger wichtig

    Farbe als Statusindikator:

    • Schwarze Buttons sind zum anklicken

    • Weiße Buttons sind angewählt

    • Graue Drop Downs sind geöffnet 

    Typographie

    Schriftart:

    Frutiger LT

    Überschriften

    in 32pt & Bold

    Fließtext

    in 24pt mit 32pt Zeilenabstand

    Untertext

    in 16pt

    Icons

    Nutzung von Line Icons ohne Füllung für ein möglichst minimalistisches Design

    Es werden Icons zusätzlich zu Beschriftungen verwendet, um:

    • Das Design Visuell aufzulockern

    • Sprachlich leichter verständlich zu sein

    Strukturierung

    Raster aus

    • 15 Reihen

    • 6 Spalten

    Abstände = 20px

    Versch. Große Boxen für Versch. Inhalte:

    A: 3 Reihen = Bild mit Überschrift

    B: 2 Reihen = Icon mit Überschrift

    C: 1 Reihe + 1 Space = zweizeiliger Text

    D: 1 Reihe = einzeiliger Text

    E: 4 Reihen = Header Bild

    Usability Test

    Nachdem wir die finalen Wireframes erstellt hatten, begann die Testphase. In diesem Schritt präsentierten wir verschiedenen Testpersonen unseren Prototypen und führten sie durch die einzelnen Funktionen und Abläufe. Anschließend baten wir die Teilnehmer, einen Fragebogen auszufüllen. Dieser enthielt gezielte Fragen, die darauf abzielten, die Nutzerfreundlichkeit, Funktionalität und allgemeine Akzeptanz des Prototyps zu bewerten.

    Aus den Erkenntnissen haben wir folgende Ergebnisse abgeleitet:

    • Die Texte wurden als verständlich formuliert wahrgenommen.

    • Der Chatbot wurde in den meisten Fällen positiv aufgenommen und konnte hilfreiche Unterstützung leisten.

    • Ein geringer Anteil der Nutzer hätte sich eine Version in leichter Sprache gewünscht.

    • Die benötigten Informationen und Formulare wurden in der Regel auf Anhieb gefunden.

    • Die Wegbeschreibungen wurden besonders positiv bewertet.

    • 81,8 % der Befragten gaben an, durch den Einsatz des Portiers Zeit gespart zu haben.

    • Etwa 80 % der Nutzer würden nach einer kurzen Interaktion von 2 bis 7 Minuten den Serviceschalter aufsuchen.

    • Die Einführung des Chatbots hat die Effizienz bei der Informationsbereitstellung gesteigert und zur besseren Orientierung der Nutzer beigetragen.

    • Verbesserungsvorschläge konzentrieren sich vor allem auf die Integration einer leicht verständlichen Sprache, um eine noch größere Zielgruppe anzusprechen.

    • Die durchschnittliche Nutzungsdauer zeigt, dass der Chatbot den Kundenfluss optimieren und gleichzeitig Wartezeiten reduzieren kann.

    Flow Charts

    Unsere Ergebnisse daraus waren:

    • Übersichtlichkeit: Eine klare und strukturierte Darstellung der Informationen wird als essenziell betrachtet, um Nutzern eine einfache Orientierung zu ermöglichen.

    • Sprachliche Zugänglichkeit: Die verwendete Sprache sollte klar, präzise und leicht verständlich sein, um die Inhalte für alle Zielgruppen zugänglich zu machen.

    • Schnelle Verfügbarkeit von Informationen: Wichtige Informationen sollten ohne großen Aufwand und zeitliche Verzögerung zugänglich sein.

    • Gute Erreichbarkeit des Portiers: Der Portier sollte sowohl logistisch als auch zeitlich gut erreichbar sein, um einen reibungslosen Ablauf und eine effektive Kommunikation sicherzustellen.

    Implementierung eines responsiven Web-Prototyps

    Im letzten Schritt haben wir einen Prototypen unter Verwendung von HTML, CSS und JavaScript entwickelt. Dabei wurde nicht der gesamte Prototyp umgesetzt, sondern lediglich eine Auswahl an Seiten realisiert, um die grundlegenden Funktionen und das Design zu veranschaulichen.

    Im Rahmen dieses Projekts haben wir sowohl die Hauptseite als auch die Seite zur Mängelmeldung entwickelt. Die Hauptseite bietet eine klare Struktur und intuitive Navigation, während die Mängelmeldungs-Seite es den Nutzern ermöglicht, problemlos Probleme zu melden und diese schnell zu erfassen. Beide Seiten wurden als voll funktionsfähige Websites umgesetzt und sind responsiv, sodass sie auf verschiedenen Endgeräten optimal dargestellt werden.

    Hauptmenü

    Das Hauptmenü ist übersichtlich strukturiert und bietet dem Nutzer eine klare Navigation. Ein Chatbot am unteren rechten Bildschirmrand steht zur Verfügung, um bei Bedarf Unterstützung zu bieten.

    Das Burgermenü ist ebenfalls zugänglich, führt jedoch zu einer weiteren Seite, die aktuell noch nicht ausgearbeitet ist und beim Öffnen einen Fehler anzeigt.

    Mängelmelder

    Der Mängelmelder ist wie das Hauptmenü klar strukturiert und orientieren sich am Ulmer Design. Der Chatbot, der in der unteren rechten Ecke platziert ist, bietet jederzeit Unterstützung und Hilfestellung an.

    Mockups

      Fazit

      Das Semesterprojekt hat uns sehr viel Spaß gemacht und wir haben dabei wertvolle Erfahrungen gesammelt. Besonders wichtig war für uns zu lernen, wie entscheidend es ist, auch auf die kleineren Details zu achten. Obwohl wir mit vielen unserer Zwischenstände zufrieden waren, stellten wir fest, dass manchmal gerade die kleinen Dinge übersehen wurden, die den Unterschied ausmachen können.

      Wir haben zudem eine bemerkenswerte Verbesserung in unserer Arbeitsweise festgestellt und viel über Designprozesse gelernt. Wir haben nun ein besseres Auge für das Wesentliche entwickelt und erkannt, dass es oft möglich ist, viel mit wenigen, aber gezielt eingesetzten Elementen zu vermitteln.

      Trotz der organisatorischen Herausforderungen, die die Gruppenarbeit mit sich brachte, war die Zusammenarbeit im Team äußerst bereichernd. Es war interessant, gemeinsam an Lösungen zu arbeiten und voneinander zu lernen, wodurch wir als Team gewachsen sind.

      Gruppe 4 (Autoren):

      Elena Kimpel, Michelle Hollmann, Elena Falk, Pia Lutz, Junis Meuer

      Betreuung:

      Prof. Damian Gerbaulet