Evolving the Firefox Brand

Say “Firefox” and most people think of a web browser on their laptop or phone, period. TL;DR, there’s more to the story now, and our branding needs to evolve.

With the rapid evolution of the internet, people need new tools to make the most of it. So Firefox is creating new types of browsers and a range of new apps and services with the internet as the platform. From easy screen-shotting and file sharing to innovative ways to access the internet using voice and virtual reality, these tools will help people be more efficient, safer, and in control of their time online. Firefox is where purpose meets performance.

Firefox Quantum Browser Icon

As an icon, that fast fox with a flaming tail doesn’t offer enough design tools to represent this entire product family. Recoloring that logo or dissecting the fox could only take us so far. We needed to start from a new place.

A team made up of product and brand designers at Mozilla has begun imagining a new system to embrace all of the Firefox products in the pipeline and those still in the minds of our Emerging Technologies group. Working across traditional silos, we’re designing a system that can guide people smoothly from our marketing to our in-product experiences.

Today, we’re sharing our two design system approaches to ask for your feedback.

 

How this works.

For those who recall the Open Design process we used to craft our Mozilla brand identity, our approach here will feel familiar:

  • We are not crowdsourcing the answer.
  • There’ll be no voting.
  • No one is being asked to design anything for free.

Living by our open-source values of transparency and participation, we’re reaching out to our community to learn what people think. You can make your views known by commenting on this blog post below.

Extreme caveat: Although the products and projects are real, these design systems are still a work of fiction. Icons are not final. Each individual icon will undergo several rounds of refinement, or may change entirely, between now and their respective product launches. Our focus at this point is on the system.

We’ll be using these criteria to evaluate the work:

  • Do these two systems still feel like Firefox?
  • How visually cohesive is each of them? Does each hold together?
  • Can the design logic of these systems stretch to embrace new products in the future?
  • Do these systems reinforce the speed, safety, reliability, wit, and innovation that Firefox stands for?
  • Do these systems suggest our position as a tech company that puts people over profit?

All the details.

The brand architecture for both systems is made up of four levels.

Each system leads with a new Firefox masterbrand icon — an umbrella under which our product lines will live.

The masterbrand icon will show up in our marketing, at events, in co-branding with partners, and in places like the Google Play store where our products can be found. Who knows? Someday this icon may be what people think of when they hear the word “Firefox.”

At the general-purpose browser level, we’re proposing to update our Firefox Quantum desktop icon. We continue to simplify and modernize this icon, and people who use Firefox tell us they love it. Firefox Developer Edition and Firefox Nightly are rendered as color variants of the Quantum icon.


Browsers with a singular focus, such as our Firefox Reality browser for VR applications and our privacy-driven Firefox Focus mobile browser, share a common design approach for their icons. These are meant to relate most directly to the master brand as peers to the Firefox Quantum browser icon.

Finally, the icons for new applications and services signal the unique function of each product. Color and graphic treatment unite them and connect them to the master brand. Each icon shape is one of a kind, allowing people to distinguish among choices seen side by side on a screen.

Still in the works are explorations of typography, graphic patterns, motion, naming, events, partnerships, and other elements of the system that, used together with consistency in the product, will form the total brand experience.

Read along as we refine our final system over the next few months. What we roll out will be based on the feedback we receive here, insights we’re gathering from formal user testing, and our product knowledge and design sensibilities.

With your input, we’ll have a final system that will make a Firefox product recognizable out in the world even if a fox is nowhere in sight. And we’ll deliver a consistent experience from an advertisement to a button on a web page. Thanks for joining us on this new journey.

Madhava Enros, Sr. Director, Firefox User Experience

Tim Murray, Creative Director, Mozilla

