What’s new in Firefox Preferences

Hi! I’m Tina Hsieh, the UX designer in charge of the Firefox Preferences (or “Options” on Windows) redesign. The Preferences team is launching a few great changes in Preferences starting from Firefox 56. Exciting, right? Then you probably will be interested in knowing what we’ve done to create our brand new Preferences redesign.

As we started looking into Firefox, we noticed that our Preferences has been lacking love for a while. The user research result from project Onboarding shows that not only advanced users visit Preferences for customizing their Firefox, but also some first-time users go directly to Preferences for playing around with cool stuff. Since one of our design principles is “Adaptable”, which means we care about giving control of the entire browser experience to each of our users. Therefore, the goal of the Firefox Preferences redesign is to make our Preferences much easier for users to understand how to configure their Firefox to fulfill their specific needs.

Problem identification

The eight categories in Firefox 55

After reviewing the old information architecture (IA), we had some questions about the eight categories. Could users go directly to what they’re looking for? Would they get lost in our structure? Are the text labels straightforward enough for them to understand? Before kicking-off the redesign project, we conducted a pilot Treejack test and validated the problems.

What is Treejack?

Treejack is a questionnaire-based method for evaluating the ability to find items in a hierarchy. It helps us to discover if users can locate settings in the right categories. The test result shows that only 50% of the tasks were completed by 237 participants, which we weren’t satisfied with. Therefore, we decided to take a bold step forward with a new IA.

Research, design, and content strategy

We have a team dedicated to the redesign project: UX designers, UX researchers, and a content strategist. UX researchers work with UX designers to keep an eye on the interaction area. Together with our content strategist, we can ensure that the redesigned structure can solve the findability issue and also promote Firefox’s core values.

The three methods we used for the redesign:

  • Card sort:
    Card sorting is a well-known method for IA design that allows participants to group and put settings in an order that makes sense to them. Through this process, we can have a peek of a user’s mindset. It also helps us to see which category names are used, and not used.
  • Treejack:
    As I mentioned earlier, it’s a tool for us to address the findability issue. We used it as a pilot test to kick off the project, and also used it as a validation to see if the proposals of the different grouping methods and different text labels improved.
  • User test:
    Treejack and Card sort are both quantitative tests. With the qualitative user tests, we can see how participants navigate our high-fidelity prototype for accomplishing tasks and how many potential traps are in the proposed structures.
    Participants’ reactions are very valuable to us. Sometimes participants thought they successfully completed the task, but in fact, they failed. That helps us understand the real problems of the proposal.

Our Insights

1. Merging categories “Privacy” and “Security” helps.

Undoubtedly, “Privacy” and “Security” are strongly connected to each other, so the differentiation between them wasn’t clear. “Privacy & Security” got the highest scores in all tests.

Merge “Privacy” and “Security” into “Privacy & Security”

“It helps reduce confusion and makes me more sure about where to look for certain things.”

“I really like the privacy and security was all in one tab since they are so similar.”

Our participants were delighted with this change.

2.“General” is necessary in Preferences, but having both “General” and “Advanced” can easily confuse users.

64% of participants created the category “General” in the open card sorting test. However, when we asked participants to make some specific changes (e.g. change the way how Firefox handles email links on websites, or customize the the way Firefox does updates) in the proposed structure including both “General” and “Advanced” categories, participants struggled.

Remove the unclear “Advanced” category to eliminate the confusion

Therefore, we eliminated any confusion by sorting the original advanced settings to the dedicated categories. The failure rate of the “General only” proposal was amazingly reduced a lot in our follow-up tests.

3. Configuring what results should be shown when typing in the address bar is more considered as a privacy-related function.

There is a set of settings in Preferences which allows users to decide if they want to hide their browsing history, bookmarks, or open tabs from the search results. Should it be considered as search-related settings? Or privacy-related settings?

The Address Bar settings have relationship with both “Search” and “Privacy & Security”

From the user testing result, we noticed that the use case for these settings is more privacy-related than search related, so we keep the address bar settings under “Privacy and Security” since it is where people instinctively go.

4. A technical terminology “Sync” confuses over half of the participants.

We should always be careful with using technical terminology. From the test result, we learned that over 53% of participants couldn’t understand the label “Sync” in the pilot treejack test. Therefore, we started to propose different labels without technical terms.

Replace the label from “Sync” to “Firefox Account”

In the end, it was a gratifying result! When we replaced the category name to “Firefox Account”, 12% more participants chose the right answer compared to the previous result.

So…here comes our new IA!

One more thing

We all know that there is a thing that you have been waiting years for. And we’ve heard your voices: The search feature (finally!) has also landed in Firefox 56, Yay! :)

Another exciting thing coming! Thanks to Helen, our Preferences visual designer, Firefox Preferences is on the train of the new Photon style look. What is Photon? What does that look like? Try it out on your Firefox Beta now!




Firefox User Experience Design, Content Strategy, and Research

Recommended from Medium

Prototyping 101: Wireframes in Figma

Learn to design, sell and code, and you’ll be unstoppable.

One Question Will Change How You Approach Your Digital Product: How Often Is It Used?

A user extending his arms towards a large, dark digital display. The digital display features a variety of online content interactions, including: From $799 with a Buy button and Learn more link, a partially visible rating with four stars labelled “…on’s Choice,” one item with Add to Cart and Buy Now buttons above a Secure Transaction label, the question “Are you still watching?” with buttons Continue and Back, and a search field with the question “What is Xenu?”

Laser-Cutting: A Phone Stand

Empathize of Our Design Thinking

Design of 2 eye-catching YouTube thumbnails

Trackr- Water Intake Tracker

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tina Hsieh

Tina Hsieh

Sr. product/ UX designer @ Mozilla.

More from Medium

The Ins & Outs of Remote User Interviews

Re-think Design

Our Unmoderated Remote Usability Testing Experience

New frontiers in inclusivity: the future and youth tech