Einleitung
Im alltäglichen Leben ist das Internet mit all seinen Möglichkeiten nicht mehr wegzudenken. Stundenlang wird dort Zeit verbracht und ein schneller Informationsaustausch ist gewährleistet. Doch wenn Informationen für einen Städtetrip gesucht werden, ist es leider oft der Fall, dass es nur reine Fakten zu der Stadt gibt und keinen Stadtführer, der auf die Bedürfnisse der Nutzer abgestimmt ist. Um diese Lücke im Leben einer
Zielgruppe zu füllen, ist es unser Ziel, eine Webseite zu generieren, in der eine Stadt auf neue, innovative Weise kennengelernt werden kann.
Diese Dokumentation soll den Gestaltungsprozess dieser Webseite darlegen und sportbegeisterten Menschen ermöglichen, eine Stadt kennenzulernen, indem man durch diese joggt.
Nutzer:innen verstehen
Brainstorm
Beim Brainstorming werden viele Ideen zu einer Stadtführungs-Webseite gesucht. Unter anderem wird eine spezifische Nische und damit verbundene Möglichkeiten generiert. In der Abbildung werden einige Möglichkeiten aufgezeigt, die für eine Webverbundene Stadttour möglich sind.
Weiterverfolgbare Nischen und damit auch Zielgruppen, wie zum Beispiel Schulklassen, Zugezogene oder Sportbegeisterte werden diskutiert und es wird ein ein Nischenbereich festgelegt.
Bei unserer Ziel-Nische handelt es sich um sportbegeisteret Menschen, die eine Stadt durch viel Bewegung kennen lernen wollen.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/01ff7fb382-1706008877/bildschirmfoto-2023-11-13-um-16-23-56.png)
Interviews
Nachdem die Nische definiert ist, werden Straßenumfragen durchgeführt, um auf die Bedürfnisse möglicher Interessenten einzugehen. Hierfür werden mindestens sechs Personen befragt, um ein aussagekräftiges Ergebnis zu erhalten.
Da unsere Nische sportbegeistere, reisefreudige Menschen beinhaltet, werden die Fragen, für die Interviews, zu diesen Themenbereichen aufgestellt.
Ziel ist es hier, möglichst viele und genaue Informationen zu erlangen, um die Webseite gut auf die Zielgruppe zuschneiden zu können. Somit werden folgende Fragen für die Straßenumfragen genutzt.
Die Ergebnisse der Straßenumfrage werden nun ausgewertet. Die Tabelle zeigt die Antworten der Befragten.
Aus der Umfrage geht heraus, dass viele Menschen zwischen 20 und 25 Jahren gerne Reisen. Wenn sie in eine neue Stadt kommen, suchen sie schöne Orte in der Natur, Sehenswürdigkeiten der Stadt und Museen auf. Dafür nutzen sie meist Google Maps um sich zurecht zu finden. Da dieser Punkt sehr häufig gleich beantwortet wird, ist eine zweite Umfrage zu diesem Thema notwendig.
Alle Befragten sind sportinteressiert und obwohl die meisten Sport machen um Abzuschalten, sind sie von der Idee „eine Stadt sportlich kennenzulernen“ nicht abgeneigt.
Unsere Zielgruppen sind demnach, jüngere, reisefreudige Menschen, die gerne Sport machen und sich etwas für Kultur interessieren.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/22291b5c73-1706013237/bildschirmfoto-2023-11-11-um-13-08-18.png)
Zielgruppensegmentierung
Mit den aus der Straßenumfrage erhaltenen Informationen, ist es nun möglich, die Zielgruppe genauer einzuordnen. Dazu wird geschaut, in welchem Abteil des Sinus-Milieus sich die Zielgruppe befindet.
Unsere Zielgruppe befindet sich im rechten, oberen Teil der sozialwissenschaftlichen Gesellschaftsanalyse-Grafik. Dies bedeutet, dass wir es eher mit der oberen Mittelschicht, welche moderner leben, zu tun haben.
Das Postmaterielle Milieu wird genommen, da dieser Teil der Gesellschaft gerne reist und Städte besichtigt. Medien dienen zum Informationenaustausch und zur Horizonterweiterung. Das zweite Milieu ist das Milieu der Performer. Diese wollen sich selbst Präsentieren und sind mit der neusten Technik vertraut. Die Wahl fällt zudem auf das Expeditive Milieu, da diese Menschen digital und vernetzt sind. Sie wollen neue Erfahrungen sammeln und sind ausgeprägt in der Selbstdarstellung.
Somit ergibt sich eine Zielgruppe, welche die neuste Technik nutzt, etwas erleben will und sich selber präsentiert.
Persona 1
Nun werden für ein besseres Verständnis der Zielgruppe Personas erstellt. So soll bildlich veranschaulicht werden, wer genau die Zielgruppe ist und wie sie tickt. Ihre Vorlieben, Abneigungen, Handlungen und Verhaltesmotive, aber auch was in der Tasche der Person ist soll so genau aufgezeigt werden. Somit entsteht ein klares Bild, wer die Zielgruppe ist.
Die erste Persona ist eine junge Frau, anfang 20, Namens Clara. Sie arbeitet als Bürokauffrau, ist sportlich, kocht gerne und möchte viel Zeit draußen verbringen. Sie ist auf dem neusten Stand der Konsumer-Technik und kümmert sich sehr um das Wohlergehen ihres Körpers. Clara möchte viel Reisen und das am liebsten mit den digitalen Medien verbinden.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/19869da8bb-1706009215/bildschirmfoto-2023-11-14-um-09-51-02.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/e518177a69-1706009230/bildschirmfoto-2023-11-14-um-09-51-15.png)
Persona 2
Die zweite Persona ist ein junger Mann, mitte 20, namens Endress. Er arbeitet als Co- Ceo eines Fitness-Startups. Er ist ernährt sich sehr bewusst, ist sportlich und wünscht sich finanzielle Freiheit. Die neuste Technik ist für ihn sehr wichtig und er gibt gerne mehr Geld aus, um das besste Produkt auf dem Markt zu haben. Endress möchte sich immer weiterbilden und nutzt dafür viele Medien. Sport und etwas zu erleben ist ihm sehr wichtig und er versucht beides möglichst viel zu erfahren.
Prolaritätenprofil
Bei der Untersuchung der psychologischen Merkmale der Personas, werden
verschiedene, gegensätzliche Adjektive aufgelistet. Nun wird durch eine Rote Markierung angezeigt, zu welchem Adjektiv die Persona eher tendiert.
Das Polaritätenprofil von Clara (links) zeigt gut auf, wie Clara sich verhält. Dabei merkt man schnell, dass sie gerne Zeit mit anderen Menschen verbringt und dabei gerne auffällt.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/b137af3623-1706013406/bildschirmfoto-2023-12-19-um-17-54-29.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/414b1de0b5-1706013422/bildschirmfoto-2023-12-19-um-17-54-56.png)
Auch zu Persona Zwei wird ein Polaritätenprofil erstellt. Endress ist eher ein Mensch der gerne dazulernt. Er sorgt für Andere und schafft es auch Diese mitzuziehen (rechte Abbildung).
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/1dd3263b4e-1706013457/bildschirmfoto-2023-12-19-um-17-55-08.png)
Nach der Analyse der beiden Personas werden nun die größten Auffälligkeiten herausgearbeitet und verglichen. Dabei fällt auf, dass Clara verpeilter und geselliger ist, Endress dafür aber zuverlässiger und lernfreudiger. Somit stellt sich für die Webseite die Frage, ob ein Verspielteres oder ein ordentlicheres Design verwendet wird. Desweiteren wird überlegt ob mit Lernvideos gearbeitet werden soll, oder der Nutzer die Aufgaben selber erfahren will. Geselligkeit spielt bei der Konzeption der Webseite eine nicht so große Rolle, da man die Routen alleine oder mit mehreren Personen ablaufen kann.
User Journey Maps
Um uns einen besseren Überblick über die tatsächliche Verwendung unserer Webseite zu verschaffen, wenden wir die Methode der User Journey Maps an.
Eine User Journey Map zeigt die Aktivitäten, Motivationen und Gefühlslage eines Nutzers während er unsere App verwendet. Desweiteren stellt sie die Aktionen der Website dar und welche Prozesse im Hintergrund ablaufen.
Wir fertigen für unsere Personas jeweils zwei User Journey Maps an und unterscheiden dabei, zu welcher Zeit die App benutzt wird.
Das bedeutet wir fertigen eine Journey Map für Clara an, welche die Nutzung vor ihrem Trip zeigt und eine während ihres Trips.
Bei Endress beginnen wir auch mit einer Journey Map vor seiner Geschäftsreise und fertigen dann aber eine weitere für nach seiner Reise an.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/6a2988c557-1706009506/clara-journey-map-davor.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/b2f99d1536-1706009620/clara-journey-map-wahrenddessen.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/229b60158a-1706009643/endress-journey-map-danach.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/a4b685c35a-1706009659/endress-journey-map-davor.png)
Markenerlebnis
Brand Story
Eine Brand Story wird erstellt um verschiedene Elemente bzw. Features der Brand darzustellen und einzuordnen. Hierbei werden diese Elemente jeweils in interaktiv oder statisch und emotional oder funktional eingeteilt. Dies geschieht nicht absolut, d.h es kann ein Element auch nur leicht in die emotionale Richtung ausschlagen. Am Ende kann diese Brand Story eine Richtung, in die sich die Brand entwickelt bzw. konzentrieren muss liefern, muss dies aber nicht.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/a17e5ac61d-1706009772/bildschirmfoto-2023-11-13-um-10-30-43.png)
Unsere Brand „Stadtogo“ tendiert in die informierende/funktionale Richtung, wobei sowohl interaktive als auch statische Inhalte eine hohe Bedeutung darstellen. Diese Erkenntnisse decken sich mit den vorherigen Recherchen und Ergebnissen.
Marktumfeld
Bei der Positionierung im Markenumfeld geht es darum, die Marke im Vergleich zu ähnlichen Marken einzuordnen. Es werden zwei gegensätzliche Eingenschaften definiert und an Hand dieser eine Map der zielgruppenähnlichen Konkurrenten erstellt. Auch wird sowohl der aktuelle Ist-Zustand als auch der Soll-Zustand, zu dem man gelangen möchte dokumentiert.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/2d423fcf37-1706009919/bildschirmfoto-2023-11-13-um-12-10-37-kopie.png)
Unsere Marke liegt aktuell im leicht spannenden, dynamischen Bereich, soll diese Eingenschaften aber noch verstärken, da nach unseren Recherchen eine Marktnische besteht.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/8ff067f3af-1706009930/bildschirmfoto-2023-11-13-um-12-10-37.png)
Auch wird, um die Position der Marke exakter zu bestimmen ein Schaubild ähnlich zur den Sinus-Milleus erstellt, um aufzuzeigen, wie innovativ/konventionell bzw. wie allgemein/exklusiv sich die Marke verhält
Verhaltensattribute
Hier werden die wichtigen Filter einer Marke mit Verhaltensattributen der Nutzer vereint um ein noch genaueres Bild der Marke und ihren Elementen zu erhalten.
Zuerst werden viele mögliche Verhaltensattribute gesammelt. Diese gilt es dann zu priorisieren und mit den Markenfilter zu matchen.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/4446eb8a48-1706009965/bildschirmfoto-2023-11-13-um-12-11-39.png)
Wir haben uns für die Attribute „persönlich“, „motivierend“ und „strukturiert“ entschieden, da wir diese als wichtig, passend und aussagekräftig empfunden haben.
Während uns beim Markenfilter „Look & Feel“ ein ansprechender animierender Look, d.h. in unserem Fall modern, aktiv, sportlich, hochwertig, wichtig ist, der aber trtzdem übersichtlich und aufgeräumt sein soll, muss die „Informationsarchitektur“ bekannt, vertraut und geordnet strukturiert sein, aber trotzdem den Nutzer befeuern und die wichtigen Dinge aufzeigen. Die „Nutzerführung“ muss einfach und simpel gehalten werden, aber auch schnell und voralem intuitiv zu bedienen sein. Ebenso sollte sie aufregend und interessant sein. Der Markenfilter „Bewegung & Interaktion“ muss spielerisch im Sinne von spaßig, abenteuerfreudig gestaltet werden, sowie mitreißend und fesselnd. Einheit, Abgestimmtheit und ein System sind ebenso sehr wichtig.
Nutzererlebnis
Sitemap
Zum Anfang stellt sich die Frage, wie die Webseite strukturiert bzw. navigierbar sein soll. Sitemaps bieten hier eine gute Möglichkeit, um mögliche Varianten festzuhalten.
Zu Beginn werden die Navigationsreiter ganz oben festgelegt. Nun werden dafür jeweils die Unterseiten definiert. Sollten diese Unterseiten ebenso eigene Seiten besitzen, können diese auch festgehalten werden.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/5bb4fe359b-1706010079/bildschirmfoto-2023-11-14-um-11-45-29.png)
Wir haben uns für vier Reiter (Orte, About, Score, Profil) entschieden. Im Reiter „Orte“ befinden sich die drei Städte (Stuttgart, Ulm und München), die wir anbieten, mit den dazu passenden Routen (jeweils drei). Der Reiter „About“ beihaltet Informationen zur Marke selber und wie die Webseite funktioniert. Im „Score“-Reiter sind die Bestenlisten zu den 3 Städten und eine Gesamtbestenliste einzusehen. Über „Profil“ gelangt man zunächst zu einer Zwischenseite, bei der man sich entweder eingloggen oder registrieren kann. Ist dies geschehen, so erscheinen 3 weitere Unterseiten. Während bei „Meine Daten“ und „Mein Profil“ die eigenen Daten zum Profil und zur eigenen Leistung eingesehen werden können, zeigt „Routen“ wieder die 3 Städte mit ihren Routen an.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/a7c3db8277-1706010129/bildschirmfoto-2023-11-14-um-11-16-42.png)
Map 2 handelt nach der Durchführung einer Route. Der Nutzer möchte Fakten zur absolvierten Route einsehen. Dazu gelangt er über die Navigation zum Reiter „Log In“ und kann sich dort einloggen. Ist er eingeloggt, so hat ein nun die Möglichkeit seine Route nochmal nachzuvollziehen und ihm werden seine passenden Leistungsdaten angezeigt.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/3d14480fb5-1706010104/bildschirmfoto-2023-11-14-um-11-15-18.png)
Map 1 zeigt den Nutzer kurz vor der Nutzung. Er geht den normalen Ablauf einer Webseite entlang. Zuerst wird er gefragt ob er sich einloggen bzw. registrieren möchte. Will er dies nicht kann er als Gast fortfahren, muss noch ein paar Angaben machen und kann die Route starten. Loggt er sich hingegen ein, kann er seine hinterlegten Daten einsehen oder auch ändern und direkt eine Tour starten.
Process Flows
Process Flows sind da, um spezifische Szenarien der User auf der Webseite durchzugehen und nachzuvollziehen. Hierbei wird klar, was benötigt wird, was noch fehlt und was geändert werden muss. Die Vorgehensweisen des Nutzers werden Schritt für Schritt dargestellt und die Möglichkeiten dazu dokumentiert. Am Ende des Process Flows steht ein Ziel.
Ideenentwicklung
Um neu Ideen zu generieren, gibt es verschiedene Methoden. Eine der bekanntesten Methoden ist das Brainstorming oder das Brainwriting. „635“ ist eine Variante davon. Hier wird jedem Teammitglied ein Blatt Papier gegeben, welches in sechs Spalten und drei Zeilen unterteilt wird. Jeder hat jetzt max. fünf Minuten um in die Zeilen Ideen zu schreiben. Nach Ablauf der Zeit wird das Blatt im Uhrzeigersinn weitergegeben und der Nächste schreibt seine Ideen, basierend auf den Ideen seines Kollegen auf. So können innerhalb von wenigen Minuten viele Ideen entstehen.
Da unser Team nur aus drei Personen besteht, wird die „635-Methode“ zu der „335-Methode“ umfunktioniert (siehe Abbildungen). Ziel hierbei ist, möglichst viele neue Ideen zu sammeln, ohne sie zu bewerten.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/351508fe14-1706010158/bildschirmfoto-2023-11-13-um-15-26-34.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/fd21c37595-1706010169/bildschirmfoto-2023-11-13-um-15-26-49.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/739fecba4c-1706010182/bildschirmfoto-2023-11-13-um-15-26-58.png)
Konzipieren und Entwerfen
Moodboard
Im ersten Schritt des Konzipierens haben wir Moodboards erstellt, welche die Stimmung, Ästhetik aber auch die Designsprache der Seite und unserem allgemeinen Projekt wiederspiegeln. Es stellt die Kernpunkte, also das Joggen, den Aspekt der Stadt, sowie Dehnübungen dar. Auch die einzelnen Bilder sind von der Atmospäre, genauso wie in der Farbgebung ähnlich.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/81ca6edd6b-1706012205/bildschirmfoto-2023-12-19-um-12-06-26.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/1db145146b-1706012284/bildschirmfoto-2024-01-23-um-13-17-34.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/ace8e53543-1706012298/bildschirmfoto-2024-01-23-um-13-17-50.png)
Stylesguides
Styleguides sind erste Überlegungen zu den allgemeinen Vorgaben, wie Farbschema, Designsprache und Typografie.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/ff70ae0014-1706011166/bildschirmfoto-2023-12-19-um-13-15-45.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/de81c7f698-1706011196/bildschirmfoto-2023-12-19-um-12-18-50.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/5b8fb19512-1706011406/bildschirmfoto-2023-12-19-um-12-19-05.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/248f95f757-1706011248/bildschirmfoto-2023-12-19-um-13-48-05.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/0b8cd9a65b-1706011258/bildschirmfoto-2023-12-05-um-17-00-22.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/def404e238-1706011423/bildschirmfoto-2023-12-19-um-11-51-20.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/3b371e2bc1-1706011626/bildschirmfoto-2023-12-19-um-13-48-24.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/69511bab96-1706011338/bildschirmfoto-2023-12-05-um-11-03-35.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/d2621427c1-1706011431/bildschirmfoto-2023-12-19-um-11-52-09.png)
Features
Für den weiteren Gestaltungsprozess orientierten wir uns an Features von anderen Herstellern, die zu uns passen könnten, z.B. Audio-Player oder interaktive Karten.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/a7501e6d32-1706011690/bildschirmfoto-2023-12-19-um-15-26-32.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/46c94a0ebe-1706011704/bildschirmfoto-2023-12-06-um-10-22-29.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/4cccc3c0f7-1706011750/bildschirmfoto-2023-12-06-um-10-18-08.png)
Recherche & Inhalt
Orte & Routen
In der finalen Version hat der Nutzer eine Auswahl aus drei ausgewählten Routen mit passenden Orten, Informationen und Sportübungen.
Auditive Inhalte
Zu den einzelnen Orten und Sehenswürdigkeiten werden interessante Fakten prägnant von einer KI-Stimme vorgelesen.
Sportübungen
An schönen Orten oder während kleinen Pausen werden dem Nutzer Sport- und Dehnübungen vorgezeigt, die er dadurch einfach nachmachen kann.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/7634362bef-1706521241/bildschirmfoto-2024-01-28-um-22-56-04.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/14e30ef16c-1706521229/bildschirmfoto-2024-01-28-um-22-55-56.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/f0c2e0207d-1706520796/iphone-14-pro-17.png)
Mock-Ups & Prototypen
Die letztendliche Umsetzung in HTML und CSS als Mock-Ups.
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/770e7c3593-1706529126/mockups-stadtogo-zeichenflache-1-03.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/a619a886b2-1706529151/mockups-stadtogo-zeichenflache-1-06.png)
![](https://0t1.de/media/pages/projekte/erlebnisguide-stadtogo/b0e321bfd9-1706529168/mockups-stadtogo-zeichenflache-1-05.png)
Fazit
Abschließend lässt sich sagen, das der Gestaltungsprozess viele Entscheidungen getroffen werden müssen. Um zum besten Ergebnis zu kommen ist ein umfangreicher Variantenreichtum zu Beginn nötig. Die Konzeptionsphase muss detailliert und genau umgesetzt werden dabei sind viele Hand-Skizzen und Designs von Vorteil. Ideenreichtum der einzelnen Teammitglieder wird benötigt, um Fehler frühzeitig zu erkennen und diesen entgegen wirken zu können. Moodboards helfen die Stimmung und Designsprache zu visualisieren und eine grobe Richtung vorzugeben. An den erstellten Prototypen sieht man schnell, wo Probleme auftauchen können und Verbesserungen nötig sind. Sie sind ein wichtiger Teil für die spätere Umsetzung des Projekts.