Mozilla Protocol

  • UI Design
  • Design Systems

Protocol is a design system for Mozilla and Firefox. It establishes a common design language, provides reusable coded components, and outlines high level guidelines for content and accessibility.

Mozilla and Firefox have an evolving family of products.

Mozilla is known for its Firefox Browser, which has been at the forefront of privacy and safety online since its inception. When I joined the company in 2018 the formation of a new Firefox brand had just been launched, and efforts were underway to simultaneously both build that brand out and launch new products.

The Protocol Design System spans two brands and a range of web and native products.

The new products and services that were going to be launched spanned both web and product, and we needed to build a system of components that would aesthetically work across all surfaces while not sacrificing brand consistency.

Our form elements needed to be identical in design and behavior across all of our products and services.

The components that make up the forms throughout the Mozilla ecosystem received special consideration due to the importance of consistency in their design, interaction, and feedback. Forms collect information — email address, passwords, credit card info, mailing address — and should be direct in its language, and succinct and fast in its feedback should an error occur.

Our brand color palette was quite robust. It needed to serve an ever growing family of products and services.

There are many different organizations within Mozilla: Brand, Marketing, Growth, Mobile, Comms, etc. Each org is comprised of various teams doing work across a range of disciplines. There are also third parties that are contracted to supplement that work and bring an outside expertise or perspective in. Much of this work is comprised of campaign landing pages, growth work like A/B and multivariate testing, and conversion rate and app store optimization. In other words, lots of opportunity for brand inconsistency to show up. At the core of this system lives a robust color palette, with certain products comprised of specific combinations.

Our brand shapes were derived from our product logos.

Beyond the color foundation, our Protocol design system includes brand-specific components that went far beyond your typical ui-based design system. We built a system of brand components that were less about specificity of use and more about flexibility in application.

Noodles used as masks for images.

Continued exploration of our design language gave way to using our noodle compositions as image masks. Most often these masks were used in the hero sections of our marketing pages to house lifestyle images or product images.

Through user testing we learned that our users paid an unusual amount of attention to our headlines — they were often witty — and we began to think of ways that we could leverage and emphasize our headlines more. Simply highlighting key words felt too heavy handed. Enter the Zap. The Zap was a dynamic graphic element — a simple stroke — that could take on any range of forms without feeling too heavy or intrusive. It quickly proved its worth. It was used throughout our marketing sites and app store visuals to tie section of the page together, draw attention to specific key words, or help emphasize features in product images.