Billabong VR

Research / Storytelling / Conception / Visual Design

Billabong VR is a virtual reality experience designed for surf brand Billabong intended for use at business fairs or in stores

See resultsWhat I've learned

Overview

"Development of a VR logo experience" was a project seminar by Prof. Tina Glückselig at the Münster School of Design (MSD) in winter semester 2019/2022. The project seminar was linked to the theory seminar "VR research - exploration and systematization" by Prof. Lars Grabbe.

The aim of the interdisciplinary project seminar was to further develop an existing two-dimensional logo of a brand in virtual reality and to make it experienceable. With the support of the master’s students in the Department of Electrical Engineering and Computer Science (ETI) the VR experience should be implemented in a prototype as a technical proof of concept. The master's students were under direction of Prof. Jürgen te Vrugt (ETI).

Along the project responsibility on my own I had support by fellow students: Participants in the theory seminar were Emily Puhahn and Mathis Einemann (MSD) for theoretical support, and Benjamin Basmaci (ETI) for technical implementation and advice.

Goal
Rethink an existing two-dimensional logo of a brand in virtual reality and make it experienceable
Participants
Tom Gieß (responsible)
Emily Puhahn (consulting)
Mathis Einemann (consulting)
Benjamin Basmaci (consulting)
Support
Prof. Tina Glückselig (MSD)
Prof. Lars Grabbe (MSD)
My Tasks
Research
Storytelling
Conception
Visual Design
Phase Explore

Research

At the beginning a brand and an idea for a VR experience had to be found and considered for the task. In my research, the brands SpaceX, roestbar and Billabong attracted me. The decisive factor for the choice should be the scope of the idea for a VR experience, which should not be too narrow and not too wide.

With Billabong the obvious theme was surfing. Since I was personally able to take surfing lessons with great pleasure, I had an intrinsic motivation and interest for this topic.

Billabong's "The Feeling"

The Billabong brand defines itself by “The Feeling”. It is stated as an emotional state that only surfers know:

„Only a surfer knows The Feeling. For me, The Feeling is paddling into a wave and realizing all of a sudden that this magical force has a hold of you, this thing you can feel but can’t see.”

Gordon Merchant, Co-Founder

During my research I found that "The Feeling" plays an important role in Billabong's self understanding and the lifestyle that comes along. It was the entry point for the project idea I later came up with.

© Billabong's logo

Goals

To sharpen the rough concept for a VR experience, which contains the subject of surfing, I defined the following goals:

  1. Wake interest for surfing
  2. Provide knowledge of surfing practice
  3. Reach association with the brand and the lifestyle which comes along
  4. Link Billabong's products as the VR experience can be used for advertisement purposes

Further methods used in this phase

Phase Understand

Theoretical Basics

Analysis criteria

In the theory seminar by Prof. Lars Grabbe, which was linked to the project seminar, I learned four criteria that underlie the analysis of the overall experience of virtual reality:

  1. Aesthetics: visual design
  2. Interactivity: interactions and required devices
  3. Communication: information and content meaning
  4. Perceptual order: addressing human senses

In the theory seminar by Prof. Lars Grabbe, which was linked to the project seminar, I learned four criteria that underlie the analysis of the overall experience of virtual reality:

Phase Define

Conception

Idea

The VR application lets users experience Billabong's "The Feeling" and the basics of surfing on their own bodies.

The user finds himself sitting on a surfboard on the open ocean. In the distance, the Billabong logo appears, appearing in the form of stylized waves. Suddenly a wave approaches towards the user from the open sea, which he has to surf in order to be successfull in this experience scenario.

From now on instructions for interactions appear that the user must follow in order to get up to speed, get on the board and surf with the wave towards the beach and along the huge towering wave. If the user passes this task and surfs the wave, the next wave with the next higher level of difficulty follows from the open sea. After a few waves that the user has mastered, he comes to the beach, where his surfing buddies welcome him and cheer him on.

Storyboard

In order to be able to communicate my idea in my project group, a simple storyboard helped me to make my ideas for the course of a usage scenario visually understandable for others. These were first created on paper and then further detailed in Photoshop as a 360° sketch.

Mapping: Surfing scenario and VR analysis criteria

In my research, I previously dealt with the process of surfing: catching a wave, standing up on the surfboard and then surfing the wave. I was able to divide this process into 5 phases. With the help of Miro, I related the phases of surfing to the 4 learned VR criteria. This allowed me to define what was happening at the different levels of perception during the VR scenario.

Further methods used in this phase

The following functions for an interactive application can now be derived from the identified needs and the collected content:

Phase Define

Interactivity & Perception

