VR Barista Training

Designing the User Experience of VR Job Training

VR Barista Training

A FutureX Project

Worked within the Future Experiences team as a Unity developer, I focused on improving the UI and modifying 3D assets to enhance the immersive experience.

  • VR User Interface Design
  • Built in Unity3D for HTC Vive Pro

Original User Interface

When I first come into the project, the UI was quite messy. Since the target platform of this application was Augmented Reality, the UI was originally designed to ensure that key information is always visible to the user. The list of steps and coffee orders is overlaid on top of the user's view as follows:

However, the following issues came up when testing in VR:
  1. The overlaid information is distracting to the user. Since the purpose of our application is training, we want the trainees to focus on the actual activity.
  2. Due to the hardware limitation, lens of the HTC Vive tend to get blurry around the edges. It causes the text at the top-left corner hard to see clearly.
  3. The UI would become unreadable if more items are added to the list of steps.

After discussing with the lead designer, we decided to remove all overlaid information.

VR User Interface Design

Orders Panel

Order accuracy is one of the main requirement of this application. So we still need a place for the orders, but in a different location. I proposed a solution: place the orders panel on an "invisible belt" and strap it onto the user, so the player can review the orders by looking downwards.

I did a quick prototyping and moved the panel onto the user's virtual body, with position and rotation relative to the user's headset (CameraRig). So the player can move and turn around freely, with the panel just slightly below their body.

We iterated upon the position, angle, size of the orders panel. The final design is demonstrated below:

Usual viewing angle
Viewing downwards at about 30°