Bryant Mao

Firefox

Streamlining Web Content Handling

UX/UI, Desktop, Web

Web files and protocol have played an essential role in our online activities, but the mundane interaction is usually overlooked. As a web advocator, Firefox wants to optimize its handling process to promote web standards and empowers users to make the most of the web content.

Challenge

The Firefox browser is known for its flexibility, openness, and security. But the design legacy has stumbled it to catch up with the rapid changes of the internet over the years. Following the sentiment of ‘fixing old bugs before introducing a new one.', The product team looks into one of the universal interactions - file links and web protocols, as they impact how the browser handles web content in our everyday online activities. It is believed that once improved, will bring a better experience and productivity for its users.

My Role

I worked with another UX designer from ideation all the way to implementation. I focused on identifying user type and validating the design.

The content handling workflow is an essential yet often neglected experience

Approach

Constant trade-offs between different user types

We kick off the design by understanding how people interact with online content and web links. We study their journey and compare the behaviors with other mainstream browsers.

Throughout the process, we constantly discuss different use cases with developers, learning about each design legacy's security consideration. We propose various content handling workflows, iterating them through constant trade-offs between the needs of power users and average users, and distribute the prototypes to test with 800+ Firefox users.

The valuable insight helps the team recalibrate the design, laying out shipping plans that minimize the impact while maximizing the new design's value.

Research

Understand the current handling workflow

To clarify the design scope, we examine the current workflow of file links and protocol Firefox, mapped out the user journey to show the pain points and emotion. We then compare the user journey with other mainstream browsers (Chrome, Opera, Safari, IE, Edge). The result revealed three insights for the team to dive further.

Streamline the content handling process for average user.

Enhance the flexibility to make advance user more powerful.

Making file and protocols controls more accessible.

Design

Balancing the needs of power users and average users

We set out to bring the best content handling experience we can get for today’s Firefox users. The new experience should feel streamlined enough while preserving the flexibility that Firefox has. So we devoted a lot of effort to balance the needs of power users and average users. We carefully review the current design, remove things that are not as relevant as they should be, and add the new ones that we think are meaningful.

Design

Dealing with tricky user case and advanced needs

While the proposal went well through the design critic and internal test, some developers raised strong concerns. They think by removing the download modal from the handling process might increase the security risks and ignore the needs of advanced users. Some plausible scenarios like download bombs or malware help us iterate our proposal to make the design more robust while minimizing the impact of transition on power users.

Testing

Beta test to validate the design assumptions

To shine more lights on the power users’ needs, we send out a survey on Firefox Nightly, where most users are developers or savvy firefox users. We particularly focus on the user’s expectation on how the download modal should behave when interacting with a file link or protocols.

The result out of 877 responses reveals surprising findings - 65.2% of the users want to be asked where to save the file when clicked the download link, while only 5.8% want to choose an application to open it. The insights inform us to simplify the download panel instead of removing it altogether and keep the options open in the preference for the power users.

Outcome

The design was shipped to Firefox 55 in 2016. While the interface gets constantly updated, especially after the release of Firefox Quantum, the core design considerations still exist today that shape Firefox’s 250 million users' content handling experience.

Final design

The final design is a streamlined content handling workflow, which follows the motto ‘making the default easy and advanced powerful.’ It touches on many touchpoints along the handling journey, removing unnecessary design legacy to allow average users to reach the content fast while providing usable options for power users to customize based on their preference. We also simplified the browser controls on weblinks behaviors, adding tips to help web newbies learn the file links and protocols the matter to them.

  • 01. Optimize for speed
  • 02. Minimize distraction
  • 03. Make controls accessible

01

Optimize for speed

Fast for average users

Firefox is the only browser that prompts users to review the handling options before a download. It drags the speed and breaks the workflow, especially for cases involving multiple downloads. So we remove the modal from the workflow and distribute the valuable options in relevant touchpoints, like preference or download panel.

Flexible for power users

Power users have advanced needs around downloads. For example, they might use different applications to open the same file or protocol links based on the content source. So we leave these options open in the preference, which they can always adjust the defaults based on their needs.

02

Minimizing distractions

Surfacing the essentials

Firefox has more information and options on its download panel than its competitors. The visual overload does little to help users manage their downloads. We simplified the panel by surfacing the essential information so user can focus on the current download task.

Click for more

We leave additional information and options in the hover state and context menu. User can easily click to check it when they need it.

03

Make controls accessible

Make it visible

For the average users, the application panel is a hidden feature in the preference that allows the user to controls the browser’s behavior around file or protocol links. To make it more visible, we design a contextual prompt to advocate the feature and provide a deep link for the users to learn the full function in the preference.

Make it understandable

The current application panel mixed all kinds of link types with many confusing options and acronyms. To make it more accessible, we break the panel into two - file links and protocols, eliminating redundant options, and simplified the copy for people to understand.

Reflection

Even with limited resources, quick user research can highlights the major problem before any design work begins.

Study the rationale of the design legacy can reveal hidden yet important limitations and context.

To deal with various user types, focus on primary users' needs first, and work around others' needs later.

Similar case studies

Rethinking Personal Web Library