Research, Design, Front-end
Space train is an R&D project where users can experience Virtual Reality without the need of a VR headset. To access VR technology and enjoy the immersive experience, users just need a mobile phone and a Google cardboard. The challenge of designing for VR is that it is still quite a new medium for content. There would be a lot of technical constraints that would affect the user experience. We made a mini-game which is the most efficient way to engage users and many of our users tried out VR the first time. Our goal is to make an accessible, enjoyable VR experience.
Our research started with the webVR experiments that made by others. From Chrome experiments, we can see many examples and we brainstormed the ideas that would fit into our use case. We will be using the application during workshops, tech talks and occasions of introducing VR technology.
We found that the most engaging experience are those with easy navigation, with clear instruction to guide users and with interactive elements.
We also looked into the technical constraints that we would have later down the development. For example, all the major browsers support WebVR, which makes it more available to users, but we need to be aware of some browsers that would not support the technologies, we will need to add a message of how to get access to the experience.
We tested out some of the existing VR experience, interviewed some of the users and helped us to refine the ideas we have for the application.
With our research, we came up with a first-person game where the user is on a roller coaster. This is an experience which users are most curious with and would like to experience more. The users can interact with the element inside the game, gains points and speeds up the train by gazing to the asteroids around them.
We also looked into the style of low poly. This style originated from the 90s to render 3D models for video games with relatively low computing power. This style is often used to improve performance in webVR. VR experience can be optimised and the user can have a smooth experience.
User flow showing the wireframes.
By using A-Frame, we can quickly make a VR scene and test it out on a Google Cardboard.
Users use gaze control to complete the game. When users first started the webpage. it will ask them to turn the screen to landscape and put the phone in Google Cardboard. Then a loading gif is shown to let users know that the assets are loading.
A short video is shown to explain the gameplay after the assets are loaded.
When the users are ready, they can gaze to an asteroid to start. This step allows them to familiarise themselves of the interaction with the asteroids during the game.
After the game started, the counter starts and the train would start moving automatically.
Users need to reach the finishing line by gazing around the get scores. If the train slows down and stop, the game is over and it will give the users the option to restart.
In VR view
Audio Feedback – We find audio to provide short audio feedback when users hit the target.
A different experience every time they open the application – In order to create custom tracks so users can experience different games each time, we made custom components for A-frame to clone geometry along a curve.
Enhancing the experience – We used the components library to add post-processing effect for the final render, to give the experience an extra polish.
You can visit the experience here