Designing my first VR experience

Published in

Design + Sketch

5 min readDec 12, 2016

I was given the opportunity to design a VR app by hijacking a small self-directed module at my university. The tools I used were Sketch, Framer, and Aframe. This is my process.

Step 1: Idea generation and wireframing

The first step was creating a concept that had potential. I landed on the idea of a VR mobile app that allowed people to save content online to view and interact with later in VR. A mixture between Pocket and Twitter. Then came quick sketches to transfer what was in my head onto paper. This took the form of a user flow and some basic user research.

Initial user flow and homepage wireframe

Step 2: User flow

Concluding on a user flow before getting involved in wireframing helped me focus more on the UX side. As wireframing, at least for me, always ends up being more designed than would be ideal. My aim was to keep the visual design as far down the process as possible.

Step 3: Lo-Fi mockups and testing

The next step was to create a grid that could support my content with ease. This was achieved by using Liu Liu’s Sketch plugin. It compiled my document onto a small html file borrowing off of Mozilla’s Aframe JS framework. This then would be transferred to a mobile device using a local https server that could then be used in conjunction with a Google Cardboard.

Testing was very important for this stage of the process. The first thing I looked at was the boundary boxes, wanting users to not strain when looking at either end of the content. This was done by finding friends to give me their initial thoughts, and then asking them about specific areas, such as…

“Look from the far left to the far right of the grid, is this a comfortable distance to move your head?”

I tried to test my prototype on those who had not yet experienced VR, as they would have the best insight on the frustrations of this medium.

As this was my first time designing for VR I discovered some basic key issues. The first was the fact that if anything was dead centre it risked accidental clicks or unwanted hover effects; and the second was the awful resolution when viewing on a web page on mobile. The first was easily adjusted, and the second, whilst annoying, helped in the future as testing at a slightly lower resolution to the real product forced me to think about clarity in type and images.

Step 4: Using a clear UI pattern

As mobile phone resolution is still very low for VR purposes I had to be very efficient with users time. Making a concise UI pattern was the first step in this endeavour. Throughout the app the aim was to have an easy to reach navigation box that would be consistant throughout. Alongside would be the main content, which would make up most of the screen real estate.

I found that following Brad Frost’s Atomic Design workflow helped tremendously. I incorporated his ‘Atoms, Molecules and Organisms’ design thought process into my sketch file. Making bigger design elements out of previously used smaller elements. Atoms making up Molecules making up Organisms etc.

Step 5: Hi-Fi screens

This wasn’t so much a clear step, rather a combination of slowly updating wireframes and testing Lo-Fi ideas.

User testing at this stage gave me many insights that I would have otherwise ignored. One such insight was the lack of typographic legibility on low contrast backgrounds, there was little room for subtlety. Another was using symbols instead of type wherever possible. This was due to the fact that reading was a chore, anything that would reduce the time taken to navigate was taken on board.

Step 6: Prototyping hover states using Framer

Hover states cannot be ignored when designing for VR. If the user doesn’t feel connected to the content you can’t expect them to explore further than the minimum amount they need to. Visual and audio feedback is a must.

This process began back at the initial sketching phase. Understanding the users needs and frustrations.

Then started the prototyping stage. Learning Framer and CoffeeScript solely for this project seemed daunting, but after attending a London meetup and reading through the documentation I was excited to get started.

After countless hours of prototyping I concluded on a handful of rules to follow:

Non-clickable elements should remain still when the user is navigating.
All interactive elements should have non-intrusive hover effects.
Keep important hover animations in obvious places.
Let the user have some breathing space, the screen real estate is infinite so preventing the user from being swamped is a must.

Reflection

While I had an enjoyable experience designing for VR, there were some obvious technical drawbacks. The first and most obvious was the lack of real 3D (Unity/Unreal engine) prototypes. As the tools I used effectively made 3D cylinders out of 2D screens it was far from perfect, especially when rendering text.

While I tried to user test in VR as much as I could, I could not test the hover animations. This was due to a lack of technical knowhow on my part. Hopefully I will be able to invest some more time in finding new ways to prototype in the future.