Firefox Preferences

A research and redesign project for the Preferences in Mozilla Firefox that highly improved the usability of the original version.

Project Background

Improve the UX in Firefox Preferences

Mozilla Firefox is an open source browser launched in 2004. Since it’s developed by an open collaboration model, functions are developed by distributed employees and contributors. UIs can easily be disorganized if there’s no designers constantly involved in the developing process.

In 2017, Firefox UX team reviewed the entire Firefox and found that the Preferences page needed more UX enhancements. Therefore, I was assigned to lead a team to work on the Firefox Preferences redesign project.

The Challenges


Design with Legacy

There were three challenges when designing with legacy:

Built by mixed code languages
From the initial study, I found out that the Preferences page was implemented by mixing new and old code languages like HTML and XUL (XML User Interface Language). To avoid tapping into the ancient code at the beginning, we decided to first reorganize the options and make it straightforward for general users to find and understand.

Inconsistent interactions and UI elements
Since there were no UX designers involved in the developing process for years, the UI ha lots of inconsistencies. Reducing the inconsistencies and standardizing the UX patterns in the Photon Design System was one of the following design goals.‍

Hard for old users to adapt big UI changes
Not every user likes changes, especially for old Firefox users. Therefore, we were very mindful about every single change. Rounds of user researches were performed to make sure that the UI changes really improved the UX when compared to the original version.


Distributed Engineering Resources

At the beginning, there were no dedicated PMs and developers working on this project. To push the progress further, I spent some time finding engineering resources before kicking off the development process.

The key was to pitch to stakeholders and engineers that Preferences was worth investing engineering resources on, and to visualize how well the redesign proposal improved the UX.


Cross-team Collaboration

Since Firefox is a product that has been around for years, it requires a long learning process for understanding the history, constraints, stakeholders and how every option works before getting started.

Collaboration across different time zones
There are experienced designers from different offices who have been working on projects that are connected to Firefox Preferences. In order to collect information to get started, I hosted a weekly meeting with those designers and created a slack channel that kept decisions posted publicly so that the design progress could be transparent.

A last-minute surprise
In the later stage of the implementation, there were some fresh-eyed feedback that popped out from the content team. Although it wasn’t expected while the product launch was around the corner, we quickly integrated the feedback into a newer version, and performed an extra user testing before launching.

The Design Team

The team consisted of 2 core members and 3 support members
participating in the entire process.

1 Product designer +
2 UX mentors (support)
1 Visual Designer
1 User Researcher

My role

What I Did as a Product Designer

Early stage product management work like defining the product roadmap, doing cross-team communications, pitching the research findings & design proposals, and finding engineering resources.

Conduct user researches, analyze the testing results, and deliver consolidated research reports.

Make interactive prototypes and deliver UX specs.

Write a blog to share the research findings publicly.

The Project Goal

Make Preferences much easier that even general users can understand how to configure Firefox to fulfill their specific needs.

The research results from the project On-boarding shows that not only advanced users visit Preferences to customize Firefox, but also some first-time users go directly to Preferences to play around with cool stuff.

process overview

The Research & Design Process

Phase #1

Redesign the
Information Architecture

The design Goal

Make the IA Clearer

When we first looked into the original Preferences, it had 8 categories which included some indirect terms like “General” and “Advanced”, and the most misunderstand-able category “Content” which allowed users to set how Firefox handled notifications and pop-ups.

The original IA was definitely needed to be improved, and we believed that user research can help on making good decisions.

Research Methods

Treejack & Card Sorting

Treejack & Card Sorting are the two methods in this design phase for making sure the proposed IA and the category copy was easy for general users to understand.


Treejack is a questionnaire-based method to evaluate the ability to find items in a hierarchy. It helps us to discover if users can locate functions in the right categories.

6 treejack tests were sent and each test had around 200 valid replies.

Card sorting

Card sorting is a method that allows users to group and put items in an order that makes sense to them. It also helps us to see which category names are used, and not used.

There were 38 valid replies from 45 card sorting results.

The Results

Generated the Most Successful Version from Rounds of Iterations

The Original Version v.s. The Merged Version

Phase #2

UI,UX Enhancements &

The design Goals


Reduce Inconsistencies

