INTERACTIVE CONTENT TO BOOKING PLATFORM

The Volkswagen Performance showroom shows its true nature at speed — just like the cars. Sophisticated at rest, but scroll fast and site bares its teeth.

An online showroom experience was created that used dynamic scrolling to change the content of the website, when the user scrolled fast, standard content transformed to short punchy messages with imagery of the car coming to life with WebGL and sprite sheets.

Our goal with VW was to launch a new online showroom that also pre-launched the new Golf R Performance model. Insights about automobile enthusiasts presented an opportunity to build a showroom that gives drivers an online experience of the performance range, informs users of the various model features, let’s users sign-up to new model launches and book a test drive at their nearest dealer.

UX & DESIGN

SOLUTION

The Volkswagen Performance showroom was approached like designing the interface of the automobile, with navigation and interactions that gave the user control of the experience. Scrolling up and down, or using arrows — locked on each automobile feature. Left and right navigation directed the driver to take the scenic route and find out further about the technologies behind each feature — performance to design. A ‘Ready, Set, Scroll’ navigation was tracked to the y-axis of the viewable content in the browser. When the user scrolled at speed, content passing the top of the browser would activate sprite sheet overlays, transforming the content to be darker, creating a spotlight on the automobile and highlighting words in the iconic racer blue of the new model.

The automobile images would also give the impression of the car moving, showing traction when breaking around a bend for unrivalled handling. WebGL and JavaScript combined with a stop frame motion image effect brought the automobile to light.

CHALLENGES

PERFORMANCE IS A FEELING, HOW DO WE REDUCE CLICKS TO CONTENT?

A performance showroom experience could be compared to sitting behind the wheel of a car with an automobile designer, engineer or Jeremy Clarkson sitting next to you. We wanted to capture this experience online, pre-test drive. Rather than creating watchable or interactive content that links to technical details, we decided to put the online showroom to the performance test. Making the scroll browsing interaction the performance feature.

AUTOMOBILE ENTHUSIASTS CARE ABOUT DESIGN AND ENGINEERING DETAILS

Motorheads can spend hours talking about the nuts, bolts and well-manufactured curves that send thrills through yo ur body. An automobile showroom wouldn’t be that without performance automobile feature details. User insights informed us that specs are just specs unless they’re relative. Therefore multiple models needed to be viewed, with a way to filter information that the driver deemed important — beefing up car knowledge to get their hands behind the wheel.

PROJECT

PROCESS + LEARNINGS

Post ideation, wireframes were created to understand the simplicity of the usability with navigation. This also gave the team involved a good picture of the amount of information planned for the showroom. With copy having a role in normal and R-mode, we identified information into sizeable areas.

We delved into various user flows and journeys to design for a range of use cases. While this was being refined, I created an animation and effect prototype to scope viability with developments and possible technologies we could use. Everything came together when we refined the final designs with hand-off of module templates with components, UI toolkit and style guide to developers to build the site structure, allowing us to refine copy, animation and interactions.
With often ‘information heavy’ online showrooms, that use galleries and homepage features for content — The new VW Performance showroom balanced the finer details with interaction, exciting content and simplified navigation. Making the whole experience as engaging as the landing page.