Diplomarbeit Tobias Kramer

Diplomarbeit Tobias Kramer
HFIAD22

HF Interaction Design 2022

Intro

Research

Konzept

Design

Experience

Fazit

UI Design & Testing

Design mit Racing-DNA

Das Designsystem verbindet die Klarheit moderner UI mit der Dynamik des Motorsports. Die Elemente sind funktional und visuell durchdacht.

Methodik & Vorgehen

Designsystem entwickeln // UI-Komponenten gestalten // Visuelles Konzept aufbauen // Prototyping // User Testing mit Szenarien

Scrollen & Entdecken

↓

↓

Scrollen & Entdecken

↓

↓

Design mit Drive

Design mit Drive

Design ist in diesem Projekt weit mehr als nur Ästhetik – es steht für Funktion, Markenidentität und digitale Performance. Für die digitale VIP Experience wurde ein klares, modernes Design entwickelt, das zur Welt von Emil Frey Racing passt – und das Renngefühl digital spürbar macht.

Ein vertrautes Blau verbindend zur Emil Frey, ein kraftvolles Rot bringt Emotion und Rennsportdynamik. Grautöne sorgen für Balance und gute Lesbarkeit. Die Schrift ist modern, technisch und gut lesbar. Symbole und Icons helfen bei der Orientierung und machen die Anwendung einfach und verständlich. Ein durchdachtes Layout mit festen Abständen sorgt dafür, dass alles ordentlich wirkt – egal ob auf dem Handy oder am großen Screen.

Alle Elemente wurden als wiederverwendbare Bausteine gestaltet, um ein einheitliches, hochwertiges Nutzungserlebnis zu schaffen.

Design ist in diesem Projekt weit mehr als nur Ästhetik – es steht für Funktion, Markenidentität und digitale Performance. Für die digitale VIP Experience wurde ein klares, modernes Design entwickelt, das zur Welt von Emil Frey Racing passt – und das Renngefühl digital spürbar macht.

Ein vertrautes Blau verbindend zur Emil Frey, ein kraftvolles Rot bringt Emotion und Rennsportdynamik. Grautöne sorgen für Balance und gute Lesbarkeit. Die Schrift ist modern, technisch und gut lesbar. Symbole und Icons helfen bei der Orientierung und machen die Anwendung einfach und verständlich. Ein durchdachtes Layout mit festen Abständen sorgt dafür, dass alles ordentlich wirkt – egal ob auf dem Handy oder am großen Screen.

Alle Elemente wurden als wiederverwendbare Bausteine gestaltet, um ein einheitliches, hochwertiges Nutzungserlebnis zu schaffen.

Fundamentals definieren die gestalterischen Grundlagen wie Farben / Typografie / Abstände / Icons & Logos …

… Komponenten formen daraus ein modulares System …

… zum finalen Screen, der Funktion und Ästhetik vereint.

Mehr über das Designsystem

Farbwelt

Das markentypische Emil Frey-Blau wurde bewusst aus dem bestehenden Markenuniversum übernommen. Es schafft die Verbindung zur Unternehmensidentität und vermittelt Vertrauen, Kontinuität und Seriosität.

Als Kontrast dazu wurde ein kraftvolles Rot eingeführt – inspiriert von Ferrari. Diese neue Akzentfarbe bringt Dynamik, Emotionalität und Spannung auf die Website.

Eine reduzierte Graupalette ergänzt das Farbsystem. Sie sorgt für visuelle Balance, gute Lesbarkeit und unterstreicht den technisch-modernen Charakter der digitalen Anwendung.

Typografie

Zum Einsatz kommt die Ubuntu – eine serifenlose Schrift mit modernem, technisch anmutendem Charakter. Sie überzeugt durch klare Lesbarkeit, auch in kleinen Größen, und bringt durch ihre weichen Rundungen eine subtile, freundliche Note mit – ein Kontrast zur Präzision und Härte des Rennsports, der gut zur Identität von Emil Frey Racing passt.

Icons

Die Icons basieren auf der Heroicons-Library von Tailwind. Diese bietet eine grosse Auswahl an einheitlich gestalteten, klaren Symbolen, die sich nahtlos ins Design einfügen. Sie unterstützen die visuelle Struktur, vereinfachen die Nutzerführung und ermöglichen einen effizienten, konsistenten Designprozess.

Spacing & Layout

Ein flexibles 8px-Raster sowie klar definierte Abstände bilden das Rückgrat des Layoutsystems. Dieses Raster sorgt für Struktur, visuelle Ordnung und Wiedererkennbarkeit über verschiedene Bildschirmgrössen hinweg. Es gewährleistet, dass Inhalte konsistent dargestellt werden – egal ob auf Desktop, Tablet oder Mobile.

Komponenten

Im Sinne eines modularen Designansatzes wurden zentrale UI-Komponenten wie Buttons, Karten, Formularelemente und Navigationselemente als wiederverwendbare Bausteine entwickelt. Das sichert nicht nur ein einheitliches Nutzererlebnis, sondern ermöglicht auch eine skalierbare Weiterentwicklung der Plattform.

Mehr über das Designsystem

Farbwelt

Das markentypische Emil Frey-Blau wurde bewusst aus dem bestehenden Markenuniversum übernommen. Es schafft die Verbindung zur Unternehmensidentität und vermittelt Vertrauen, Kontinuität und Seriosität.

Als Kontrast dazu wurde ein kraftvolles Rot eingeführt – inspiriert von Ferrari. Diese neue Akzentfarbe bringt Dynamik, Emotionalität und Spannung auf die Website.

