Alice in VRLand, a VR Puzzler experience

As part of my coursework with Udacity, I was challenged to design, test and iterate a mobile VR game called Puzzler. My version of the game features Alice, returning to Wonderland for another adventure.

The game is simple. Enter VVondeRland, have a nice chat with the Mad Hatter, solve the puzzle and take the portal back.


Persona

Puzzler Persona Sketch

The game was designed having in mind a user with a very active imagination, always eager to try something new and escape the mundane.

This ensured that the UI had to be colorful, catchy and out of the ordinary.

In order to achieve this, I needed to have a special set of assets, background and sounds to create the magical Wonderland ambiance.


Design blocks and considerations

In order to build an enchanting experience and because I wanted to learn more about graphical design, I constructed my own assets in MagicaVoxel, using photos found online as inspiration. I then assembled my elements in the scene.

Some of the photos used as inspiration
Some of the MagicaVoxel objects I designed
How the elements look like in the scene

I also used two assets from the Asset Store to bring life to my characters:


User testing

After the initial user testing, the feedback was that the Start and Restart buttons were just “floating there” and didn't really fit into the scene, the path was “hard to follow” and the user didn't know which way to head and after completing the puzzle the camera was clipping through the table when it was moving towards the restart point.
Early design

With that feedback in mind, I re-designed the buttons so that they were more integrated into the UI theme. What I had in mind was to make the start button a crossroad sign and the restart button a portal gate.

Start and Restart buttons sketch
Final Start and Restart menus

To pinpoint the path and highlight the way the user should head, I made a checkered road and to avoid clipping I made the camera jump over the table. To distract attention from the table jump which looked a little forced on the Alice character, I added a rainbow trail renderer as a mask.


Audio

Most audio clips in this project have been processed with Audacity, either to trim them or to modify them to fit the theme.

Clips used feature:

  • initial start menu music of a girl humming a lullaby
  • Alice in Wonderland piano theme on Synthesia for the gameplay
  • Mad Hatter voice
  • Alice’s voice for reactions to the puzzle
  • cricket sound provided by Udacity for the forest

Final Result and Game Play

Crickets sing in the distance and you find yourself at a crossroad, humming a lullaby. Are you ready to start your adventure?

Enter Wonderland
Cardboard App Start Menu

When you’re ready, move forward and greet your old friend, the Mad Hatter, who is having a nice cup of tea. The music changes to a more dynamic piano pace to mirror Alice’s theme and induce the lively atmosphere of Wonderland.

You’re terribly late, you know?
Cardboard App Mad Hatter
Cardboad App Alice’s Rainbow Trail

After catching up with your old friend, move forward and try to solve the puzzle. Alice is very vocal in her reactions to you figuring out the puzzle.

Cardboard App Solve the Puzzle Point

You solved the puzzle! Congratulations! Now all you need to do is take the portal back. Are you ready to go at it again?

Cardboard App Restart Portal

If you are, you are teleported back at the crossroads again, where the UI prompts you to start your adventure again. The music changes back to Alice’s gentle humming.


Conclusions and final thoughts

Creating a VR app, especially one you’re very interested in is a lot of fun, albeit complex process.

I had the idea of a Wonderland themed VR app ever since I started this course and this was the perfect opportunity to sketch out a prototype. Picking this particular topic gave me more freedom in designing the experience because everything is allowed in a fantasy world and you can experiment with your own rules.

Developing this, I gathered a better understanding of UI, ergonomics, user testing, audio, motion, the importance of pixel density for text and overall design tricks in VR.


Next Steps

This is just a prototype of Alice in VRLand.

The final portal offers the perfect opening to adding additional levels and extending the game further. What levels would you like to see next?


Contact

Some of my additional work in VR features:

  • VRApartment — a VR apartment with a touch of Hygge
  • VRMaze — a VR Maze in Ancient Egypt. Can you find the key to the treasure?

For more inquiries, you can find me here: LinkedIn


If you enjoyed this article please recommend and share.