About Firefox Reality
Firefox Reality is a secure web browser designed for Virtual Reality (VR) devices. It was launched in 2018 for 3DoF VR headsets with a mission to guide the user to access immersive content easily.
Research, Planning, Ideation, UI Design & Specification, Prototyping
VR used to be only owned by tech-savvy or early-adopters. However, the user base got more diverse as VR hardware companies launch more affordable and accessible headsets, like Oculus Go (or even Quest).
Mozilla launched Firefox Reality in 2018 to let the user consume immersive content and explore the web, but it only had very minimal features. The user was not motivated enough to download and use Firefox Reality over the default web-browser on their VR headset.
Our design team implemented numerous new features on Firefox Reality, including multi-windows, which enabled multi-tasking. New features also gave Firefox Reality a strong brand identity to compete against its competitors in the market. Mozilla was able to establish partnerships with various VR/AR headset companies.
Designing for Everyone
Our team created the provisional personas after interviewing the VR users. We didn't know who our primary user is because it was the very early stage of the WebVR, and the web-browser is for everyone who wants to explore the web to access the information or content they want.
We used these personas in the beginning of every design process to understand and empathize with the user's motivation and ultimately take the subjectivity out of our design process.
Use Case Scenario
After understanding the user needs, we developed case scenarios to get a sense of how the user will go through the flow using the product to achieve their goal.
We wrote the scenario in text first, then shared it with PM and developers to get their feedback to understand the technical feasibility from the early stage of the design process because the scenario is still very abstract.
The direction of the design becomes clear after sharing the scenario with the team. we also can get a better understanding of the technical feasibility of the initial vision. At this point, we begin to explore different design options while considering existing design and interaction patterns to keep consistency across the product.
User Flow with Wireframes
Combining both the scenario and low fidelity wireframes, we create a user flow diagram, which is our most vital source to communicate our design vision. Each level describes a single action by the user with visuals. Like mentioned before, designing for VR is still very abstract. Our goal is to visually communicate our intention and reasoning of design solutions with other team members like developers, PM, and marketers.
Prototyping in 3D
We create a prototype using 3D tools like Sketchbox and Unity, especially when exploring multiple abstract designs. Through prototyping our design vision, we can see how the user might be feeling in the immersive environment with the UIs we design. Prototyping was crucial since our goal was never to let the user feel overwhelmed or surprised in VR
Solutions for Better VR Web Browsing Experience
The tray is like a menu bar of Firefox Reality. The user can access all the main browser functionalities like Bookmarks, History, Private Browsing Mode, Tabs, Downloads, and Settings. When I first joined the team, the tray only had 2 features which were Private Browsing and Settings. During my time with Mozilla, I was able to introduce more interesting features like Bookmarks and History.
It’s easy to think that VR is a perfect place to come up with an innovative design for existing user interfaces. However, our team found out being new and different causes the user to feel confused. Through the iterations, we landed on the standard QWERTY design with commonly used symbols on the top level.
For the languages that require multiple clicks to write a single character (e.g. Chinese and Japanese), I added the autocomplete bar on the top of the keyboard for faster typing. I collaborated with localization engineers to design keyboards for the languages with complex writing systems.
Even with a familiar layout design for the keyboard, entering text is still tricky in VR. If the device only has one controller, it was more challenging to type. To provide an easier way for the user input, we designed the voice search feature, which can be activated by clicking the mic icon in the URL bar.
I used After Effects to create animations to indicate that the user input is in the process.
Even with a familiar layout design for the keyboard, entering text is still The user should be able to multitask when using a web browser. To enable the multitask availability, we explored different multi-windows design concepts using tools like Sketchbox and Blender to prototype. We discovered that our leading vision, The cylinder design, which surrounds the user with multiple windows, overwhelms the user through the design exploration.
We changed our direction from 'Allowing the user as many windows as possible like a desktop' to 'Set a limit for the better experience and performance' since we didn’t want to overwhelm the user in the immersive environment.
Tabs & Cross-device Synching
The tabs feature is another solution to provide a way to multitask for our users. Ultimately, we designed the tabs feature for Firefox’s unique brand feature ‘Send Tab to Device’, which lets the user instantly send tabs between devices without having to leave the browser.
After the iterations, we decided to incorporate the mobile browsers’ tabs design. Using the tabs window, which can be opened when clicking the tray button on the tray, the user can view, receive, and manage the tabs.
As we design the 'Send Tab to Device' feature, we began to think more strategically to add Firefox Reality into Firefox ecosystem.
The user can sign-in to their Firefox account which synch their History and Bookmarks across the different devices with the same account. Additionally, we added the 'Download' tab which allows the user to download immersive contents to their local device because most of immersive contents were pretty large in size and caused lag when the user try to consume the content through streaming.
The VR industry is still at a very early stage. There are very few existing UI and research to look into when designing. I was on the exploration to find the best solution. During the process, I sometimes learned about something I never expected like 'How the user feels about a specific element in the immersive environment compared to more traditional digital platforms?.' This project allowed me to appreciate the problem-solving process itself without attachment from the outcome, which ultimately helped me stay open to new possibilities.