The following interactions in virtual reality were planned for the user scenario:

Illustrations by Mathis Einemann

  1. Looking around while sitting
  2. Turn body to the right
  3. Paddle with your arms laying on stomach
  4. Standing up from a push-up
  5. Keep balance
  6. Return to sitting

Users' expectations

In the VR scenario, you have to sit, turn, lie and stand on a virtual surfboard. The first simple idea for the movement was to use an office chair, because every user would have one. In order to check whether an office chair is a suitable piece of equipment that could be adopted by future users, I conducted user tests on a small scale.

The participants started sitting on the office chair. Then, one after the other, they were given sequences of movements verbally that they should carry out in context of surfing, based on how the participants interpreted as the correct one. They did not get a visual demonstration of any kind.

Most of the movements weren't performed the way I thought they would be performed. In particular, getting up and sitting down on a virtual surfboard could not be transferred to the haptics of an office chair in the imagination of the participants. From the observation I was able to conclude that an electronic equipment representing a surfboard had to be very close to the haptics of an actual surfboard.

"A board that you stand on and that allows you to lean left and right would be even more real."

Jan

"I forgot there was a chair to sit back in."

Irina

Prototyping and technical Proof of Concept

Smell and taste

To add to the immersion, I came up with the idea of using a fan and salt water to simulate a sea breeze to appeal to the olfactory (smell) and gustatory (taste) senses. To achieve this, I placed the body-high fan in front of the user and spray water into the wind with an atomizer.

Ideal equipment

Since the VR scenario deals with surfing, I had the idea of taking a lot of the user's movement into virtual reality. The Münster University of Applied Sciences had a number of VR devices that could be borrowed for experimentation. In the conception I intended these ideal-typical devices:

  • Head-mounted display
  • Bodysuit
  • Wired gloves
  • Surfboard-like equipment

Sketch by Emily Puhahn

Phase Define

Communication

Micro animations

Surfing requires correcting timing. In order to turn the motion sequence into a challenge for the user, I had the idea of using quick-time events. A quick-time event describes a short, sudden period of time in which an interaction must be carried out by a user. This is often used in video games.

For the VR experience, it meant letting users understand in a few seconds which movement is needed next to pass the surfing scenario. It required a simplified way of representation that is easy to understand and clear: micro animations.

Appearance of Billabong's Logo

The logo emerges from the sea at the beginning of the VR experience. As part of the virtual environment, the connection between the VR experience and the Billabong brand is linked.

Accompanied by a sound mark, in which a reverberating electric guitar sounds, "The Feeling" (the surfer feeling) should be emphasized auditorily.

Paper stopmotion

Soundscape

To show users that their interaction was successful, the VR scenario would keep running. The movements are supported by the following sounds as an auditory feedback:

  • Appearance of the logo
  • Sea noise
  • Water splashing
  • Seabirds
  • Building and approaching wave
  • Dipping arms
  • Be underwater
  • Cheering surfers

In the case of an interaction not executed correctly, an increasingly dense vignette of water drops forms in the user's field of vision. As the quick time event expires, the digital image fades to black. White typography on a black digital image communicates the user has not passed the VR scenario.

When the scenario is passed successfully, the digital image fades to black and shows the Billabong logo in white as a way to end with the company's branding.

Illustrations by Mathis Einemann

Phase Design Solution

Aesthetics & Visual Design

Digital environment

To stay close to the aesthetic of the Billabong logo, which should be part of the virtual environment in the concept, I decided to adopt the flat, smooth shape language as the overall style. In order to create an atmospheric scene, a low light setting was very important to emphasize the beauty of the sunrise and sunset.

Drag image to take a look around:

Avatarial body and attributes

For the user's avatorial body and surfboard, I went for a clean look that complemented the black and white visuals of the Billabong logo. For the virtual body, I did not choose a directly recognizable gender in order to enable everyone to identify with it as a body ownership illusion. The logo is also applied to the surfboard to make the brand visible.

VR scenario

What I've learned

Through this project seminar I was pleased to learn the basics of methodology and practical tools to design a VR concept. Working very closely with developers, I had the opportunity to get a feeling of technical possibilities of the Unity game engine.

The conception of a VR experience for the topic of surfing faced me with a number of challenges during the conception phase. Especially ideating the digital environment between cartoon and hyperrealism, that would fit Billabong's brand as well as how users would interact in VR took its time. In the end I was able to produce a visual prototype with the use of computer-generated images and videos demonstrating what a developed VR experience could be experienced like.

A huge thank you to Emily Puhahn, Mathis Einemann and Benjamin Basmaci for their advising and technical support contributing to my project.