Diplomarbeit Tobias Kramer
Diplomarbeit Tobias Kramer
HFIAD22
HF Interaction Design 2022
Konzept & Struktur
Vom Verstehen zum Gestalten
Aus den Research-Erkenntnissen entstand ein Konzept, das auf Klarheit, Nutzerfokus und mobile Nutzung setzt.
Methodik & Vorgehen
Zielgruppen & Persona-Definition // Nutzungsszenarien // Sitemap & Informationsarchitektur // Funktionskonzept // VIP Experience Mapping
Scrollen & Entdecken
↓
↓
Scrollen & Entdecken
↓
↓
Was die neue Plattform leisten soll
Was die neue Plattform leisten soll
Die Analyse hat gezeigt, wo User:innen auf der bisherigen Website scheitern – und was sie sich stattdessen wünschen. Daraus wurden konkrete UX-Ziele formuliert: Sie geben vor, was das neue digitale Erlebnis leisten muss, um klarer, zugänglicher und relevanter zu sein.
Die Analyse hat gezeigt, wo User:innen auf der bisherigen Website scheitern – und was sie sich stattdessen wünschen. Daraus wurden konkrete UX-Ziele formuliert: Sie geben vor, was das neue digitale Erlebnis leisten muss, um klarer, zugänglicher und relevanter zu sein.
Inhalte schneller erfassbar machen
Die Navigation wurde vereinfacht, Informationen priorisiert und visuelle Anker gesetzt – damit Nutzer:innen schneller finden, was zählt.
Inhalte schneller erfassbar machen
Die Navigation wurde vereinfacht, Informationen priorisiert und visuelle Anker gesetzt – damit Nutzer:innen schneller finden, was zählt.
Inhalte schneller erfassbar machen
Die Navigation wurde vereinfacht, Informationen priorisiert und visuelle Anker gesetzt – damit Nutzer:innen schneller finden, was zählt.
Mobile Nutzung priorisieren
Die gesamte Plattform wurde von Anfang an für mobile Geräte gedacht – mit Scrollführung, Touchflächen und optimierter Lesbarkeit.
Mobile Nutzung priorisieren
Die gesamte Plattform wurde von Anfang an für mobile Geräte gedacht – mit Scrollführung, Touchflächen und optimierter Lesbarkeit.
Mobile Nutzung priorisieren
Die gesamte Plattform wurde von Anfang an für mobile Geräte gedacht – mit Scrollführung, Touchflächen und optimierter Lesbarkeit.
Zielgruppenspezifische Einstiege schaffen
Die neue Struktur trennt klar zwischen Motorsportfans, VIP-Gästen, Sponsoren und Medien – damit jede:r einen relevanten Startpunkt findet.
Zielgruppenspezifische Einstiege schaffen
Die neue Struktur trennt klar zwischen Motorsportfans, VIP-Gästen, Sponsoren und Medien – damit jede:r einen relevanten Startpunkt findet.
Zielgruppenspezifische Einstiege schaffen
Die neue Struktur trennt klar zwischen Motorsportfans, VIP-Gästen, Sponsoren und Medien – damit jede:r einen relevanten Startpunkt findet.
Emotionale Verbindung zur Marke stärken
Visuelles Storytelling & Bildsprache machen die Dynamik und Hochwertigkeit von Emil Frey Racing digital spürbar.
Emotionale Verbindung zur Marke stärken
Visuelles Storytelling & Bildsprache machen die Dynamik und Hochwertigkeit von Emil Frey Racing digital spürbar.
Emotionale Verbindung zur Marke stärken
Visuelles Storytelling & Bildsprache machen die Dynamik und Hochwertigkeit von Emil Frey Racing digital spürbar.
Die VIP Experience digital übersetzen
Ein persönliches Dashboard, mobile Begleitung und der Order Wizard machen aus einem analogen Event eine durchgängige digitale Experience.
Die VIP Experience digital übersetzen
Ein persönliches Dashboard, mobile Begleitung und der Order Wizard machen aus einem analogen Event eine durchgängige digitale Experience.
Die VIP Experience digital übersetzen
Ein persönliches Dashboard, mobile Begleitung und der Order Wizard machen aus einem analogen Event eine durchgängige digitale Experience.
Vier Zielgruppen, vier Perspektiven
Vier Zielgruppen, vier Perspektiven
Nicht alle Besucher:innen der Website verfolgen dasselbe Ziel. Das neue Konzept unterscheidet klar zwischen vier Zielgruppen – und bietet jeder von ihnen einen passenden Einstieg, relevante Inhalte und eine eigene Nutzerführung. So entsteht eine Website, die nicht für alle gleich, sondern für alle richtig funktioniert.
Nicht alle Besucher:innen der Website verfolgen dasselbe Ziel. Das neue Konzept unterscheidet klar zwischen vier Zielgruppen – und bietet jeder von ihnen einen passenden Einstieg, relevante Inhalte und eine eigene Nutzerführung. So entsteht eine Website, die nicht für alle gleich, sondern für alle richtig funktioniert.
🏁 Motorsportbegeisterte
Informieren sich rund um Rennen, Fahrer und Resultate. → Wollen schnellen Zugang zu Rennnews, Teaminfos und Highlights.
🏁 Motorsportbegeisterte
Informieren sich rund um Rennen, Fahrer und Resultate. → Wollen schnellen Zugang zu Rennnews, Teaminfos und Highlights.
🏁 Motorsportbegeisterte
Informieren sich rund um Rennen, Fahrer und Resultate. → Wollen schnellen Zugang zu Rennnews, Teaminfos und Highlights.
🎟 VIP-Fans
Buchen die VIP-Experience, bereiten sich auf den Renntag vor und nutzen die Seite mobil vor Ort. → Benötigen klare Infos zu Anreise, Ablauf, Lageplan und Ansprechpartner.
🎟 VIP-Fans
Buchen die VIP-Experience, bereiten sich auf den Renntag vor und nutzen die Seite mobil vor Ort. → Benötigen klare Infos zu Anreise, Ablauf, Lageplan und Ansprechpartner.
🎟 VIP-Fans
Buchen die VIP-Experience, bereiten sich auf den Renntag vor und nutzen die Seite mobil vor Ort. → Benötigen klare Infos zu Anreise, Ablauf, Lageplan und Ansprechpartner.
💼 Sponsoren & Partner:innen
Wollen sehen, wie ihre Marke inszeniert wird. → Suchen nach Sichtbarkeit, Cases und professioneller Präsentation.
💼 Sponsoren & Partner:innen
Wollen sehen, wie ihre Marke inszeniert wird. → Suchen nach Sichtbarkeit, Cases und professioneller Präsentation.
💼 Sponsoren & Partner:innen
Wollen sehen, wie ihre Marke inszeniert wird. → Suchen nach Sichtbarkeit, Cases und professioneller Präsentation.
📰 Medienverantwortliche
Brauchen schnelle Zugänge zu Bildern, Daten und Teamdetails. → Erwarten klare Strukturen, Nutzungsrechte und verlässliche Inhalte.
📰 Medienverantwortliche
Brauchen schnelle Zugänge zu Bildern, Daten und Teamdetails. → Erwarten klare Strukturen, Nutzungsrechte und verlässliche Inhalte.
📰 Medienverantwortliche
Brauchen schnelle Zugänge zu Bildern, Daten und Teamdetails. → Erwarten klare Strukturen, Nutzungsrechte und verlässliche Inhalte.
Personas
Personas
Hinter jeder Zielgruppe stehen echte Menschen – mit eigenen Zielen, Fragen und Nutzungssituationen. Für die Diplomarbeit wurden gezielt zwei Nutzergruppen vertieft betrachtet: Motorsportbegeisterte und VIP-Gäste.
Sie stehen im Zentrum der erstellten Nutzungsszenarien und Flows. Die weiteren Zielgruppen (Sponsoren & Medien) wurden in der Struktur berücksichtigt, jedoch nicht konzeptionell ausgearbeitet.
Hinter jeder Zielgruppe stehen echte Menschen – mit eigenen Zielen, Fragen und Nutzungssituationen. Für die Diplomarbeit wurden gezielt zwei Nutzergruppen vertieft betrachtet: Motorsportbegeisterte und VIP-Gäste.
Sie stehen im Zentrum der erstellten Nutzungsszenarien und Flows. Die weiteren Zielgruppen (Sponsoren & Medien) wurden in der Struktur berücksichtigt, jedoch nicht konzeptionell ausgearbeitet.
🏁 Marc (26), Motorsport-Fan
Marc ist motorsportbegeistert, verfolgt Rennen live und stöbert danach gezielt nach Ergebnissen, Highlights oder Fahrerstatements. Er nutzt die Website häufig auf dem Smartphone. Was für ihn zählt: klare Infos, keine Umwege, visuelle Inhalte statt langer Texte.
🏁 Marc (26), Motorsport-Fan
Marc ist motorsportbegeistert, verfolgt Rennen live und stöbert danach gezielt nach Ergebnissen, Highlights oder Fahrerstatements. Er nutzt die Website häufig auf dem Smartphone. Was für ihn zählt: klare Infos, keine Umwege, visuelle Inhalte statt langer Texte.
🏁 Marc (26), Motorsport-Fan
Marc ist motorsportbegeistert, verfolgt Rennen live und stöbert danach gezielt nach Ergebnissen, Highlights oder Fahrerstatements. Er nutzt die Website häufig auf dem Smartphone. Was für ihn zählt: klare Infos, keine Umwege, visuelle Inhalte statt langer Texte.
🎟 Tobias (39§), VIP-Gast
Tobias hat sich die VIP Experience für ein Rennwochenende reserviert. Er ist beruflich viel unterwegs und hat wenig Zeit für langes Recherchieren. Er will wissen: Wo muss ich hin, wann geht’s los, und wie hole ich das Maximum aus dem Tag heraus?
🎟 Tobias (39§), VIP-Gast
Tobias hat sich die VIP Experience für ein Rennwochenende reserviert. Er ist beruflich viel unterwegs und hat wenig Zeit für langes Recherchieren. Er will wissen: Wo muss ich hin, wann geht’s los, und wie hole ich das Maximum aus dem Tag heraus?
🎟 Tobias (39§), VIP-Gast
Tobias hat sich die VIP Experience für ein Rennwochenende reserviert. Er ist beruflich viel unterwegs und hat wenig Zeit für langes Recherchieren. Er will wissen: Wo muss ich hin, wann geht’s los, und wie hole ich das Maximum aus dem Tag heraus?
Website-Struktur, die führt – nicht verwirrt
Website-Struktur, die führt – nicht verwirrt
Eine gute Website führt nicht nur zu Inhalten – sie gibt Orientierung. Die neue Sitemap wurde so entwickelt, dass sich die Zielgruppen schnell zurechtfinden, Inhalte intuitiv erfassen und gezielt in ihren Bereich einsteigen können. Der Fokus lag auf klaren Einstiegen, reduzierter Tiefe und logischen Zusammenhängen – mit besonderem Augenmerk auf die VIP Experience: emotional inszeniert, funktional integriert und schnell zugänglich.
Die Struktur entstand in mehreren Schritten:
Eine gute Website führt nicht nur zu Inhalten – sie gibt Orientierung. Die neue Sitemap wurde so entwickelt, dass sich die Zielgruppen schnell zurechtfinden, Inhalte intuitiv erfassen und gezielt in ihren Bereich einsteigen können. Der Fokus lag auf klaren Einstiegen, reduzierter Tiefe und logischen Zusammenhängen – mit besonderem Augenmerk auf die VIP Experience: emotional inszeniert, funktional integriert und schnell zugänglich.
Die Struktur entstand in mehreren Schritten:
1. Clusterung bestehender Inhalte
→ Welche Inhalte gibt es? Was ist relevant? Was überflüssig?
1. Clusterung bestehender Inhalte
→ Welche Inhalte gibt es? Was ist relevant? Was überflüssig?
1. Clusterung bestehender Inhalte
→ Welche Inhalte gibt es? Was ist relevant? Was überflüssig?
2. Neuordnung nach Nutzungsszenarien
→ Welche Zielgruppen kommen auf die Seite? Was wollen sie finden? Wie bewegen sie sich durch das Angebot?
2. Neuordnung nach Nutzungsszenarien
→ Welche Zielgruppen kommen auf die Seite? Was wollen sie finden? Wie bewegen sie sich durch das Angebot?
2. Neuordnung nach Nutzungsszenarien
→ Welche Zielgruppen kommen auf die Seite? Was wollen sie finden? Wie bewegen sie sich durch das Angebot?
3. Integration markenstrategischer Ziele
→ Stärkere Sichtbarkeit für Key-Angebote wie VIP Experience // Klarer Einstieg, logische Tiefenstruktur, emotional starke Einstiegsseiten
3. Integration markenstrategischer Ziele
→ Stärkere Sichtbarkeit für Key-Angebote wie VIP Experience // Klarer Einstieg, logische Tiefenstruktur, emotional starke Einstiegsseiten
3. Integration markenstrategischer Ziele
→ Stärkere Sichtbarkeit für Key-Angebote wie VIP Experience // Klarer Einstieg, logische Tiefenstruktur, emotional starke Einstiegsseiten
Struktur der neuen Website: Klar gegliedert, modular aufgebaut und auf verschiedene Nutzergruppen abgestimmt.
Die neue Sitemap
Klarere Einstiege
Zielgruppen gelangen schneller zu den für sie relevanten Inhalten (z. B. VIP, Eventinfos, Team)
Reduzierte Komplexität
Weniger Klicks, flachere Navigation, logischere Seitenhierarchie
Bessere Nutzerführung
Struktur und Buttons leiten gezielt durch Seiten, Buchung, Eventvorbereitung und Nachbereitung
VIP-Experience integriert statt isoliert
Nicht mehr „versteckt“, sondern als strategisch platzierter Kernbereich mit Kontext & Mehrwert
Content im Kontext
Inhalte werden dort angeboten, wo sie gebraucht werden – z. B. Rennkalender bei VIP-Experience / Anmeldung
Die neue Sitemap
Klarere Einstiege
Zielgruppen gelangen schneller zu den für sie relevanten Inhalten (z. B. VIP, Eventinfos, Team)
Reduzierte Komplexität
Weniger Klicks, flachere Navigation, logischere Seitenhierarchie
Bessere Nutzerführung
Struktur und Buttons leiten gezielt durch Seiten, Buchung, Eventvorbereitung und Nachbereitung
VIP-Experience integriert statt isoliert
Nicht mehr „versteckt“, sondern als strategisch platzierter Kernbereich mit Kontext & Mehrwert
Content im Kontext
Inhalte werden dort angeboten, wo sie gebraucht werden – z. B. Rennkalender bei VIP-Experience / Anmeldung
Die neue Sitemap
Klarere Einstiege
Zielgruppen gelangen schneller zu den für sie relevanten Inhalten (z. B. VIP, Eventinfos, Team)
Reduzierte Komplexität
Weniger Klicks, flachere Navigation, logischere Seitenhierarchie
Bessere Nutzerführung
Struktur und Buttons leiten gezielt durch Seiten, Buchung, Eventvorbereitung und Nachbereitung
VIP-Experience integriert statt isoliert
Nicht mehr „versteckt“, sondern als strategisch platzierter Kernbereich mit Kontext & Mehrwert
Content im Kontext
Inhalte werden dort angeboten, wo sie gebraucht werden – z. B. Rennkalender bei VIP-Experience / Anmeldung
VIP-Experience – neu gedacht
VIP-Experience – neu gedacht
Die VIP Experience beginnt nicht erst mit dem Betreten der Rennstrecke – sie startet viel früher. Ziel war es, eine digitale Umgebung zu schaffen, die VIP-Gäste ganzheitlich begleitet: von der ersten Kontaktaufnahme über die Buchung und den Eventtag bis hin zur persönlichen Nachbereitung. Im Zentrum steht ein individualisiertes Dashboard, das in Kombination mit dem interaktiven Order Wizard eine nahtlose und exklusive Nutzererfahrung bietet – klar geführt, mobile optimiert und auf das Wesentliche reduziert.
Die VIP Experience beginnt nicht erst mit dem Betreten der Rennstrecke – sie startet viel früher. Ziel war es, eine digitale Umgebung zu schaffen, die VIP-Gäste ganzheitlich begleitet: von der ersten Kontaktaufnahme über die Buchung und den Eventtag bis hin zur persönlichen Nachbereitung. Im Zentrum steht ein individualisiertes Dashboard, das in Kombination mit dem interaktiven Order Wizard eine nahtlose und exklusive Nutzererfahrung bietet – klar geführt, mobile optimiert und auf das Wesentliche reduziert.
Ein exklusives Event verdient eine ebenso exklusive digitale Experience.
Erste Entwürfe und Userflows
Erste Entwürfe und Userflows
Um erste Ideen greifbar zu machen und den Nutzerfokus frühzeitig zu testen, wurde zunächst ein Paper Prototype entwickelt. Dieser diente als Grundlage zur schnellen Iteration und zur Überprüfung erster Annahmen im Kontext der VIP Experience.
Basierend auf den Erkenntnissen daraus entstand ein LoFi-Prototype. Mit klarer Struktur, Fokus auf die User-Flows und grundlegenden Interaktionen konnte so ein erstes digitales Gerüst geschaffen werden.
Um erste Ideen greifbar zu machen und den Nutzerfokus frühzeitig zu testen, wurde zunächst ein Paper Prototype entwickelt. Dieser diente als Grundlage zur schnellen Iteration und zur Überprüfung erster Annahmen im Kontext der VIP Experience.
Basierend auf den Erkenntnissen daraus entstand ein LoFi-Prototype. Mit klarer Struktur, Fokus auf die User-Flows und grundlegenden Interaktionen konnte so ein erstes digitales Gerüst geschaffen werden.
Lo-Fi-Wireframes zur Definition der Informationsarchitektur.
Gestaltung mit Werten
Gestaltung mit Werten
Das digitale Erlebnis basiert nicht nur auf Funktionen. In der Konzeptphase wurden klare UX-Werte definiert, die sich durch das gesamte Projekt ziehen: von der Informationsstruktur bis zur Bildsprache, vom Dashboard bis zur Buchung. Sie bilden die Grundlage für alle gestalterischen und inhaltlichen Entscheidungen – reduziert, fokussiert und relevant.
Das digitale Erlebnis basiert nicht nur auf Funktionen. In der Konzeptphase wurden klare UX-Werte definiert, die sich durch das gesamte Projekt ziehen: von der Informationsstruktur bis zur Bildsprache, vom Dashboard bis zur Buchung. Sie bilden die Grundlage für alle gestalterischen und inhaltlichen Entscheidungen – reduziert, fokussiert und relevant.
Klarheit vor Komplexität
Ob in Navigation, Inhalt oder Interaktion: Nur das, was relevant ist, wird gezeigt – klar strukturiert und reduziert.
Klarheit vor Komplexität
Ob in Navigation, Inhalt oder Interaktion: Nur das, was relevant ist, wird gezeigt – klar strukturiert und reduziert.
Klarheit vor Komplexität
Ob in Navigation, Inhalt oder Interaktion: Nur das, was relevant ist, wird gezeigt – klar strukturiert und reduziert.
Mobile First als Grundhaltung
Inhalte, Strukturen und Komponenten wurden primär für mobile Nutzung entwickelt – Desktop ist eine Erweiterung, keine Vorlage.
Mobile First als Grundhaltung
Inhalte, Strukturen und Komponenten wurden primär für mobile Nutzung entwickelt – Desktop ist eine Erweiterung, keine Vorlage.
Mobile First als Grundhaltung
Inhalte, Strukturen und Komponenten wurden primär für mobile Nutzung entwickelt – Desktop ist eine Erweiterung, keine Vorlage.
Visuelle Orientierung statt textlastiger Information
Storytelling durch Bild, Icon, Farbe und Typografie – nicht durch lange Texte.
Visuelle Orientierung statt textlastiger Information
Storytelling durch Bild, Icon, Farbe und Typografie – nicht durch lange Texte.
Visuelle Orientierung statt textlastiger Information
Storytelling durch Bild, Icon, Farbe und Typografie – nicht durch lange Texte.
Nutzerzentrierung in jedem Schritt
Alles basiert auf realen Szenarien – keine abstrakte Zielgruppe, sondern echte Menschen.
Nutzerzentrierung in jedem Schritt
Alles basiert auf realen Szenarien – keine abstrakte Zielgruppe, sondern echte Menschen.
Nutzerzentrierung in jedem Schritt
Alles basiert auf realen Szenarien – keine abstrakte Zielgruppe, sondern echte Menschen.
Markengerechtes Design
Emil Frey Racing wird visuell wie funktional als dynamisch, hochwertig und sportlich inszeniert.
Markengerechtes Design
Emil Frey Racing wird visuell wie funktional als dynamisch, hochwertig und sportlich inszeniert.
Markengerechtes Design
Emil Frey Racing wird visuell wie funktional als dynamisch, hochwertig und sportlich inszeniert.