Objective
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.
Result
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.
Challenges
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.
Process
I started working on this project after it was already a consumer product in the market. Because of this, I utilized a heuristic evaluation and user feedback to identify pain points.
First Time User Experience
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.
Desktop
The current product has a tiny notification for the onboarding process. We created a visual redesign for the tutorial to take up more real estate and be more visually compelling.
Mobile
With limited space on a mobile screen, we carried this overlay design to mobile and limited the number of steps needed to complete.
Virtual Reality HMD
We wanted this experience to be consistent throughout and to also be feasible for development. This meant that we would have to carry this dialog design into HMDs.
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.
Reflections & Learnings
Creating a cross-platform design system. This is the first time I've worked on a social VR application and the biggest challenge was creating designs that are platform-agnostic.
Each feature needed to be designed with interaction of the device in mind. 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.
