Objective
Mozilla wanted to extend their iconic browser into the VR space to enable VR users to access 360 videos and immersive webXR experiences.
Result
We created a VR browser that would be scalable for future 6DoF standalone devices, desktop HMDs, and AR glasses. The product enabled Mozilla to cement partnerships with various VR headset manufacturers as their native browsers.
Challenges
We needed to create a product that would excite consumers and ease the barrier of entry for webXR content, while working within the limitations of Qualcomm Snapdragon mobile processors running on Android-based operating systems with 3DoF input.
As we built the product, more robust devices with different input modalities (6DoF controllers, hand-tracking, eye gazing, AR glasses, etc) were released. We needed to plan for the evolving nature of VR and make sure that Firefox Reality would continue to be a relevant product in the market.
Process
This was a research and innovation project that quickly ramped into a product. Because this project launched in the early days of VR, there was a small pool of non-power users to gather data from. Ideation and design explorations became a vital part of our process in order to understand and materialize the concept of webXR. Our design process helped us find boundaries, explore frameworks and VR interaction patterns, and establish a baseline MVP product.
User Interface Elements
Awesome Bar
Our goal was to extend the iconic Mozilla Firefox browser's UI into the VR space. We used alpha channels in VR in order to create a 3D floating effect. Each piece of UI had to be easily readable and clickable with a controller.
Tray
The tray became a piece of UI where users can access important system functions that weren't directly related to controlling web content.
Settings Menu
A key piece in the tray was the 'Settings' menu. I created a vast information architecture map in order to create a scalable interaction system so that we could easily add more features with little work.
Keyboard
With the creation of the Awesome Bar, we wanted to create an easy way for users to type in VR. We decided to go in the direction of creating a keyboard that would be optimized for typing URL and logins.
Voice Search
We quickly learned that typing in VR is awful (especially with a 3DoF device) therefore we wanted to create an easy way for users to search. We created a voice input dialog interaction to ease this process.
Experience Architecture
As we continued to add features, we quickly learned we needed to create an app-wide interaction pattern in order to create a scalable product for future releases. Each group of UI is labeled below with their core functions.
3D Layering System
In order to add in 3D elements to this 2D UI, we created a layering system to make the user interface more digestible and to utilize the 3D space that we had. This layering system helped us with important design decisions for implementing interaction patterns and scalability for future hardware and feature implementation.
Modes
We used the concept of modes in order to allow contextual UI elements to surface. The ideation and conceptualization of these modes relied heavily on using user flow diagrams to communicate the interaction models.
360 Movie Mode
The goal of this mode was for users to be able to easily access transport controls for 360 immersive video content.
Private Browsing
Mozilla's mission is for internet privacy, therefore this was the first mode in which we worked on. We darkened the environment and changed the UI color.
Resize Mode
We created a mode with contextual UI where the user could change the browser size with presets and also customize it with drag handles.
Multiple Windows
Multiple windows posed a challenge especially when scaling for resize-able windows. We used a few tools in order to ideate and conceptualize the feature. Prototyping tools include: Blender, Sketchbox, and Unity.
Tabs
Our goal was to incorporate Firefox's iconic 'Send Tab to Device' feature from desktop to HMD. This was an integral part of Mozilla's product, therefore we designed a tab system that was a combination of desktop and mobile browsers. Users would have three windows and an overflow of tabs to interact with.
Settings
We created a master dialog that users see when they click the settings button on the tray with smaller dialogs with lists of features. Since these pieces of UI were consistently used throughout the app, we created a style library in which dialog boxes and components could be referenced.
Content Feed
We wanted to make it as easy as possible for users to find VR content on the web. This was a web design project nested within the project that utilized containers and basic web interaction styles in order to create a media feed.
Reflections & Learnings
Be a lifetime student. When I began working on Firefox Reality, I had no professional experience working with VR software. During the course of this project, I realized that there was a vast network of knowledge within the 3D sphere that I needed to understand and fully grasp in order to create the experiences that I envisioned. This meant I needed to be a lifetime student and constantly grow in my technical skills.
VR/AR/XR is awesome! This project has catapulted me into the world of mixed reality and I'm obsessed with learning more. Since we are so early in the VR development, there are no existing UI and interaction patterns and it's really exciting to be a part of the creation of these. There are so many ideas out there and we as early influencers in this world get to be hugely impactful in our decisions. I feel like a pioneer paving the way for the future and am excited to continue this journey in creating innovative software and experiences.
