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.
User Research, User Flow, Wireframing, Visual Design, Interaction Design, Usability Testing
How can I let the user consume immersive content without worrying about lag and long loading time?
I designed the download page, which allows the user to open and manage the downloaded files from the web.
This feature enabled the ability to consume the immersive content without worrying about the network condition. With this feature, The user doesn't have to exit the application nor take off their HMD (Head-mounted Display) and connect it to a PC to access the downloaded files.
The user uses VR web browsers to consume immersive content on the web. Depending on the network connection quality, they experience lag and drop in the quality of content since immersive content's loading time is longer than the traditional content.
My initial hypothesis for the best solution was to encourage the user to download the content file from the web to the user's HMD (head-mounted display). However, the existing download experience was not ideal because the user had to take off their HMD and connect it to a PC to sideload the HMD's download directory.
To understand the user needs and pain points before diving into what would bring value to them, I conducted user interviews with our primary user which was defined before this project.
I conducted these interviews in a casual conversation format, primarily focusing on how their experience using their HMD devices to consume immersive content and what prevents from them to have immersive experience. I used VR communities like VR Chat, Discord, and Reddit to recruit and meet with the diverse pool of VR users to expand my perspective.
The key findings includes:
- Low-quality content disrupts the immersive experience
- The user gets annoyed when the VR content get paused to load
- The users without tech background are not familiar with the HMD sideload feature
- Many users could not locate the files they downloaded from the web
We developed Kasra's persona with data from the user interview.
Since Firefox Reality is a web browser for every VR user, we didn't want to exclude anyone by only focusing on a specific user group. Developing this persona was to take the subjectivity out of the design process and focus on solving the problems that VR users commonly experience.
Design Direction: In-app Download Page
Based on the user interview findings, I decided to stick to my initial solution, which was to encourage the user to download the immersive content directly to their HMD.
I decided to design an in-app download page since other Firefox brand products, like iOS and macOS, already had this feature. I wanted to provide a consistent experience for the brand's loyal users and provide a way to easily access and manage the downloaded files without leaving the Firefox Reality app for the user who never used the Firefox product before.
Use Case Scenario
To get a sense of how the user will go through the flow using this feature to achieve their goal, I developed a use case scenario. Any questions that emerged during the brainstorming session were shared with other team members to get more insights into the feasibility and business needs.
It was essential to get inputs from PM and developers because the design vision was still very abstract at this stage.
With the feedback from team members, the design direction became more clear. So, I began to explore different layouts while considering the existing design and interaction patterns to keep consistency across the product.
Combining both the scenario and wireframes, I created a user flow diagram, which is the most vital source to communicate the design vision with the whole team. The goal this was to visually communicate the intention and reasoning of design solutions with other team members like developers and PM.
Testing & Iterations
I originally wanted to show the preview and progress of the downloading files. Yet, my team found a technical limitation in displaying both elements when sharing the initial design vision.
I then pivoted to use the text-only layout, the same layout as Bookmarks and History pages. At this point, the team discussed if we wanted to separate the external (manually put to HMD by the user) and internal (downloaded to HMD from the web) files. However, I discovered that the user got confused about the term "External" and "Internal" when they first saw them during user testing.
My team also didn't want to create separate directories that could encourage the user to use the external file input because it was the user's pain points at first, which was to sideload their HMD.
Lastly, we added the "Clear All" feature to manage the files easily based on the user feedback that we received during the usability test.
After going through iterations, I settled on the minimum design that shares a similar content layout with other library pages, Bookmarks, and History.
I created a specification document for the download page and companion user interfaces and handed it over to the development team. Firefox Reality version 10 update included this feature.
Designing for VR is an abstract work because the industry is still very young. That's why communicating with other team members, especially developers and PMs, is essential to validate the solution. I was able to identify technical limitations early in the design process by sharing my design process with the developers. PM helped me to focus on solving the user's pain points while meeting business requirements. This project was another project that reminded me of the importance of teamwork.