Process: Puzzler 👨‍💻

Over the past few months I’ve been studying with Udacity to learn VR software development. The course has been great so far, so I thought I’d share a little of what I’ve been up to with a game called “Puzzler”.

About Puzzler

Puzzler is a simple VR experience for Google cardboard. Basically anyone with a phone and a $15 cardboard headset can give it a try. The game has a simple UI where the user is thrust into a dungeon, where 5 magic orbs present a puzzle. Successfully playing a single round of “Simon” gets the player out of the dungeon to victory.

Here’s a brief video of the “final” version of the game:

The process

Of course, I didn’t just wake up one morning and build this thing. There is quite a process to go through to create a good VR experience. As I mentioned on this blog before, a good process can make all the difference when you’re building for someone that isn’t you. Which, let’s face it, is almost always.

The approach taken for this work was no exception so let’s break it down a bit.

Statement of purpose

I started the process by creating a simple statement of purpose for the game:

Puzzler is a mobile VR app which gives new VR users a quick taste of VR via their existing smart phone. The entire experience should take no more than a few minutes and be accessible to most anyone that's physically able.

With this in mind, I selected the nearest available human to be a test subject and personify my ideal target audience. My 6-year-old daughter Emma was the winner on the day. When starting out the build, first I documented a little about her, so I had a clearly defined outline to work too. Here’s the persona for Emma:

Persona

Image:
Emma
Name: Emma
Age: 6
Role: Child
VR Experience: Has played a few simple VR games, but not many
Quote (that sums up their attitude): “Can I play with your phone thingy, it’s cool.”
About this person: Emma is an enthusiastic VR user, she loves to explore and have adventures. She’s young and enjoys content that's exciting and interesting, but not too scary or intimidating. She will ask lots of questions and enjoys the discovery. I think it's fair to say she has moxie.

With a clear purpose and audience/persona defined it was time to get going with an initial design and an “alpha” build of Puzzler.

Concept sketches

I started by creating a bunch of really nasty looking sketches for what puzzler might look like. And when I mean nasty I mean nasty.

Here are a few concepts I had for the game initially:

My thinking with the above designs was my audience is young. Given that, it was better to use a large simple UI that could be easily understood and a very simple scene design that wasn’t overly difficult to understand. Once I sketched out something I was happy with I then took the designs and built something in Unity.

User testing

With the first cut done it was time to get going with user testing. It’s so important to get an early version in front of your audience to test assumptions. My early tests were really all about determining the basics, like the scale of the scene in relation to the subject.

Basically, from there on it was a process of iterating on the project. A mix of making assumptions, asking questions, and testing it all as often as was practical. To give you some idea of the things I asked, here’s a few of the Q&A sessions I had with Emma:

User test 1

Me: How big do you think you are in this scene?
Emma: I feel a bit smaller, normally I think I’d be taller than that barrel. I feel little.
Me: What’s the mood or atmosphere of the environment?
Emma: A bit spooky, but I like the purple balls. Not too scary, there are no witches, I don’t like witches. It’s a bit bright for a dungeon though.
Me: Is there anything you find difficult to see, or anything visual you think could be improved?
Emma: No I can see everything, but I can’t hear anything should I be able to hear things?
Conclusion: Emma picked up on the spooky dungeon, she was feeling too small so I adjusted the player's height slightly. I moved the orbs to be closer to the player since Emma liked them so much. I also added some sound to the environment.

User test 2

Me: How big did you think you are in this scene?
Emma: I think it's right. I'm the right height.
Me: What’s the mood or atmosphere of the environment?
Emma: Spooky, the sounds are spooky, it sounds like night time. It’s a bit dark.
Me: Is there anything you find difficult to see, or anything visual you think could be improved?
Emma: The balls are too close to me. I feel like I’m going to bang into the balls.
Conclusion: Emma feels the right size now, but I think the scene is a bit too spooky for her now and the orbs are making for feeling a bit close. I’ll move the orbs to a different location and increase the lighting a bit so it's not so scary.
IMG_4518
Emma hard at work user testing

User test 3

Me: How do you feel about the scene
Emma: It looks cool, I like the lights, it feels dark outside and spooky inside, but warmer.
Me: Do you understand how to start the game
Emma: Yes I click the big “Start”
Me: Do you know how to play the game?
Emma: Yes it's like “Simon says”. I do what the puzzle does.
Me: Is there anything else?
Emma: The balls are in the way of the door. I have to crash into them when I win. The game is too hard for me.
Conclusion - The game has matured to the point Emma is happy with it and can play it well, she still isn’t happy with the placement of the orbs so I’ve moved them back and did a quick retest, she’s now happy. I also reduced the complexity of the game to 5 steps.

