Email Kontakt:
Projektkontext
Viele bestehende City-Guide-Apps leiden unter komplizierten Buchungsprozessen, unklarer Nutzerführung und geringer Sichtbarkeit der angebotenen Touren und Guides.
Ziel unseres Projekts war es daher, die Nutzererfahrung einer City-Guide-App auf Grundlage realer Nutzerdaten und ISO 9241 deutlich intuitiver, einfacher und attraktiver zu gestalten.
Neben einer klaren Benutzerführung standen vor allem geschäftliche Ziele im Vordergrund, wie eine höhere Buchungsrate und bessere Auffindbarkeit der CityGuides.
Sektor
Tourismus, UX/UI-Design, nutzerzentrierte Lösungen
Meine Rolle
UX/UI Designer, verantwortlich für Nutzerforschung, Konzeption, Informationsarchitektur, Prototyping und visuelle Gestaltung (gemeinsam mit drei weiteren Grafikdesignern).
Projektzeit
4 Wochen, Nov.–Dez. 2024 (Analyse, Gestaltung, Prototyp, Präsentation)
Hinweis zu den Abbildungen:
Sämtliche Darstellungen dienen der Illustration des methodischen Vorgehens im UX/UI-Designprozess. Gezeigte Inhalte sind beispielhaft und nicht vollständig ausgeführt, um Datenschutz- und Vertraulichkeitsanforderungen einzuhalten.
01
Nutzungskontext verstehen
Die Analyse des Nutzungskontexts erfolgte menschenzentriert gemäß ISO 9241-210, unter Anwendung von Fragebogen und Empathy Map – orientiert an ISO 9241-11 und etablierten UX-Research-Ansätzen (z. B. Gray et al., 2010; NNGroup, 2023).
Methoden:
1. Empathy Map
-
Darstellung von Denkweise, Gefühlen und Bedürfnissen
der Nutzer. -
Einblicke in emotionale und funktionale Erwartungen.
2. Nutzerfragebogen
-
Ziel: Herausfinden, wie Nutzer Touren planen, welche Herausforderungen sie dabei haben und welche Funktionen sie als wichtig empfinden.
-
Der Fragebogen enthielt sowohl geschlossene als auch offene Fragen, um detaillierte Einblicke zu gewinnen. Insgesamt nahmen 58 Personen ohne eine gezielte Vorauswahl daran teil.
1. Empathy Map: Angewendet nach Gray, Brown & Macanufo (2010)
2. Nutzerfragebogen: Selbst konzipiert auf Basis gängiger UX-Research-Standards (vgl. Nielsen Norman Group, 2023).
Ergebnisse der Nutzungskontext-Analyse
Die gewonnenen Erkenntnisse aus der Kombination qualitativer und quantitativer Methoden ermöglichten ein tiefes Verständnis der Zielgruppe. Diese umfassende Analyse bildete die Grundlage für die Entwicklung von Personas, die typische Sorgen, Wünsche und Ziele der Nutzer widerspiegeln. Die Personas dienten anschließend als zentrale Basis für alle weiteren Designentscheidungen.
02
Nutzungsanforderungen ableiten
Auf Basis der Erkenntnisse wurden Personas entwickelt, um typische Nutzergruppen und ihre Bedürfnisse zu repräsentieren. Diese Personas halfen, klare Nutzungsanforderungen an die App zu definieren.
Erstellt auf Basis eigener Nutzerforschung in Anlehnung an standardisierte Persona-Methoden (z. B. NNGroup, 2023), markenzentrierte Ansätze nach Spies & Wenger (2020) sowie ergänzt durch eine emotionale Typisierung nach dem neuropsychologisch fundierten Limbic® Modell.
Erkentnisse aus Personas
-
Personalisierung: Nutzer wünschen sich Filteroptionen, die spezifische Präferenzen wie kinderfreundliche Touren, Barrierefreiheit und Tourthemen berücksichtigen.
-
Vertrauen: Detaillierte Guide-Profile mit Bewertungen, Bildern und direkten Kontaktmöglichkeiten stärken das Vertrauen der Nutzer:innen bei der Auswahl einer Tour.
-
Flexibilität: Anpassbare Funktionen wie die Auswahl von Dauer, Budget und Tourstopps ermöglichen individuelle Planungen.
-
Benutzerfreundlichkeit: Eine intuitive Navigation sorgt für stressfreies Planen, insbesondere auf mobilen Geräten.
03
Jobs To Be Done & Szenario Modell
Formuliert in Anlehnung an das JTBD-Framework nach Ulwick (2016).
Auf Basis der Personas und Nutzungsanforderungen wurden
Jobs-To-Be-Done (JTBD) formuliert, um die gewünschten Ergebnisse und Ziele der Nutzer zu identifizieren. Diese dienten als Grundlage für spezifische User Stories, die den Funktionsumfang der App definieren.
JTBD:
Die Jobs-To-Be-Done definieren die zentralen Aufgaben, die Nutzer mit der App erledigen möchten. Sie helfen, die Anforderungen an Funktionen und Nutzen der App klar zu strukturieren.
Szenariomodell:
Entwickelt in Anlehnung an den Nutzungskontext gemäß ISO 9241-210.
Nutzung der App durch die Persona.
Simulation realer Benutzungsszenarien, um die Erwartungen und Interaktionen der Persona mit der App zu verstehen.
04
Priorisierung der Anforderungen
Die Anforderungen wurden mithilfe der MoSCoW-Methode priorisiert (nach Clegg & Barker, 1994; vgl. Atlassian, 2023), um die wichtigsten Funktionen der App klar zu definieren und effizient umzusetzen.
Must-Have:
Should-Have:
Could-Have:
Won't Have:
-
Filteroptionen für Themen, Dauer, Budget und Barrierefreiheit.
-
Detaillierte CityGuide-Profile mit Bewertungen und Bildern und Chat-Funktion mit Guides.
-
Buchungsprozess: Transparente Preisangaben und minimalistische Eingabeschritte.
-
Interaktive Karten mit Echtzeitdaten der Tour.
-
Persönliche Tourvorschläge: Basierend auf individuellen Präferenzen.
-
Zusätzliche Features: Videos zu Touren oder erweiterte Filteroptionen (z. B. Bewertungen von Nutzern mit ähnlichen Interessen, wie Familien oder Kulturreisenden)
-
Funktionen, die in der aktuellen Entwicklungsphase nicht berücksichtigt werden, jedoch für zukünftige Versionen in Betracht gezogen werden können.
05
Gestaltungslösungen
Basierend auf den Erkenntnissen aus den Analysephasen wurde die App so gestaltet, dass Nutzer Tourguides und Touren gezielt nach Kriterien wie Dauer, Stationen der Tour, Barrierefreiheit, familienfreundlichen Angeboten und Gruppentouren filtern können. Die klar strukturierte Darstellung von Guide-Profilen und Tourdetails ermöglicht eine intuitive Navigation, die in den Prototypen getestet wurde.
5.1
Informationsarchitektur & Sitemap
Die Informationsarchitektur der App wurde mithilfe der
Card-Sorting-Methode entwickelt. (nach Spencer, 2009)
Diese Methode ermöglichte es, Inhalte logisch zu gruppieren und die Navigation intuitiv zu gestalten. Ergänzend wurden typische Nutzerflüsse (User Flow) modelliert, um sicherzustellen, dass die Struktur den häufigsten Anwendungsfällen entspricht.
Die daraus resultierende Sitemap zeigt die logische Verknüpfung der Haupt- und Unterseiten und bildet die Grundlage für die Navigation der App.
5.2
Mikro-Informationsarchitektur
Die Mikro-Informationsarchitektur wurde so gestaltet, dass sie sowohl eine intuitive Nutzung ermöglicht als auch die Unternehmensziele unterstützt. Strategische Schwerpunkte wie eine einfache Buchung, die gezielte Sichtbarkeit der Guides und eine hohe Nutzerinteraktion flossen in die Gestaltung ein. Eine prominente Darstellung der Guides mit Bewertungen und Filtermöglichkeiten steigert das Vertrauen der Nutzer und fördert Buchungen.
Klare CTAs, eine optimierte Inhaltsstruktur und eine mobile-first-Navigation unterstützen diese Ziele.
Basierend auf bewährten UX-Prinzipien und Studien zur Nutzerführung (z. B. Nielsen Norman Group, 2023) wurde die UI so gestaltet, dass Nutzer zunächst Inhalte erkunden können, bevor eine Anmeldung erforderlich ist. Dies reduziert Absprünge und erhöht die Interaktion.
5.3
Wireframes (Prototyping)
Für die App wurden Wireframes entwickelt, um die Struktur und Navigation frühzeitig festzulegen.
Sie dienten als visuelle Grundlage, um Inhalte sinnvoll anzuordnen und eine intuitive Benutzerführung zu ermöglichen. Nutzer können sich zunächst frei durch die App bewegen, bevor eine Anmeldung erforderlich wird. Dadurch sinkt die Absprungrate, während die Interaktion steigt.
Diese Wireframes bildeten die Basis für die nächste Designphase und die Erstellung von Prototypen.
5.4
Styleguide
Ein Styleguide wurde erstellt, um ein konsistentes und benutzerzentriertes Design zu gewährleisten. Die Farbpalette und Typografie wurden von einem Moodboard inspiriert, das die Atmosphäre und Zielgruppe der App widerspiegelt. Der Styleguide definiert zentrale Designelemente wie Farben, Schriftarten und wiederverwendbare Komponenten, die eine einheitliche Gestaltung unterstützen. Diese Grundlagen dienen nicht nur der Klarheit, sondern erleichtern auch zukünftige Anpassungen und Erweiterungen.
06
Prototyp
Der interaktive Prototyp dient als realistische Darstellung der CityGuide-App und zeigt die Umsetzung der zuvor definierten Anforderungen und Gestaltungslösungen. Er wurde entwickelt, um die Benutzerführung, Navigation und Kernfunktionen zu visualisieren und bietet eine klickbare Simulation des finalen Designs.
Prototyp Highlights:
-
Interaktive Navigation: Alle wesentlichen Funktionen, wie Filteroptionen, Guide-Profile und Buchungsprozesse, sind im Prototyp integriert.
-
Benutzerzentriertes Design: Der Prototyp adressiert die zentralen Bedürfnisse der Zielgruppe, wie intuitive Bedienung und klare Informationsstruktur.
-
Feedback-Integration: Erste Tests haben gezeigt, dass die App intuitiv bedienbar ist und wichtige Nutzeranforderungen erfüllt.
Der Prototyp wurde mit Figma erstellt und spiegelt die Erkenntnisse aus den Analyse- und Gestaltungsphasen wider. Er dient als Grundlage für weitere Tests und Optimierungen vor der finalen Entwicklung.
Erkenntnisse & Ausblick
Im Projekt CityGuide GoGermany wurden alle Phasen der benutzerzentrierten Gestaltung praxisnah durchlaufen – von der Analyse über die Konzeption bis hin zur Prototyp-Erstellung. Der Fokus lag darauf, den gesamten UX/UI-Designprozess anzuwenden und ein fundiertes Verständnis für nutzerzentrierte Gestaltung zu entwickeln.
In der Praxis würde man bei einem Produkt ohne Alleinstellungsmerkmal oft andere Methoden wählen. Hier stand jedoch das Üben des Designprozesses im Vordergrund.
Das Projekt hat gezeigt, wie wichtig es ist, Nutzerbedürfnisse frühzeitig zu analysieren und konsequent in die Gestaltung einzubinden. Diese Erkenntnisse bilden eine wertvolle Grundlage für zukünftige Produktdesigns, die sich an echten Nutzerbedürfnissen orientieren.
Quellen & verwendete Methoden (Auswahl)
-
DIN EN ISO 9241-210 (2019): Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme. Deutsches Institut für Normung e.V.
-
Gray, D., Brown, S. & Macanufo, J. (2010): Gamestorming: A Playbook for Innovators, Rulebreakers,
and Changemakers. O'Reilly Media.(Empathy Map) -
Ulwick, A.W. (2016): Jobs to Be Done: Theory to Practice. Idea Bite Press. (JTBD)
-
Clegg, D. & Barker, R. (1994): Case Method Fast-Track: A RAD Approach. Addison-Wesley. (MoSCoW-Priorisierung)
-
Spencer, D. (2009): Card Sorting: Designing Usable Categories. Rosenfeld Media. (Informationsarchitektur)
-
Nielsen Norman Group (2023): UX Research Methods & Best Practices. Abgerufen von: https://www.nngroup.com
-
Vgl. Nielsen Norman Group (2023): Users Abandon Sites with Early Login Walls. https://www.nngroup.com/articles/login-walls/
-
Spies, M. & Wenger, K. (2020): Branded Interactions – Marketing Through Design in the Digital Age. Thames & Hudson.
(Persona-Entwicklung im digitalen Markenprozess) -
Häusel, H.-G. (2015). Managementmodelle im Vergleich: Auf dem Prüfstand der Hirnforschung und des Limbic® Ansatzes. Gruppe Nymphenburg Consult AG, München.