{"id":4460,"date":"2021-06-09T12:17:06","date_gmt":"2021-06-09T16:17:06","guid":{"rendered":"https:\/\/blog.mozilla.org\/ux\/?p=4460"},"modified":"2021-06-09T12:17:06","modified_gmt":"2021-06-09T16:17:06","slug":"content-design-considerations-for-the-new-firefox","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/ux\/2021\/06\/content-design-considerations-for-the-new-firefox\/","title":{"rendered":"Content design considerations for the new Firefox"},"content":{"rendered":"

How we collaborated on a major redesign to clean up debt and refresh the product.<\/h2>\n
\"Image

Introducing the redesigned Firefox browser, featuring the Alpenglow them<\/p><\/div>\n

We just launched a major redesign of the Firefox desktop browser to 240 million users. The effort was so large that we put our full content design team \u2014 all two of us \u2014 on the case. Over the course of the project, we updated nearly 1,000 strings, re-architected our menus, standardized content patterns, established new principles, and cleaned up content debt.<\/p>\n

Creating and testing language to inform visual direction<\/h2>\n

The primary goal of the redesign was to make Firefox feel modern. We needed to concretize that term to guide the design and content decisions, as well as to make the measurement of visual aesthetics more objective and actionable.<\/p>\n

To do this, we used the Microsoft Desirability Toolkit, which measures people\u2019s attitudes towards a UI with a controlled vocabulary test. Content design worked with our UX director to identify adjectives that could embody what \u201cmodern\u201d meant for our product. The UX team used those words for early visual explorations, which we then tested in a qualitative usertesting.com study.<\/p>\n

Based on the results, we had an early idea of where the designs were meeting goals and where we could make adjustments.<\/p>\n

\"Image

Sampling of qualitative feedback from the visual appeal test with word cloud and participant comments.<\/p><\/div>\n

Improving way-finding in menus<\/h2>\n

Over time, our application menu had grown unwieldy. Sub-menus proliferated like dandelions. It was difficult to scan, resulting in high cognitive load. Grouping of items were not intuitive. By re-organizing the items, prioritizing high-value actions, using clear language, and removing icons, the new menu better supports people\u2019s ability to move quickly and efficiently in the Firefox browser.<\/p>\n

To finalize the menu\u2019s information architecture, we leveraged a variety of inputs. We studied usage data, reviewed past user research, and referenced external sources like the Nielsen Norman Group for menu design best practices. We also consulted with product managers to understand the historical context of prior decisions.<\/p>\n

\"Before

The Firefox application menu, before and after the information architecture redesign.<\/p><\/div>\n

\"Image

Changes made to the Firefox application menu include removing icons, grouping like items together, and reducing the number of sub-menus.<\/p><\/div>\n

As a final step, we created principles to document the rationale behind the menu redesign so a consistent approach could be applied to other menu-related decisions across the product and platforms.<\/p>\n

\"Image

Content design developed these principles to help establish a consistent approach for other menus in the product.<\/p><\/div>\n

Streamlining high-visibility messages<\/h2>\n

Firefox surfaces a number of messages to users while they use the product. Those messages had dated visuals, inconsistent presentation, and clunky copy.<\/p>\n

We partnered with our UX and visual designers to redesign those message types using a content-first approach. By approaching the redesign this way, we better ensured the resulting components supported the message needs. Along the way, we were able to make some improvements to the existing copy and establish guidelines so future modals, infobars, and panels would be higher quality.<\/p>\n

Cleaning up paper cuts in modal dialogues<\/h2>\n

A modal sits on top of the main content of a webpage. It\u2019s a highly intrusive message that disables background content and requires user interaction. By redesigning it we made one of the most interruptive browsing moments smoother and more cohesive.
\nBefore and after images of a redesigned Firefox modal dialog. Content decisions are highlighted.
\nAnnotated example of the content decisions in a redesigned Firefox modal dialog.<\/p>\n

\"Before

Annotated example of the content decisions in a redesigned Firefox modal dialog<\/p><\/div>\n

Defining new content patterns for permissions panels<\/h2>\n

Permissions panels get triggered when you visit certain websites. For example, a website may request to send you notifications, know your location, or gain access to your camera and microphone. We addressed inconsistencies and standardized content patterns to reduce visual clutter. The redesigned panels are cleaner and more concise.
\nBefore and after images of a redesigned Firefox permissions panel. Content decisions are highlighted.<\/p>\n

\"Before

Annotated example of the content decisions in a redesigned Firefox permissions panel.<\/p><\/div>\n

Closing thoughts<\/h3>\n

This major refresh appears simple and somewhat effortless, which was the goal. A large amount of work happened behind the scenes to make that end result possible \u2014 a whole lot of auditing, iteration, communication, collaboration, and reviews. As usual, the lion\u2019s share of content design happened before we put \u2018pen to paper.\u2019<\/p>\n

Like any major renovation project, we navigated big dreams, challenging constraints, tough compromises, and a whole lot of dust. Software is never \u2018done,\u2019 but we cleared significant content weeds and co-created a future-forward design experience.<\/p>\n

As anyone who has contributed to a major redesign knows, this involved months of collaboration between our user experience team, engineers, and product managers, as well as our partners in localization, accessibility, and quality assurance. We were fortunate to work with such a smart, hard-working group.<\/p>\n

This post was originally published on Medium<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

How we collaborated on a major redesign to clean up debt and refresh the product. We just launched a major redesign of the Firefox desktop browser to 240 million users. … Read more<\/a><\/p>\n","protected":false},"author":1625,"featured_media":4462,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[440713],"tags":[52921,52922],"coauthors":[440641,52917],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/4460"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/users\/1625"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/comments?post=4460"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/4460\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media\/4462"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media?parent=4460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/categories?post=4460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/tags?post=4460"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/coauthors?post=4460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}