The inconsistent UI elements and interactions can easily confuse users. On the product development side, it also slows down the development efficiency for new features.

By starting from a visual audit, we made an inventory for all inconsistencies and attached a UX/ UI suggestion for each item which was documented in the Photon Design System.

The Original Version

UX/UI suggestions

Moving the options of “manage your Do Not Track settings” out of the pop-up window since:

  1. Opening a pop-up window isn’t an expected interaction of a hyperlink
  2. The Do Not Track option can be exposed in the content page as it isn’t considered as an advanced setting.

The Original Version

UX/UI suggestions

  1. To visually distinguish the single-choice and multi-choice options, we slightly replace the table by the radio buttons.
  2. Increase the visual hierarchy by moving the descriptions from the title.


Simplify Options

There are some options separated in different sections but are actually adjusting the same UI element in Firefox. Setting search engines is one of the examples. I proposed some wireframes that regroups or merges the related options to make them shorter and more user-friendly.

The Original Version

The UX redesign proposal

Merging the default search engines and one-click search engine settings into the same table and move the “remove button” and “make default” to the hover state so that it can easily map the settings to the selected search engine.

User test

2 Goals for Testing the Usability

The user test focused on comparing the UX redesign proposal with the original version to validate if the usability was enhanced successfully.


Test the usability of the significant changes in the UX redesign proposal


Test the idea of folding advanced options in a “Show more” hyperlink.

The prototype was tested on the remote testing tool “” with 10 participants.

The Results


A Huge Enhancement on Usability

The merged section and the label "Search Engines" works for participants, and most of them liked the new IA (especially the idea of integrating Privacy and Security since it’s hard to tell the difference).


Negative Feedback on Folding Advanced Options.

Some of the participants spent a long time looking for the advanced options since they didn’t notice the “Show more” at first. Therefore, we didn’t apply the idea of folding advanced options.

Visual Refresh

Create a Visual Style that Aligned with the New Photon Design System

The Original Visual Style v.s. The Photon Visual Style

*The UI was designed by our visual designer

Phase #3

Post Redesign Optimization

The design Goal

Be More Supportive

The UX of the Preferences has been improved through a series of user research and UI/UX redesign, but that was not the end of the story.

The team planned to be more supportive for both internal & external audiences in the post redesign stage so that the UX can be more sustainable in the long run.

For Internal - Designers & Developers

Publish a Category Guideline for Internal Use

The options in Preferences changed constantly because new features usually come with a set of options for users to customize. For keeping it neat, I consolidated a category guideline which includes the rationale of the new IA and some good/ bad examples.

The guideline includes good and bad examples for each category.

For External - users

Add New Features: Search & Spotlight

During the Preferences redesign process, the team constantly collected some input from public channels. It’s another practical way to get inspiration.



Search is the most direct way to find options. The fundamental engineering work had been done years before the redesign project kicked off, so the function was totally feasible by simply filtering options.

We designed a search bar sticking on top of the page, and some highlights to indicate the matched keywords.



We added another feature called “Spotlight” to indicate a specific option when a user is guided from anywhere in Firefox. For example, website permission settings and on-boarding experience are using Spotlight.

An example of the form autofill settings.
A highlight will appear in the background that indicates the option(s).


Outcome & Learning

The Outcome

Successfully shipped with Firefox Quantum in Nov 2017

The redesign was eventually implemented in Firefox and shipped with Firefox Quantum, which was the biggest user interface update since version 1.0.

The new Preferences received positive reviews from the blog that I shared about the research and design process. It went viral on social media, and has been viewed by 12K+ readers which still constantly has new visitors presently.  

I wish all free software projects had a UX team like Firefox has.
— Retweet comment
Pretty impressive. Very well done. Hats off.
— Comment on Medium

The Learning

Find the right people and tell good stories

The project was almost suspended because it was stuck at allocating engineering resources. The visual designer and I made some posters that briefly told the story about the project's goals, research results and the design proposal, and brought them to the open house session at Mozilla’s all-hands meeting.

By constantly reaching out to engineers and sharing our design stories in person, we ended up finding an engineer in the organization who had experience working on Preferences and keen to work on the first phase of the redesign proposal. That very first phase kept the ball rolling in the implementation progress.

Sharing our design story with posters on wall during Mozilla's all hands meeting.