Puzzler | Mobile VR Game

For my Udacity VR Development course, I was designing, building and testing a mobile VR game called Puzzler. The purpose of the experience is for the players to solve a puzzle upon entering a dark dungeon and thus to be able to exit it. We were also tasked to create this experience in a way that would be intuitive for users to understand, and easy to navigate through mobile device – without them having any previous experience in playing VR games.

screen-shot-2016-12-26-at-18-25-10

DESIGN PROCESS

Statement of purpose: Puzzler is a mobile VR game that asks players to solve a puzzle in a mobile VR experience.

Persona: Going though profiles of a number of people who might be our potential audience, and analysing patterns in their features and behaviour, we created a persona for this project.

Jack

25 y.o., in a relationship, sales manager.
BA in English literature.
Into computer and mobile gaming, electronic music.

Google Pixel, MacBook Air.

Jack travels a lot for work and likes playing games on his phone or tablet while on the plane / train.
“I like multiple player games because I enjoy interaction. Unless the game offers something more, I would almost always want to play against or with other players.”

User journey and sketches: We first identified the user journey for the game. It consists of 3 major steps: start, game, restart.

1. Start: Player is introduced to the experience, and is told what to expect
2. Game: Player begins the puzzle and solves it
3. Restart: Player is told they have succeeded, and asked if they want to play again

Based on the user journey, we created a few quick sketches to visualise the game and see proportions and position of elements:

wireframe-15

SETTING UP SCENES IN UNITY

After creating sketches, we moved on setting up the scene in Unity.

We used a prefab for Gate, and checked the scale of it in a cardboard viewer. After the size felt comfortable enough, we set up the rest of the scene.

We used provided textures for the walls and floor to set the overall scene mood too.

screen-shot-2016-12-24-at-09-33-01

We also created orbs and placed them inside the room so later on we could use them as a puzzle. Since the orbs are the key element of the puzzle and have to be visible, we made them of a light blue colour, to contrast with the dark gloomy walls:

screen-shot-2016-12-24-at-17-23-56

To create an even more moody realistic look, we added up some point lights that come from the torches in the room. Originally there was just one torch, but after user testing, the scene appeared to be a bit too dark, so we added a few more torches on each wall:

screen-shot-2016-12-24-at-17-37-34

We also experimented turning off the directional light too, to have an even moodier scene and a darker outside background.

After another user test, we also got a feedback on orbs being too bright and not fitting in the overall scene, so we made them a darker blue.

screen-shot-2016-12-26-at-19-35-49

screen-shot-2016-12-26-at-18-25-10

screen-shot-2016-12-26-at-19-36-22

We placed a starting UI board before the entrance and a finishing UI board for the user to see upon exit, and created a smooth liner movement into the dungeon and outside:

Deploying the scene on mobile device, we were able to move onto the game testing. At this stage, we also added up a puzzle element into a game, so the orbs would light up in a random sequence, and a user would have to repeat that sequence clicking on orbs to move outside the dungeon:

.

USER TESTING

Testing scale, light, distance, comfort

The first time we deployed an app to mobile phone and gave our first user to try the environment, their feedback was that the room was way too short, and the orbs were hanging on the distance of their nose. Other than that, the room was tall enough and wide enough.

On different stages of the design process, we conducted two user tests on the discoverability of orbs in the scene. We started off with the bright blue orbs (when the scene was lighter) which seemed good enough, but once we changed the overall light to the gloomier darker mood, the user commented that light blue orbs were overly bright and did not fit the scene, so we changed them a darker blue.

Taking into consideration the first feedback, we made the room longer, which after deployment made our user’s experience more comfortable.

Testing the UX

We also conducted multiple tests to see whether the overall game experience was good and if everything was intuitive enough for the new users to play.

Since the game is very simple and there are only 3 scenes – one leading to the other one – everyone found moving between the scenes a very intuitive experience. All of the participants were able to successfully solve the puzzle, and were moving around the scene as was planned in the user journeys.

BREAK DOWN OF THE FINAL PIECE

Motion: To avoid VR sickness, we decided to go with the linear waypoint movement inside the dungeon. With a rather simple user flow, we only needed 3 waypoints.

User interactions: All interactions were performed with clicks of cardboard button: to start the game, to match patterns when solving the puzzle, and to restart the game after solving the puzzle.

Aesthetics and mood: We used dark brick textures on the walls and stone texture on the floor to create a dark moody scene. Lighting and sound effects also added up to it.

screen-shot-2016-12-26-at-19-40-18

CONCLUSION

The UX design process to create a mobile VR game is more complex than standard mobile app or web service design process. Apart from standard procedures, it should also include considerations and testing of motion sickness, scaling more effectively and spacial movements.

NEXT STEPS

Next steps would be to create more levels to the puzzle, which would either be a few more puzzles in the room, or a few more rooms, where exiting one would be entering the other one.

_

Author – Anastasiia Kucherenko
[github profile]

Date

December 16, 2016

Category

VR Design