Puzzler - Design process

Step by step documentation of the design process made for the development of this VR experience.

TL;DR

It’s a key component to develop having a persona in mind. Later, after progressing in development (as little as it might be) to expose it to the user. Being open to feedback is essential, mostly to improve certain details one can further base on user experience.


Introduction

Before developing any type of experience (in this case VR), it’s necessary to have a design process and many iterations to help the user have a view of how the final product would turned out. Then the developer proceeds to do some adjustments in certain areas; clearly this benefits both parties, the user will have the desired product they wanted, the developer won’t have to make blind guesses, thus saving time. This an example of the process I’ve used to develop the Puzzler game.

Puzzler is a mobile VR application for new VR users which challenges them to solve a puzzle.


Outcomes

You can have access to the VR experience through these channels:

  1. Github repository (it requires Git and Unity3D)
  2. Android build (You can follow this tutorial to install it)
  3. You can watch a demo right here

Story of the process

The process initiates with thinking of a persona that will be the potential user of our app, in every step we take, we should think their preferences and interests of that persona. Later, design a rough workflow or walkthrough that the persona will follow through all the game states, then at the end, sketch the UI that will be required for such. Every step should have their respective user test, so it’s easier to modify.

Persona

Mariadna picture

Mariadna

Mariadna, 20 - Artist

  • “I do what I want”

Mariadna is an artist likes to explore different new ways to show art. She has heard about VR and wants to try it with different applications and games that stimulate her brain, specially if they can give her hints about how VR behaves for a possible art project. VR Experience: Beginner, just with regular simulations by smartphones

Level Design

The design for the levels was somehow simple, it’s just one room with the puzzle in which the user will enter, solve the puzzle, exit the room and restart if wanted. The environment is meant to be dark in the middle of the mountains.

Room with one entrance and one exit, surrounded by mountains

World design sketch

The spheres will be placed in the middle of the room and they will be used to solve the puzzle following the order that they blink on. I couldn’t decide which sketch to use, so I went with both until the end, when the user decided which one to keep

Five spheres positioned in a circle arrangement

Puzzle design sketch 1

Five spheres positioned in a horizontal arrangement

Puzzle design sketch 2

UI / Menu

For the UI, I thought it would be better to keep it as simple as possible; showing a direct message with a huge button so it’s easy for new VR users to click it.

Huge banner with message 'Puzzler, click here to begin' and button to Start

Start menu sketch

The restart button follows the same principle and when it’s clicked, the user will go back to the beginning of the game.

Huge banner with message 'Awesome, You won!' and button to Restart

Restart menu sketch


User testing

The user test was divided into many smalls parts, each of one was implemented after each section in the Story of the Process (except for the persona). Every bug found, was fixed before moving to the next step.

1. Reference to reality

It’s important to keep a reference to reality to know the height, width and depth of the objects to use; unless you want the user to have a different perspective. In this case, it was meant to make the play area as close as possible to real life dimensions. Once implemented the level design, I did my first user test.

A room with 5 balls in the middle

Entrance to the room

A room with 5 balls in the middle (more separated)

Entrance to the room 2

Wall, 3 barrels in a corner and 1 torch

Right side of the entrance

Right side of the room

Right side of the room

Left side of the room

Left side of the room

Questions (User test 1)

  • How do you feel compared to the room? Bigger, normal or smaller than real life?

I feel the room normal sized.

  • What does the room makes you feel?

I feel it like a dungeon, kind of scary, like someone is going to appear from that purple light.

  • Do you feel any discomfort or see something wrong? Like a bug?

There is this light close to the door that glitches when I move my head.

Results

Overall the user mentioned a bug that was later fixed, but didn’t mentioned any discomfort in the scene.

2. UI

After fixing the previous bug, I proceeded to create the UI according to the sketches. Unfortunately I have lost the screenshots, although you can see them in the next step

Questions (User test 1)

  • Are you seeing a panel of some sort?

Yes

  • How big do you think it is?

Like a windows size, but it’s placed incorrectly, it should be more in the middle

  • What do you think this panel is for?

To start the game

  • Can you hit the start button for me? What do you think the next panel is for?

To restart the game

Results

There’s a change to be done in the panels to place them in the correct position

3. Movement (Motion sickness)