2,212 comments on “Evolving the Firefox Brand”

  1. sensi277 wrote on

    While I love the system 2 masterbrand icon and general-purpose application icons, the rest of the system 2 icons just look plain ugly to me. I prefer system 1’s singularly-focused and new apps and services icons vastly over system 2’s.

  2. Richard wrote on

    system 2 looks far nicer to me. easier to understand what the icons might represent and the masterbrand icons are inline with what people will currently recognise.

  3. Luke Stanley wrote on

    Wow please consider how close to Gitlab the system 1 masterbrand logo is. It would be a HUGE mistake to look so similar. Have you not got developers looking at it who noticed right away before posting this?
    The system 2 ones are fine. I don’t get the need to follow the same kind of vector style as Gitlab. The non masterbrand system 1 logos aren’t bad.

  4. Petr wrote on

    The main fox head logo reminds me of GitLab logo. A lot. It looks nice, but I don’t think it’s good idea to use it as logo when it is so simmilar to GitLab.

  5. Jim Silverman wrote on

    System 1 is much more cohesive, adaptable, and forward-thinking.

  6. mrzz wrote on

    definitely system 1

  7. Kim M wrote on

    I like System 2 Masterbrand logo because I immediately associate the tail with FireFox; albeit I miss the fox’s head in this logo.

    I believe System 2 icons offer more clarity to the app functions, though I prefer System 1 browser icons with the blue gradients behind the fox.

    Thanks for the opportunity to opine!

  8. Philip Kahn wrote on

    System 2 is better, with the exception of the browser icons. Port the system 1 browser icons to system 2, and it will maintain the closest identity to Firefox today.

  9. Luis Lozano wrote on

    Definitly system 1

  10. s wrote on

    The icons for new apps and services should really relate more to the actual product. I can not for the life of me figure out what kind of service any of the icons are supposed to represent except for the picture one and the one with the keyhole.

  11. Dereck G wrote on

    I Prefer System 2.

  12. Max wrote on

    I like system one browser, still keeps the “globe” there which will look better on PCs and Phones.

    The system 1 master brand reminds GitLab therefore I would go for a the system 2 master brans.

    I love system 1 desing including the master brand but again, might associate you with GitLab(which is not a bad association)…

  13. Bruno wrote on

    Hello

    I like the “general-purpose browser icons” of the system 1. Their blue background in the center of the pattern makes them more full and warm than those of the system 2.

    It’s the opposite for singularity focused icons. Blue makes those of the system 1 poorly readable. They also have a side “already seen elsewhere”. Those of System 2 are more readable and, given what is shown, more apt to express the singularity.

    The same goes for the new apps and services icons: the system 1 is pleasant to the eye “from a distance” but less decipherable, less legible. It is fuller but also less light and less clear. Even if the patterns are interesting (the keyhole in the middle of an hexagon), the range of colors that compose them make them less pleasant because less easy to decipher. The system 2 seems more promising.

    For the “firefox masterbrand icon” I like system 1. The fox head is rather well seen, the system 2 less evokes the change of logo, even if it is an interesting evolution of the existing one.

    Ultimately, the t-shirt is super classy. Where can I buy one :) ? !!

  14. Alex wrote on

    System 2 !

  15. Justin Coffman wrote on

    I’m very partial to System 1. Seems more coherent and cohesive between all elements.

  16. clerical wrote on

    I’m going to echo what others have said in here: System 2 logo with System 1 everything else. System 2 masterbrand is just going to be trouble with Gitlab.

    “Say “Firefox” and most people think of a web browser on their laptop or phone, period. TL;DR, there’s more to the story now, and our branding needs to evolve.”

    Why? I like Firefox because it is simple. I hardly use any of the ancillary services except for sync. I don’t want another Microsoft style suite of apps I don’t use, I want a good web browser. Google and Microsoft don’t have it, Mozilla does. That’s all I care about.

  17. Dany wrote on

    Creo a su logo principal solo le falta una pequeña..pero muy pequeña mueca de sonrisa al zorro, por lo demás, si quieren cambiar los iconos, me da igual. Pero estaría muy decepcionado si se cambia el icono de Firefox. Están donde están… Primero, por un gran equipo y segundo… Por un gran logo que luchó junto con todos ustedes

  18. limonkufu wrote on

    System 1 with System 2 Masterbrand logo because System 1 master logo looks a lot like GitLab’s logo.

  19. Eric wrote on

    My preference for beauty is System 1, for readability/clarity System 2. Overall, I think the beauty of 1 outweighs the benefit of 2.

  20. Jasmine wrote on

    I quite like system 2, because it still keeps the iconic fox tail icon, that we’re so used to seeing, but in a much more minimal way.

    However, being bold the System 1 icon looks really modern and out there, really different to what Firefox has, as a brand already.

    Not too keen on the other icons though, I feel the geometry isn’t as systematic and a little too over the top in system 1 and 2… the standard icons that have the fox in them are wonderful, love the different colours that are there.

  21. Parsa wrote on

    Thanks for getting feedback of us.
    I like group system 1 for browser icon and icon for new apps.
    thanks for asking your user to choosing the new icon.

  22. Panagiotis wrote on

    You guys want to redesign so you can focus on the product family but you ask an opinion on based on icon predesigns on browsers.
    Systrm 1 looks promising but not unique.
    If I where you, I would umbrella every product under the moz://a logo. Not applicable? Time to redesign the moz://a foundation logo so it can be easily identified not only from the main logo but also from the sub-products.

  23. Matthew Graybosch wrote on

    I’m really not impressed by either set of icons. What’s wrong with the icons you already have?

  24. Gall Anonim wrote on

    Overall, System 2 is better, but the Firefox Masterbrand Logo is better at System 1

  25. Georges Gabereau wrote on

    System 1 with the System 2 masterbrand icon.

  26. Jeff Chernoff wrote on

    Sys1 is more distinctive; Sys2 looks like too many other apps, and too generic.
    Sys1 bottom 6 icons need a new color added to each, or… something.

    Thanks

  27. Tomas wrote on

    System 2 is much better. First one looks too generic. Best Tomas

  28. Holly wrote on

    System two looks cleaner and easier to get

  29. Miguel wrote on

    System 1

  30. cool_max wrote on

    You can compromise and mix both sets of icons. I like both icons of the pack.
    But most of all the second. :-)

  31. علی آقا wrote on

    System1 is my preferences. it looks modern and clean.

  32. Funky Kong wrote on

    Sorry to say that this feels like rebranding for the sake of rebranding to me. The current icon still looks fantastic on my Mac, although I preferred the calmer colors of the previous version (2009/2013?).

    I don’t see why the poor fox needs to lose its planet (in system 2), the resulting hole right where users should click/tap doesn’t feel great. The famous Firefox branding should lift up the other icons, instead it’s being dragged down by them.

    I liked the way the Thunderbird icon extended the brand at the time. Mozilla had a blue internet bird before Twitter did! Good times.

  33. nicu wrote on

    The only Mozilla product I do use and care about is Firefox, the rest is unimportant. Sure, I do use Thunderbird, but that is not a Mozilla product any more, nor included within the scope of this article.
    What can I say? The master Rand of System 2 has a somewhat recognizable shape, but everything is very simplistic and not connected to the purpose of the apps and services they are supposed to represent. I can see a bunch of icons and wonder what they stand for.

  34. joe wrote on

    Group 2

  35. Juan Vallejo wrote on

    System 1 hands down.

    Stands out more, looks unique, kind of organic, malleable, which in my opinion would represent visually the continuous evolution of Firefox.

    Excellent work!

  36. Antoine Richermoz wrote on

    I really love the systeme one and really hate the number two.

  37. cyberizer01 wrote on

    System 1 have better colors, but the masterbrand icon looks like gitlab.

  38. Joel wrote on

    System 1 – singularly-focused browser icons and icons for new apps & services
    System 2 – masterbrand icon and general-purpose browser icons

  39. CJ wrote on

    I like the browser icons from group 2, but the rest of them look like some other app. There’s nothing visually toeing them together.

  40. Cedric Johnson wrote on

    I would say yes more so for System 1, System 2 reminds me of a theme change by a developer.

  41. root wrote on

    I like System 1 better.

  42. Tom W wrote on

    I find both of these approaches very intriguing. As a designer myself, I tend to see that although both Masterbrand Icons look aesthetically pleasing, they are stripping the brand of Firefox into 2. The fire and the fox… is it the best decision? I’m not sure. But I do like the look that you have put together.

    I think that Group 1 is more unique and stands out while having each icon look connected to each other. Group 2’s app and service icons look good, but to me, they could all be from different companies because they don’t seem as harmoniously designed as the other group. Could it be the color choices or the generic iconography? Not sure. But the abstract designs and consistent coloring in the first group really pop to me.

    Although I like group 1 overall, I would stick with group 2’s browser icons. I think they are more versatile and scalable.

    Overall, great job! Can’t wait to see what is the final decision.

  43. Léo P. wrote on

    I clearly prefer system 1 icons, especially for the Masterbrand Icon: the Fox head is soooo cute.
    Furthermore, I think the Singularly-Focused Icon have a better aspect on system 1.

    So I would be very happy to see system 1 icons in the next firefox releases.

  44. Shawn wrote on

    I love your browsers, but these all look horrible, to be blunt. Please stick with the current designs, they are so iconic that changing to these trendy modern styles will seriously devalue your current brand image, at least in my eyes. Thanks for taking feedback!

  45. Pablo Kapusi wrote on

    System 2 is the best! Its more fresh and more dynamic :D

  46. Pedro Bertella wrote on

    System 1 all the way.

  47. Wand wrote on

    System 1.

  48. Adam wrote on

    If you go with either of these two, please use System 2 .. or it’s going to kill your firefxox brand identity. The swirl is recognizable as Firefox. The fox head is not something people would recognize.

  49. wm. lee wrote on

    System 2 has a better feel, but the master logo needs a stronger attachment to firefox

  50. Kaless wrote on

    I’m disapointed by the singular-purposed browser icone for both cases. I think the color should change more compare to the classic browser, to accentuate that this product is different.
    Currently I really like the white/purple mix of the current logo of firefox-focus, and would like to see this mix of color in the new logo.

    No vote, but I’m still team 2 as it feels more familiar

More comments: 1 17 18 19 20 21 41