Eine reduzierte Graupalette ergänzt das Farbsystem. Sie sorgt für visuelle Balance, gute Lesbarkeit und unterstreicht den technisch-modernen Charakter der digitalen Anwendung.

Typografie

Zum Einsatz kommt die Ubuntu – eine serifenlose Schrift mit modernem, technisch anmutendem Charakter. Sie überzeugt durch klare Lesbarkeit, auch in kleinen Größen, und bringt durch ihre weichen Rundungen eine subtile, freundliche Note mit – ein Kontrast zur Präzision und Härte des Rennsports, der gut zur Identität von Emil Frey Racing passt.

Icons

Die Icons basieren auf der Heroicons-Library von Tailwind. Diese bietet eine grosse Auswahl an einheitlich gestalteten, klaren Symbolen, die sich nahtlos ins Design einfügen. Sie unterstützen die visuelle Struktur, vereinfachen die Nutzerführung und ermöglichen einen effizienten, konsistenten Designprozess.

Spacing & Layout

Ein flexibles 8px-Raster sowie klar definierte Abstände bilden das Rückgrat des Layoutsystems. Dieses Raster sorgt für Struktur, visuelle Ordnung und Wiedererkennbarkeit über verschiedene Bildschirmgrössen hinweg. Es gewährleistet, dass Inhalte konsistent dargestellt werden – egal ob auf Desktop, Tablet oder Mobile.

Komponenten

Im Sinne eines modularen Designansatzes wurden zentrale UI-Komponenten wie Buttons, Karten, Formularelemente und Navigationselemente als wiederverwendbare Bausteine entwickelt. Das sichert nicht nur ein einheitliches Nutzererlebnis, sondern ermöglicht auch eine skalierbare Weiterentwicklung der Plattform.

Mehr über das Designsystem

Farbwelt

Das markentypische Emil Frey-Blau wurde bewusst aus dem bestehenden Markenuniversum übernommen. Es schafft die Verbindung zur Unternehmensidentität und vermittelt Vertrauen, Kontinuität und Seriosität.

Als Kontrast dazu wurde ein kraftvolles Rot eingeführt – inspiriert von Ferrari. Diese neue Akzentfarbe bringt Dynamik, Emotionalität und Spannung auf die Website.

Eine reduzierte Graupalette ergänzt das Farbsystem. Sie sorgt für visuelle Balance, gute Lesbarkeit und unterstreicht den technisch-modernen Charakter der digitalen Anwendung.

Typografie

Zum Einsatz kommt die Ubuntu – eine serifenlose Schrift mit modernem, technisch anmutendem Charakter. Sie überzeugt durch klare Lesbarkeit, auch in kleinen Größen, und bringt durch ihre weichen Rundungen eine subtile, freundliche Note mit – ein Kontrast zur Präzision und Härte des Rennsports, der gut zur Identität von Emil Frey Racing passt.

Icons

Die Icons basieren auf der Heroicons-Library von Tailwind. Diese bietet eine grosse Auswahl an einheitlich gestalteten, klaren Symbolen, die sich nahtlos ins Design einfügen. Sie unterstützen die visuelle Struktur, vereinfachen die Nutzerführung und ermöglichen einen effizienten, konsistenten Designprozess.

Spacing & Layout

Ein flexibles 8px-Raster sowie klar definierte Abstände bilden das Rückgrat des Layoutsystems. Dieses Raster sorgt für Struktur, visuelle Ordnung und Wiedererkennbarkeit über verschiedene Bildschirmgrössen hinweg. Es gewährleistet, dass Inhalte konsistent dargestellt werden – egal ob auf Desktop, Tablet oder Mobile.

Komponenten

Im Sinne eines modularen Designansatzes wurden zentrale UI-Komponenten wie Buttons, Karten, Formularelemente und Navigationselemente als wiederverwendbare Bausteine entwickelt. Das sichert nicht nur ein einheitliches Nutzererlebnis, sondern ermöglicht auch eine skalierbare Weiterentwicklung der Plattform.

User Testing

User Testing

Ziel /


Validierung der Nutzerfreundlichkeit, Verständlichkeit und des Erlebnisses innerhalb der digitalen VIP Experience.

Ablauf /

Der Test wurde mit einer Person aus der Zielgruppe durchgeführt. Er erfolgte mit einem klickbaren HiFi-Prototype und fokussierte sich auf drei zentrale Nutzungsszenarien:

  • VIP-Dashboard (persönliche Übersicht & Zeitplan)

  • Order Wizard

  • Informationssuche auf der Website (z. B. Fahrer, Aktuelle Saison, VIP-Experience)


Learnings VIP-Dashboard /

  • Die Übersicht wurde als klar und hilfreich empfunden – besonders die personalisierte Agenda kam gut an.

  • Einige Nutzer erwarteten zusätzliche Kontextinfos (z. B. Parkplätze, Treffpunkt).

  • Der Schnellzugriff auf wichtige Inhalte war intuitiv, könnte aber visuell stärker hervorgehoben werden.

Learnings Order-wizard /

  • Struktur klar und verständlich.

  • Wunsch nach Fortschrittsanzeige und visuellem Feedback.

Learnings Informationssuche /

  • Inhalte relevant, aber Navigation teils unklar.

  • Suchfunktion und Filter als mögliche Optimierung.

Weiter zur Experience

Weiter zur Experience

Weiter zur Experience