VR lobby

Spatial UX/UI

Project description

Completely rethink an immersive experience that facilitates VR training


1 UX researcher, 2 product designers,
1 product manager,
8 engineers

My role

Design manager and
UX designer

Problem statement

Novice users are often intimidated by wearable technology, especially one that separates them from their environment

Design strategy

Establish trust, build an intuitive interface, and make sure the learners' experience is engaging


Build an interface that achieves natural behavior in learners


Discovery: user research

Immersive spatial interfaces are relatively new. Design best practices are still being defined, and mostly for a gamer audience. Our target audience are not gamers and are not as open to trying new technologies. We needed to really understand our learners, and build an interface that targets users who have not used this technology before. It was critical that we understand from learners what their thoughts are regarding VR, from issues such as motion sickness and difficulty using the controllers, to more nuanced issues like the headsets messing up their hair, makeup, to concerns involving health and privacy.

Click on images to enlarge

Key user pains


Learners are skeptical about wearable technology.
Trusting that it will not harm their brains, scan their pupils and make them walk into walls are real concerns that prevent them from even putting the headsets on


Learners felt that this was a completely new medium, with a completely foreign interaction model that prevented them from focusing on the task at hand in an intuitive manner


As a result of the two previous points, learners could not relax and enjoy the immersive VR world, which prevented them from excelling at the training


Design philosophy and principles

Once I understood the pains, I came up with a simple philosophy that our designs needed to abide by.
Learners need to trust this piece of hardware, they need to be able to use it, Only then can we focus on making it engaging and enjoyable.
If learners feel safe, in control and are enjoying the experience, they will be more focused and will act as naturally as possible, which will yield better results


Educate learners about the VR world and the value it gives them
Establish our company as a trustworthy partner that will add value to their career.
Make them feel physically safe, so they are more comfortable


Leverage design best practices that are familiar to them.
Restrict the use of the controller to one or two buttons at the most
Give them an evaluation-free virtual space to practice and get comfortable using VR


Build a virtual environment that feels safe and approachable
Add hints of what VR can do to peak their interest
Diversify training so it's more engaging
Establish clear feedback loops on all actions taken

Defining the Design Principles

To make learners embrace VR as a viable training medium, we needed to do three things

Familiar (intuitive)

At the most basic level, the interface needs to be current. It needs to be something they recognize. They need to be able to anticipate what will happen in the UI before it happens. This flattens the learning curve and gets them to focus on the training, not on how to use the system

Living (Approachable)

Making the virtual world react and respond to everything from hovers, to looking around, to clicking. Motion design in pagination and scrolling, animated environments, ambient audio, visual cues and lighting all play a part in making this world and UI feel alive

Spatial (Immersive)

In a virtual world where the learners are inside the interface, it is critical to leverage depth to avoid a sense of claustrophobia. Icons can be volumetric, UI panels can live at different distances, and learners should be encouraged to look around and use their hands to interact with virtual objects. This principle is about creating a sense of immersion that only VR can achieve.


Low Fidelity design

Before tackling UI, we needed a virtual environment that learners will spawn in. This virtual space will hold three main UI sections:
Train: where learners access their assigned training
Explore: Where learners access non-training content, such as meditation and collaboration apps
Perform: Where learners look at their data from their training, and see the how they improved

Navigation testing

I asked the team to explore three ways for a learner to navigate this environment, and created visuals to describe that behavior. We then tested these prototypes with our internal users, as well as trusted customers.


Free roam


The winner. Easiest to use. Learners click hotspots that are clearly marked in the environment to navigate to that spot

While the most scalable, this approach proved too difficult for novice users, as it required maneuvering in different directions as well as rotating around

This approach was easiest to use, but was not comfortable, as learners had to continuously spin to access different UIs. Also, discoverability was compromised because they didn't see what was behind them until they turned

Environment layout

I then created a simple layout that enables users to see all three areas from their starting point to improve discoverability. After testing a few layouts, I landed on an "x" layout where the learner spawns in the middle, and can navigate to other areas while keeping their sense of direction. This tested well with users, and it was time to develop the look. Sometimes, it is better to show the team what you are looking for instead of describing it to them, so I took a couple of days and created a 3D "sketch" that would convey what I was looking for. The CG team took that reference and built the final environment (pink areas is where the UI would be).



Once the environment was in place, I created wireframes for the UI, making sure that interaction was as simple as possible, leveraging only one controller button. We ran extensive testing, and iterated to get the most intuitive interface for novice users.

Click on image to enlarge

Usability testing

Aaaah... reaping the rewards of happy, engaged users. Once the Creator tool MVP was complete, we ran usability testing on a few scripts and gathered feedback on how to streamline the process even more. Those tasks were added to the backlog for future development.


Final design

Once we got the final design, we had two sets of UI components: A dark theme that learners go through for onboarding, setup and calibration, and a light theme when they get to main sections

Click on image to enlarge
Click on image to enlarge
Click on image to enlarge

Results & positive reviews

Wasn't sure you would read this far, I guess I should keep going...

Key results

With the simplified interaction model, learners were able to navigate the interface with minimal issues, increasing engagement
The new environment made learners feel more at ease. This enabled them to focus on the training and enjoy the experience
With the "explore" section, learners got a chance to explore VR without being evaluated, enabling them to accept this technology more readily
With the "Perform" section, learners saw realtime feedback on how they were improving in their roles
The company saw a 50% spike in training sessions, which was attributed to learners enjoying the experience and looking forward to training

Back to top