About Firefox Reality
Firefox Reality is a secure web browser designed for Virtual Reality (VR) devices. Our goal for this product was to provide a solution for the user to access immersive web experiences easily.
Mozilla launched Firefox Reality in mid-2018 for 3DoF standalone VR devices with minimal features. Due to a lack of features to compete with other VR web browsers, like Oculus, the user could not find a reason to use Firefox Reality. Mozilla enlisted our team to implement features to give more brand identity and uniqueness to their VR web browser and differentiate from competitors.
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. Our team went through multiple design exploration to ensure the user can understand each function without explanations while keeping the visual consistency.
It’s easy to think that VR is a perfect place to come up with an innovative design for existing user interfaces. However, we realized “being different” causes the user to feel confused. Through multiple 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, we added the autocomplete bar on the top of the keyboard for faster typing. We collaborated with the localization specialist and native speakers through the interview and user testing for foreign languages.
Even with a familiar layout design for the keyboard, entering text is still difficult in VR. If the device only has one controller, it was more difficult to type. To provide an easier way for the user input, we designed the voice search feature which can be activated by clicking a mic icon in the URL bar. Our team came up with animations for voice input to show the progress.
Multi-Window for Multitasking
The user should be able to multitask when using a web browser. We got a lot of feedback from our user communities for the multi-window feature. Our team explored different concepts using a tool called 'Sketchbox' to prototype our idea into 3D. 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 them 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 inside of the immersive environment. Also, the device and app performance dropped significantly as the number of the window increase.
Tabs & Cross-device Tab Synching
The tabs feature is another solution to provide a way to multitask for our users. However, as I mentioned earlier, our team discovered that not many users need unlimited windows or tabs for productivity. 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 iterative design process, 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 our project to add Firefox Reality into Firefox ecosystem. Through these works, the user can sign-in to their Firefox account which synch-up their History and Bookmarks across the different devices with the same signed in 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.
My superpower as a designer is my attitude toward the problems. Rather than focusing on the outcome or visual aspect of the product, I enjoy all the thinkings that I go through when solving the problems—for me, working on a VR product was the best opportunity to strengthen my superpower. The industry is still at a very early stage. There are very few existing UI, research, or case studies to look into when designing. This project allowed me to strengthen my superpower by teaching me how to produce the best solution through iterating and appreciating the design process that I take.
Another great lesson that I learned is that the designer never can work alone. For a company like Mozilla, which cares about privacy and security, designing a security feature meant huge for me. To ensure my design can protect the user in the immersive environment, I collaborated with the research team to conduct a usability test during the pandemic era. I also met with the developers to share my vision and get feedback in each design process step because VR was new for me as both hardware and software. By checking-in and synching with them, I developed tailored solutions in a limited time.