Volkswagen R Webseite

PERFORMANCE ZUM ANFASSEN

Die Volkswagen R GmbH ist die Motorsport- und Performance-Sparte der Volkswagen AG. Seit 2002 entwickeln die Wolfsburger sportliche Varianten der Volkswagen Modellreihe und bringen so die Leidenschaft des Motorsports auf die Straße. Das Unternehmen verfügte bis 2012 nur über eine integrierte Microsite in die Volkswagen Onlinepräsenz, hatte also keine Möglichkeit ihre Produkte, ihre Unternehmensphilosophie oder Markenwerte präsent zu kommunizieren. Im gleichen Jahr startete meine Arbeit an einer autarken Webseite für Volkswagen R.

Erarbeitung der UX-Strategie und des UX-Konzepts

Formulierung von Personas und Definition der User Stories

Das Projekt startete mit einem Kundenworkshop, der sich zum Ziel setzte, grundlegende strategische Fragestellungen zu formulieren und zu beantworten (z.B. „Welche Features soll die Webseite enthalten und warum?“, „Wie differenzieren wir uns von Marktbegleitern?“). Von Volkswagen waren zwar essentielle Bestandteile der Webseite (wie ein Konfigurator) bereits gesetzt, allerdings war das „WIE?“, „WO?“ und das „WARUM?“ noch nicht geklärt.
Spannend war vor allem zu sehen, dass sich die Personas nicht nur innerhalb der Nutzergruppen der Webseite unterschieden, sondern auch innerhalb der Fahrzeug-Modellenreihen (Persona Golf R Fahrer ≠ Persona Touran R-Line Fahrer; obwohl beides potentielle Nutzer aller Webinhalte).
Als methodische Ergänzung zur Definition der Personas, setzte ich auf die Formulierung und das Decomposing von User Stories. Dabei kristallisierte sich schnell heraus, dass vorrangig Buzzwords wie „motorsportaffin“, „technikbegeistert“, „leidenschaftlich“ und „emotional“ verwendet wurden. Das Decomposing der Stories nutzte ich nicht klassisch zum Clustern der (technischen) Anforderungen, sondern als einen Ansatz zum kreativen Brainstorming auf Basis der User-Gains.

Zusammenfassend ergaben sich die drei großen Zielsetzungen „Emotionalisierung des Produktsportfolios“, „Differenzierung der Marke R gegenüber der Volkswagen Serie“ und „Aufbau einer digitalen R Community“.
Dies sollte im Wesentlichen durch einige Key-Features realisiert werden. Dazu zählten z.B.:

• Ein „Visualizer mit Möglichkeit zur technischen Visualisierung von Inhalten (z.B. Fahrzeug-Morphing, Aerodynamik-Visualisierung, etc.)“
• Die „Etablierung eines Community Bereichs, u.a. mit der Möglichkeit GPX Daten von Touren zu sharen“
• Die Möglichkeit einer „Reverse-Configuration“, also der Konfiguration nach Nutzer-Bedarf bzw. „Taggen“ der Fahrzeuge und Anbauteile
Und insbesondere:
• Das „Aufwerten des Nutzerelebnisses durch „emotionale Elemente“ (Teaser/Specials), die nicht lediglich die Kampagnenmotive abbilden“

Card Sorting, Flowcharts und Low Fidelity Wireframing

Ausgehend von den gewonnenen Erkenntnissen des Workshops modellierte ich mittels Card-Sorting eine sinnvolle 1st & 2nd Level Navigationsstruktur. Damit schaffte ich mir eine fundierte Grundlage zur Erstellung der Flow-Charts und meiner Low Fidelity Wireframes.

Meine ursprüngliche Idee war es, die Fahrzeug-Detailseiten nicht in klassische Sub-Sites zu ordnen. Stattdessen sollte der Visualizer des Modells als zentrale, interaktive Komponente genutzt werden, um alle Inhalte zum jeweiligen Fahrzeug dort erlebbar zu machen. Mein Ziel dahinter war die Reduktion der Klicktiefe und daraus resultierend nicht nur ein intuitiveres Nutzererlebnis zu schaffen, sondern die Modellseiten gleichzeitig „SEO-freundlicher“ zu gestalten. Im UX Test fiel diese Variante allerdings als „in der VW-Welt zu wenig gelernt“ durch, weshalb ich mich für eine klassischere Navigationsstruktur entschied.
Um den Ergebnissen (Emotionalisierung & Differenzierung zur Serie) aus der Formulierung der User Stories Rechnung zu tragen, entschied ich mich zum Einen, für den Einsatz mehrstufiger, interaktiver Teaser und zum Anderen für die Integration von technischen (R-spezifischen) Fahrzeugfeatures direkt in den Konfigurator. Beides waren Elemente, welche die Serie nicht verwendete und so lief man bei keiner der neuen Komponenten Gefahr, in Konkurrenz zur Webseite des Mutterkonzern zu stehen.

Bei der Erstellung der (Low Fidelity) Wireframes legte ich neben der visuellen Strukturierung der Inhalte insbesondere Wert auf die Definition der Komponenten für den späteren Aufbau der UI Design Pattern. Unterschiedliche Komponenten ließen sich durch Farbcodierung und Iconsprache aus dem Wireframe ableiten.

Gestaltung des UI und Contentproduktion

Design Pattern und Iconography

Das Wireframe definierte bereits die zu erstellenden Komponenten. Diese ließen sich wiederum in sinnvolle Design Pattern separieren. So war über das Card Sorting bereits definiert, welche Elemente die Navigation beinhalten musste. Die User Stories dienten weiterhin zur Grundlage bei der Erstellung des Visualizers. Exemplarisch für die diversen Design Pattern, war z.B. die Erstellung der Iconography.

Es galt, eine einheitliche Iconsprache für das UI aller Komponenten der Seite auf Basis der Volkswagen Designvorgaben zu erstellen. Diese mussten jedoch an die speziellen Anforderungen der VWR angepasst werden, zumal sie später nicht nur Bestandteil der Webseite waren, sonden auch VR-Anwendung Gebrauch fanden. Die Inhalte stellten sich als sehr dynamisch heraus, da im Laufe der Zeit Features hinzuaddiert, ersetzt, oder in ihrer Funktionalität verändert wurden.
Die Überführung der Wireframes in ausgestaltete Seiten spannte mich aufgrund der Vielzahl der zu erstellenden Komponenten wochenlang ein, zumal jedes der Features auch responsiv funktionieren musste. Nach Fertigstellung des Seitendesigns musste der entsprechende Content, allen voran der Visualizer und die Teaser erstellt werden. Ein kleiner Ausschnitt der ausgestalteten Seiten ist hier zu sehen.

Teaser und Specials

Seitenteaser bezogen sich meist auf den Launch von neuen Fahrzeugen, für die von Volkswagen Charakteristika definiert wurden. Daraus galt es, eine geeignete Adaption der Bildsprache zu finden, sowie ein Konzept zu erarbeiten, wie mit dem Teaser die größte Aufmerksamkeit generiert werden konnte. Für den Scirocco R, der in der Lead-Kampagne vor in einem düsteren urbanen Setting platziert wurde, bot sich daher ein Graffiti Industriestil an, bei dem das Fahrzeug durch Nebel verhüllt wurde. Für die Produktion wurde eine Lagerhalle angemietet, Graffiti, Nebel, Beleuchtung und Fahrzeug wurden später in der Postproduktion mittels CGI integriert. Obwohl der Teaser vorerst „nur“ auf der Webseite platziert wurde, erzielte er bereits nach wenigen Minuten nach Livegang erste Resonanz in diversen Foren und im Social-Web.