In this step, it was tested the movement speed and direction to enter and exit the room. There is a full documentation provided by Oculus which explains some causes and solutions for motion sickness that can occur in VR Experiences.

Questions (User test 1)

  • How do you feel about the movement speed?

Normal, I think is the right point between slow and fast

  • Do you feel the movements make you sick?

Not at all

  • Do you notice anything disorientation in the scene or movement?

No

Results

No major problem for the user, so nothing to add or to modify in this stage.

4. Adding details and game implementation

So far we have the level, panels and transition for each state of the game, but it’s missing the most essential, which are the rules of the game. Apart I have added some extra details to make the scene more captivating, such as mountains for the environment and fire in the torches.

Questions (User test 1)

  • What is your impression about the full VR experience?

It’s interesting, but some things seem kind of odd, like the outside environment.

  • Any other detail?

I think you should place the spheres more at eye level also the fire doesn’t look that real.

Results

There are still some changes to make, but the overall experience is improved.

Darker environment

Questions (User test 1)

  • What does the VR experience make you feel?

It feels it more dark and scarier.

  • Have you found anything that doesn’t feel right?

I’m expecting something to jump in my face and scare me at any moment, but nothing more.

Results

The user felt the environment altered the way I was looking forward to.

Fire animation

Questions (User test 1)

  • Please, this time pay special attention to the torches around you. From all of them, which one you feel fits better to the environment?

All of them look fake, but in my personal preference I like more the flames that are seen at the end of the room.

Results

The user gave her opinion towards the best flame animation to use. Although she would prefer something different.

Second tester

By the end of all of the changes, a second tester, who had no experience with VR (and that much gaming either) can be seen in this video that they are struggling using the application. I tried to edit the video so it’s not as long (original file was more than 8 minutes).

Questions (User test 2)

  • How do you feel compared to the room? Bigger, normal or smaller than real life?

I feel normal related to the area, although the room is bigger than a normal room, probably because of the high roof.

  • What do you feel about the environment?

If you want to scare or make people believe it’s a “Dracula” environment, then you are doing it correctly.

  • Do you think the movement speed is correct?

Yes, it makes the transition pleasant.

  • What do you think about the initial panels?

They should be changed, if you want to make it seem like a scary scene, the banners are way to simple and hard to recognize.

  • What do you feel was the most challenging?

It’s the first time I am broad to something like this, so it was hard for me to see the color changing spheres, as I can’t see that well, it was really hard to recognize the transitions.

  • What do you think of your first VR experience?

It’s amazing what people can do with technology these days. Back in my days, creating a program in FoxPro was the ultimatum.

Results

As this tester is older than the expected persona, there were many more changes compared to the other tester, but all of this will improve the experience to make it more accessible to more users. Whenever you have a chance to show it to a completely different persona, give it shot, it can provide amazing feedback like this one.

After this, I changed the colors of the spheres, the panels and then added the lightning effect to make it more visible from the back.


Breakdown of final piece

At last, we have implemented the overall game mechanic (start, play, end / restart) and some other details to give the experience a dark/creepy feeling. This details include:

  1. Lightning effect: This sets the environment for the user and gives some vision over the dark mountains.
  2. Fire in the torches: The animation was changed to a more realistic one.
  3. Flickering lights: To emulate the light produced by fire
  4. Changing the spheres color to red: So it’s easier to see which one is activated and easier to follow the changing pattern.
  5. Darker lights: Just for the feel of the environment.

You can access the download links back in the Outcomes section


Conclusion

After a lot of iterations which included the loop of developing and testing, we finally got our first release and this shows the importance of agile methodologies for developing. In the past, the waterfall process finished a product but there was no feedback from the user, making it hard for developers to re-do all the errors; imagine trying to solve all the bugs / fixes / changes that were found by the user at the end of the first release, it would be a totally different application from what it is now and even worse.

It’s a key component to develop having a persona in mind. Later, after progressing in development (as little as it might be) to expose it to the user. Being open to feedback is essential, mostly to improve certain details one can further base on user experience.


Next steps

  1. Create a project so people can discuss future improvements
  2. Add sound effect for the lightning
  3. Try to create a storyline
  4. Include “realistic” components, like the flames
comments powered by Disqus