VR lobby
Spatial UX/UI
Project description
Completely rethink an immersive experience that facilitates VR training
Team
1 UX researcher, 2 product designers,
1 product manager,
8 engineers
My role
Design manager and
UX designer
Completely rethink an immersive experience that facilitates VR training
1 UX researcher, 2 product designers,
1 product manager,
8 engineers
Design manager and
UX designer
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.
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
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
To make learners embrace VR as a viable training medium, we needed to do three things
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
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
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.
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
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.
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
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.
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.
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
