Volkswagen Sagitar

/ ROLE

Lead UX and UI designer

at Splash Worldwide agency

/ THE CHALLENGE

Volkswagen were launching their new Sagitar model to the China market and as part of the launch, they wanted a microsite with emphasis on gamefication and personalisation.

The initial brief was to create a microsite with 3 phases added over the course of a month. This later changed to become 5 phases added during the course of a month.

index

/ DISCOVERY AND APPROACH

Working with the project team in the UK and China, we set about researching the automotive and game markets specific to China. Working with the client, we familiarised ourselves with their customer profiles and worked wtih the marketing teams to liase on the content that was going to be produced over the course of the launch and how that would interplay with the launch of the car.

 

/ DESIGN, TESTING AND ITERATION

Phase 1 - Bauhaus: The Sagitar was inspired by the Bauhaus movement so naturally this was a fitting introduction to the car. I designed a puzzle-style introduction where each week, a new piece of the puzzle would slide and reveal new content. Phase 1 Bauhaus introduction was a scrolling paralax animation which connected the car and its definitive features to elements of the Bauhaus era

Phase 2 - details: The second phase provided the customer with further specs of the vehicle through exploration. Customers were able to choose from viewing 3 angles of the car and each view was accompanied by expanding content that would further elaborate on a specific car detail and/or display video or microshots.

5
2

Phase 3 - trailer: The client wanted to showcase the TV commercial in the third phase alongside a 3D-version of the video. I worked with the development team to create the interface to support the video content, which would allow users to switch between the 2D and 3D trailers as they pleased.

Phase 4 - gamification: There is a big market for gamification in China and to exploit this, we created a mini game where customers were able to record or select their own sound effects to parts of the TV commercial and then save, export and readily share this new clip onto their social media networks. Users were able to select from a set of pre-made sound effects or record their own voice clips in place of the characters and moments within the original footage.

Phase 5 - personalisation: The final stage allowed users to customise their own Sagitar vehicle and save it onto their desktop as a screensaver. They were able to choose from a series of backgrounds, wheel styles, colours and finishes.

Launch: The launch day was streamed live on the microsite and we created functionality for the stream to be shared across all of China's social networks. 

6
7

/ FINAL OUTCOME

The microsite was well-received and paved way for the agency to work on further car launches with the client.