| Branche: | Öffentliche Verwaltung, Tourismus |
| Herausforderung: | Konzeption einer responsiven Webseite, die es den unterschiedlichen Nutzergruppen erlaubt ihre Ziele schnell, einfach und unkompliziert zu erreichen. |
| Meine Rolle: | Komplettes Design von der Recherche zur Konzeption über die Visualisierung und Testung. |
Forschung
Die Zielgruppe und den Markt kennen lernen
Interviews planen und durchführen
Smartberg möchte zu einer attraktiven Stadtmarke werden um Reisende anzuziehen. Die Website soll hierzu zu einer Art Serviceplattform erweitert werden. Mittels einer Interview-Studie wollte ich die Erwartungen, Bedürfnisse und Pain Points der Nutzenden verstehen lernen.
Forschungsziele
- Was sind die Top Tasks des Nutzenden bei der Buchung einer Reise?
- Wie, wann und wo entscheiden Reisende sich für ein Reiseziel?
- Wie bereiten sich Reisende auf eine Reise vor?
- Woher beziehen sie ihre Informationen?
- Mit welchen Schwierigkeiten sehen sich Reisende bei der Reiseplanung konfrontiert?
- Wie sieht die Erwartungshaltung von Reisenden bei der Nutzung bestehender Services und Angeboten aus?
- Welche Themen sind während der Reise für Reisende relevant?
- Welche Hilfsmittel nutzen die Reisende (on, offline)?
- Wem oder was vertrauen sie?
- Warum bucht er oder sie eine Reise auf der Website/App?
Erkenntnisse aus den Interviews
Events und Sehenswürdigkeiten locken in die Stadt. Webseiten, wie trivago.de aber auch Google Maps und Hotelwebseiten kommen bei der Recherche zum Einsatz.
Die Anforderungen an ein Hotel sind bestimmt von der Lage und Erreichbarkeit. Die letztendliche Auswahl des Hotels ist von unterschiedlichen persönlichen Präferenzen der Zahlungsmittel, wie z.B. Barzahlung, und/oder über den Preis bestimmt.
Positiv aufgefallen sind günstige Preise, ansprechende Seiten, die vertrauenswürdig und nicht generisch wirken.
„Man bucht, was man sieht.“
Eine große Schwierigkeit bildet fehlende Diversität bei den Zahlungsoptionen, mangelnde telefonsiche Erreichbarkeit, sowie fehlende Optionen zur Reservierung. Die Mediennutzung vor Ort ist unterschiedlich ausgeprägt. Abhängig vom Datenvolumen werden sich Workarounds geschaffen und z.B. Screenshots genutzt.
Learnings
Zurückhaltung bitte! Um die Ergebnisse möglichst unverfälscht zu erhalten, ist höchste Zurückhaltung bei der Kommentierung der Aussagen des Nutzers angesagt.
Vor Durchführung der Interviews hat es sich herausgestellt, dass ein Probelauf hilfreich ist, da dadurch aufgedeckt werden kann, ob die Reihenfolge der Interviewfragen den Gesprächsfluss voran treiben oder hinderlich sind.
Persona & Empathy Map
Für ein greifbareres Bild über die Zielgruppe der Reisenden habe ich am Beispiel von Mila eine Empathy Map, sowie eine Persona erstellt. Die Basis bildeten die Interviewergebnisse, Sekundärliteratur, Beobachtungen aus dem Freundeskreis, sowie Annahmen, die ich aus den bisherigen Erkenntnissen geschlossen hatte.
Learnings
Sowohl bei der Empathy Map, als auch bei der Persona handelt es sich um Momentaufnahmen der aktuellen Annahmen und Erkenntnisse, die über das Projekt hinweg verifiziert werden müssen. Sie dienen als Hilfestellung zur Herangehensweise an nachfolgende Prozessschritte und sollten daher immer wieder hinterfragt und bei Bedarf korrigiert werden.
Customer Life Cycle
Das Konzept des Customer Life Cycle hilft dabei, die Bedürfnisse der Nutzenden zu verstehen und Marketingstrategien entsprechend anzupassen. In diesem Fall für die Tourismusgewinnung von Smartberg.
Es beschreibt verschiedene Phasen, die der Nutzende von der ersten Interaktion bis zur Buchung und vor allem darüber hinaus durchläuft. Hiermit habe ich erste Ansatzpunkte gefunden, die auf der zukünftigen Webseite berücksichtigt werden sollten.
Learnings
Je nach Zielsetzung können die Maßnahmen in den einzelnen Phasen komplett unterschiedlich sein.
Der Blick gilt hierbei nicht nur der Webseite sondern geht weit darüber hinaus, was für eine ganzheitliche Betrachtung der User Experience unabdingbar ist.
Customer Journey Map
Für ein tieferes Verständnis der Pain Points von Nutzern und möglicher Touchpoints entwickelte ich eine Customer Journey Map. Sie beginnt mit der Planung der Reise und endet mit der Ankunft daheim. Das User Scenario habe ich am Beispiel von Mila, der zuvor erarbeiteten Persona, aufgebaut.
User Scenario
Mila sucht eine geeignete Unterkunft für ihren anstehenden Kurztrip nach Smartberg. Sie sucht nach etwas abseits der Touristenhochburgen mit gutem Anschluss an den ÖPNV. Am liebsten umgeben von viel Grün.
Erkenntnisse aus der Customer Journey Map
Klare und einfache Struktur der Informationen und ein problemloser Buchungsvorgang tragen essentiell zu einer Hohen Zufriedenheit des Nutzers in den Phasen Planung und Buchung bei. Direkt erreichbare und einfache Vergleichsmöglichkeiten der Angebote erleichtern dem Nutzer die Suche nach dem passenden Angebot.
Pain Points während der Reise können verspätete Zugverbindungen, verpasste Anbindungen oder Zugausfälle, welche längere Wartezeiten und insgesamt eine längere Reisezeit zur Folge haben darstellen. Überbuchte Zimmer oder Mängel an der Unterkunft können weiteren Unmut auslösen. Hier sind schnelle und effektive Lösungen für den Nutzer nötig um das Urlaubserlebnis wieder angenehm zu gestalten.
Learnings
Die Customer Journey Map ist ein tolles Tool zur Veranschaulichung möglicher Pain Points – im Verlauf des gesamten Nutzererreise – für sich selbst als auch gegenüber anderen Projektteilnehmern, sowie zur Ideengewinnung möglicher Maßnahmen.
Die Map könnte die Schritte noch kleinteiliger zeigen und sogar noch vor der Planung beginnen oder noch weiter bis zu einer erneuten Buchung reichen. Dies ist in Abhängigkeit mit den Zielvorgaben abzuwägen.
User Scenario: Tisch Reservierung
Um mit einem User Scenario zu arbeiten habe ich das Beispiel der Tischreservierung in einem Restaurant, welches vegane Speisen anbietet, herangezogen. Eine konkrete Aufgabe ist vom Nutzer zu erfüllen und die einzelnen Schritte können mit Fragen, Kommentaren und Ideen versehen werden.
Learnings
Ein User Scenario ist der Blick auf eine konkrete Aufgabenstellung an den Nutzer.
Das Tool bietet mir die Grundlage für konzeptionelle Ideen für die Webseite, indem ich mir die Tasks, die Nutzer vor sich haben bewusst mache und direkte Lösungen erarbeiten kann. Vorstellbar ist die Nutzung des Mittels des User Scenarios zum Austausch mit Kollegen, in Workshops besonders auch abteilungsübergreifend. Gerade auch konkretere Ideen könnten hier mit der Entwicklungsabteilung besprochen und festgehalten werden.
Marktanalyse
Zum besseren Verständnis des derzeitigen Angebots der Mitbewerber schaute ich mir im besonderen die Webseiten der Städte Freiburg, Trier, Bamberg und Tübingen an. Eine SWOT-, sowie Produktanalyse wurde von mir vorgenommen.
Auf Basis der Erkenntnisse lassen sich weitere Ideen für Smartberg ableiten. Besonders die Produktanalyse war aufschlussreich. Die Unterschiede in Bildsprache, Layout und Funktionalität zu betrachten
Learnings
Das Analysieren und auseinander nehmen von Produkten macht mir Spaß.
Die SWOT-Analyse kann sich aufgrund mangelnder Daten als schwierig herausstellen.
Usability Testing mit Nutzern
Think Aloud Methode
Als Testobjekt diente die Webseite von Bamberg. Ich stellte mehrere Aufgaben, die der Nutzer zu bewältigen hatte. Unter anderem die Recherche nach Öffnungszeiten des Altstadt-Museum oder der Suche nach den Top-Sehenswürdigkeiten. Zudem ließ ich die Wirkung der Seite auf den Nutzer beschreiben, indem ich ihn aufforderte einfach zu beschreiben was er sieht.
Interessant zu beobachten waren insbesondere die Momente, in denen die Erwartungshaltung nicht erfüllt wurde. So hat die Headline „Top-10-Sehenswürdigkeiten“ nicht die versprochenen Top 10 geboten sondern eine lose Sammlung.
„Was ist denn hier jetzt die TOP-1-Sehenswürdigkeit?“
Learnings
Nutzer tun und sagen unterschiedliche Dinge. Selbst mit kurzem Abstand können sie nach dem größten Fluchen die Nutzererfahrung noch als insgesamt ganz gut bewerten.
Bei Nachfragen ist darauf zu achten seine eigene Bewertung nicht einfließen zu lassen.
Strategie
Interne Kommunikation
Value Proposition Canvas – Das Werteversprechen
Für ein gemeinsames Verständnis der Kundengruppen und mittels der Ergebnisse aus dem Research wird ein Value Proposition Canvas erstellt. Aus ihm leiten sich die Grundlagen für mögliche Funktionalitäten und Services ab.
Scope-Matrix
Aufgrund der vielen Anforderungen von unterschiedlichen Stellen, die bei einem solchen Projekt zusammen kommen und der meist zeitlichen Begrenzung eines Projekts, ist es wichtig die Anforderungen zu priorisieren. Mittels der Scope-Matrix habe ich die Anforderungen aus verschiedenen Blickwinkeln, wie der Stadt oder der Nutzer, Prioritäten zugeordnet und dem von mir eingeschätzten Business Value gegenübergestellt.
Learnings
Ohne einen realen Ansprechpartner konnte ich die Liste nicht mit Stakeholdern abstimmen, was für mich unerlässlich ist. Die Scope-Matrix eignet sich hervorragend, um frühzeitig eine Basis für die Definition eines Minimum Viable Products (MVP) zu schaffen.
User Story Cards Mapping
Mittels User Stories werden die vorausgegangenen Vorüberlegungen aus der Scope-Matrix weiter verfeinert und mit einem Akzeptanzkriterium versehen. Sie werden aus der Sicht des Antragstellers/Nutzers formuliert.
Learnings
Die Akzeptanzkriterien sind ebenfalls aus der Sicht des Antragstellers formuliert. Schwierig ist dabei für mich, dass dabei technische sowie rechtliche Anforderungen nicht mit abgedeckt werden.
Das User Story Mapping sollte im Workshop mit dem Team und Stakeholdern durchgeführt werden, da mir diese fehlten, basiert das Mapping auf meinen alleinigen Annahmen.
Stakeholder Management
Mit Hilfe der Stakeholder Map und dem Power Interest Grid erhält man einen Überblick über die Beteiligten und eine Möglichkeit der Eigenorganisation von Informationsflüssen.
Learnings
Eigenorganisation in diesem Bereich ist wichtig und kann sich positiv auf das Zeitmanagement auswirken und Missverständnisse oder gar Blocker vermeiden. Bleiben alle Beteiligten konstant und gut informiert ist das die halbe Miete.
Informationsarchitektur
Inhalte sinnvoll strukturieren
Card Sorting
Aus den zuvor erarbeiteten Werteverpsrechen und den Einflüssen der vorangegangenen Recherche halte ich die Themen der Webseite fest und beginne mit einer ersten Strukturierung.
Sitemap
Im nächsten Schritt erstelle ich unterschiedliche Sitemaps auf Basis der Schemata: Nutzer, Aufgaben und Thematisch. Sie bilden die Grundlage für den Aufbau der schlussendlichen Navigation
Learnings
Für mich persönlich ist Card Sorting eine tolle Möglichkeit die Inhalte abseits der Webseite zu strukturieren. Gleichfalls aber auch eine super Methode um bereits erarbeitete oder bestehende Navigationsstrukturen zu testen.
Der Aufbau der Sitemap nach verschiedenen Schemata kann sich lohnen, wenn ein Projekt wirklich bei null anfängt, neue Inhalte hinzukommen oder um eine neue Perspektive zu gewinnen.
Navigation & Suche
Basierend auf den Ergebnissen des Card Sortings entwickelte ich die Navigationsstruktur. Anschließend fertigte ich erste Scribbles an, um verschiedene Ansätze für die Navigation auf der Webseite zu visualisieren.
Für die Suche setzte ich mich mit den gängigen Platzierungen von Suchboxen auseinander, der Autovervollständigung und Filtern. Anschließend entstanden auch hier erste Scribbles.
Learnings
Mehr Ebenen innerhalb der Struktur bedeuten mehr Klicks für den Nutzer.
Zu flache Strukturen erfordern massive Navigationsmenüs.
Die Wahl der Navigationsart ist von Inhaltsmenge und Struktur abhängig.
Flow Charts
Anhand des Beispiels eines Ticketkaufs für eine Theatervorstellung und der Beantragung des Personalausweises erstellte ich erste User Flows, um die einzelnen Schritte des Nutzers bis zum Erreichen seines Ziels klar zu erfassen – ohne Berücksichtigung emotionaler Faktoren.
Wireflows
Nach Klarheit über die Prozessschritte fertigte ich die Wireflows an. So näherte ich mich Schrittweise einer konkreten Visualisierung an.
Learnings
Ich sehe Flow Charts als eine wertvolle Grundlage, um Abstimmungen zu erleichtern und ein gemeinsames Verständnis für den Prozess zu schaffen – ohne dass bereits konkrete Visualisierungen erstellt werden müssen. So lassen sich unangenehme Überraschungen und zeitintensive Änderungen vermeiden. Persönlich denke ich sehr schnell visuell und habe in bisherigen Projekten früh mit visuellen Konzepten gearbeitet. Es wird interessant sein, diese Herangehensweise auch in zukünftigen Projekten zu integrieren.
Cores & Paths
Mithilfe des Konzepts von Cores & Paths habe ich alle wichtigen Punkte, die es für die Homepage zu berücksichtigen gilt noch einmal zusammengefasst.
Learnings
Auf der Homepage kommen viele Anforderungen zusammen. Mithilfe von Cores & Paths kann ich mir diese noch einmal bewusst machen und im nächsten Schritt der Visualisierung berücksichtigen. Eine Grundlage um sich auch darüber mit Stakeholdern auf eine Basis zu einigen.
Informations- & Interactiondesign
Wireframes und Prototypen
Auf Grundlage der erstellten Scribbles habe ich erste Wireframes erstellt. Die Prototypen erlauben eine erste Testung der Nutzerführung und der Bedienbarkeit in der Anwendung. Die Navigation, eine Suchfunktion und der Prozess Personalausweis beantragen werden als Prototyp von mir abgebildet.
Navigation
Suchfunktion
Prozess Personalausweis beantragen
Prozess KFZ-Anmeldung mit Wunschkennzeichen
Responsive Design Startseite
Nun geht es darum, den Aufbau und die Struktur der Startseite zu planen. Dazu skizziere ich verschiedene Ideen in Form von Scribbles und ergänze sie mit Anmerkungen, die meine Überlegungen verdeutlichen. Der Schwerpunkt liegt dabei auf der Responsivität, wobei ich den Mobile-First-Ansatz verfolge. Abschließend erstelle ich die entsprechenden Wireframes der Versionen, die mir am treffendsten schienen.
Learnings
Die Vorarbeit dient als Argumentationsgrundlage für konzeptionelle Entscheidungen.
Figma bietet viele Möglichkeiten der einfachen Erstellung von Prototypen, dabei gibt es Ähnlichkeiten aber auch Unterschiede zu Adobe XD. Wobei die Kooperationsmöglichkeiten in Figma für mich unschlagbar sind.
Responsive Design vs. App
An dieser Stelle der Weiterbildung wurde noch einmal die Möglchkeit der Entwicklung einer App angesprochen. Meine Aufgabe war es zum einen Überlegungen anzustellen welche Features diese App beinhalten könnte und zum anderen Vor- und Nachteile einer App gegenüber einer responsiven Webseite gegenüber zu stellen.
Learnings
Die Wahl ob eine responsive Webseite und/ oder eine App umgesetzt wird, kann verschiedenste Gründe haben und ist von verschiedenen Faktoren abhängig.
Designsystem
User Interface
Moodboards
Nach intensiver Recherche und inhaltlicher Vorbereitung startete ich mit der visuellen Ausarbeitung. Unter Berücksichtigung der Marktanalyse, der bisherigen Projektergebnisse und aktueller Design-Trends entwickelte ich drei verschiedene Moodboards, die unterschiedliche Gestaltungsansätze veranschaulichen.
Learnings
Trotz der inhaltlichen sehr umfangreichen Vorbereitung, fehlte mir an dieser Stelle die konkrete Positionierungsabsicht von Smartberg gegenüber anderen Städten. Die Moodboards wären für mich in einem realen Projekt lediglich eine Grundlage für Tonalität und Bildwelt, die weiter ausgearbeitet werden müsste.
Styleguide
Ich entschied mich schließlich für den Ansatz der „ökologischen Stadt“ und entwickelte darauf basierend den ersten Entwurf eines Styleguides.
Learnings
Die Anlage eines Desginsystems in Figma muss ich mir noch genauer ansehen.
Nichts von dem was hier festgehalten ist, ist in Stein gemeißelt.
Screendesign
Nun folgte die Ausarbeitung des Screendesigns der Startseite für Desktop und Mobil.
Learnings
Farbwahl und Bildwelt müssten auf Barrierefreiheit überprüft werden. Hierzu können verschiedene Tools angewendet werden.
Abschließende Überlegungen
Da es sich hierbei um ein fiktives Projekt im Rahmen einer Weiterbildung handelte fehlte mir konkretes kundenseitiges Feedback, welches mich in meinen Entscheidungen sicherlich beeinflusst hätte. Die Hilfestellung durch die Mentorin konnte dies nicht ausgleichen.
Bei ausreichend Zeit wären weitere Personas von mir erstellt worden wie von Rentnern, Studenten, Unternehmern etc. Dementsprechend hätte ich auch weitere User Scenarios durchgespielt.
Das Testen der Kontraste bei Auswahl von Typografie und Bildwelt kam leider auch zu kurz.
Alles in allem eine Weiterbildung, die einem einen guten Überblick über die Methoden bietet. Das Beispiel-Projekt ist allerdings sehr ambitioniert. Ich weiß nicht ob ein kleinerer Umfang und dafür ausgiebigere Anwendung der Methoden für mich zielführender gewesen wäre.
powered by Borlabs Cookie