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 teamdedicated 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 avalidation 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!