Social WebVR
Mozilla Hubs
An immersive virtual reality social experience that is delivered through the browser
Overview
Mozilla wanted to bridge the barrier of entry for new users on their social VR web app, Hubs by creating a seamless onboarding experience and optimizing a few interaction pieces of the existing product.
The product is a webXR app therefore anything created needs to account for cross-platform input modalities (mobile, web, HMD).
Occlusion for in-world UI posed to be a huge problem for users on screens since they don't account for z-axis spatial interactions. Screen overlays and permanent UI regions on web and mobile were not transferrable to HMD experiences.
Creating in-world HMD-specific experiences would overload engineering bandwidth so I needed to create UX and assets that would be easily implemented.
I created a cross-platform design system that would be visually consistent throughout the app, while also accounting for the different input modalities of mobile, web, and HMDs. This was applied to a tutorial experience, surfacing menus, pause mode, and chat box feature.
Design
First Time User Tutorial
Our goal was to streamline the onboarding process for new users. I worked directly with community event producers in order to understand pain points for their event attendees and prioritize interaction needs. We decided to update the FTUE specific to each device.
Tooltips
Users told us that the most difficult mechanics and interactions to discover in Hubs were the movement keys (WASD+QE) and learning how to open object menus. We created tooltips that appear on the screen temporarily when the user hovers over the 3D object.
Tab Pause Mode
We wanted to encourage users to use the tab key to open object menus rather than using the spacebar. Once they press the tab key, the app goes into pause mode. This pause mode will have contextual UI to guide the user forward.
Chat History
We wanted a more permanent UI region of the screen for the users to access the chat feature. We decided to group it with the other features (view room participants and objects in room) in order to create a categorized UI region for quick access.
Learnings
Platform Agnostic is Priority
This is the first time I've worked on a social VR application and the biggest challenge was creating designs that are platform-agnostic.
Device-First Interaction Design
It made no sense to apply the same interaction to each interface. A user using a desktop computer (mouse and keyboard), mobile device (touch screen), and virtual reality HMD (controllers or hand gestures) will not have the same interaction across the board and this concept is important to note when designing interactions. We decided to focus on desktop interaction as our first plan of action in the short amount of time we had together. I would've loved to have more time with this project because it has so much potential for design growth.