Breakdown of final deliverable

So, in the end, we’ve got a dungeon puzzler that isn’t too scary for a 6-year-old to play. Emma likes the game and can successfully play it.

The basic break down of the “final product” is:

  • The user is presented with a simple UI screen to start the game.
Screen Shot 2017-07-30 at 3.06.40 PM
The start screen as see from the Unity editor
  • On clicking start the player is moved into the dungeon where they are presented with 5 magic orbs. Emma’s feedback had a significant influence on orb placement and the feel of the dungeon.
  • The orbs chime and blink in a random sequence which the player must complete to “escape”.
Screen Shot 2017-07-30 at 3.05.49 PM
The magic orbs as seen from the Unity editor
  • If the player fails to repeat the sequence a “fail sound” plays, and the puzzle is repeated to give the player another chance. If they get it correct they’re moved out of the dungeon and are presented with congratulations and the ability to restart.

Conclusion

Over all, it was a fun educational exercise doing this project. Plenty of things to learn from a process perspective but also in Unity 3D development. The work has given me a few ideas for other projects to experiment with, and further solidified my view of user testing and rapid iterations in the development of a product.

Next steps

Next I think I’ll move on to a new project, but stay focused on something for that target audience. I think it would be of value to include a few more testers, including Emma’s brother and friends.

If you’re interested in playing around with the above project I’ve shared the source code via bitbucket. The other projects I’ve done via the Udacity course are also available on the Geekpulp bitbucket page.

VR design – Google Street View for iOS 🗺

Part of my Udcaity VR course involves doing a quick/light review of a Google Cardboard app. So I figured I might as well post that here too.

VR App review – Google Street View – iOS

To call Google Street View for iOS a VR app feels like a bit of a stretch. Upon opening the app it’s immediately obvious the app isn’t designed from the ground up for a VR experience. Instead, it’s optimised for its primary audience of phone users.

On the home screen, there’s nothing to indicate there’s a VR interface option at all. The search bar at the top of the page obviously requires keyboard input, the main map, and even the tiles at the bottom of the screen, all require touch and there’s no way of switching into a VR mode from this view.

Google Street View UI
A mobile first UI

Those tiles I mentioned, that’s the easiest way to get to the VR side of things. Scrolling down the page show a seemingly endless list of Google Street View locations that can be viewed using a cardboard setup.

Selecting a tile presents a street view style UI (still not in VR mode yet). This allows the user to tap the screen and move around the environment. You’d be forgiven for missing the small icon in the top right of the interface for switching to cardboard mode. It’s the one that looks like a little cardboard headset.

IMG_4296
Not exactly obvious how to get to VR mode

If you were lucky enough to make it this far, you’ll be presented with a standard Google UI telling you to turn your device on its side and put it into your viewer.

Google VR viewer UI
Standard Google viewer info screen

Once in Cardboard mode, you’ll experience a familiar interface to many other Cardboard VR apps. One difference here is they’ve mashed VR together with a desktop browser style Street View experience. Obviously to look around you just… well… look around 😉 but navigation is done via a point and clicks teleport interface. This uses the “on ground” style direction button similar to Street View’s desktop UI. It works well and it’s fairly intuitive given the navigation follows the users’ gaze. Basically where ever you look, if you can go there, the arrow will point the way. I prefer a more obvious waypoint style interface as it makes it clearer where you can go, but that’s just a personal preference.

Google street view VR mode
Explore Machu Picchu in VR

As I said at the beginning it’s obvious this isn’t VR centric app, but then again it’s clear that isn’t the intent either. Given the nature of Cardboard being a mobile-based app, there’s an awful lot of sense in adding VR as a feature, rather than the primary UI.

Although mobile users are the primary audience, Google still does a great UI job for VR users and that’s to be commended. Really we shouldn’t expect less from an industry heavyweight like Google.

Of course, there’s always room for improvement, and this app is no exception. Street View being what it is doesn’t include any sound, it is just static 360 images after all. That being said it would be great to increase the emersion of the VR mode by including ambient environmental audio. It’s always amazing how good 3D sound can really put you in a place.

Conclusion

Ultimately Google Street VR did a good job of adding a VR mode feature to the mobile app. More could be done to improve the experience, but frankly, this is an impressive example of 3D content captured for one interface and repurposing it for another. It’s not exactly a virtual world tour vacation, but it might just encourage you to take one.