Changing your brand and updating the look and feel of your website can be a harrowing experience. It is a process that is often fraught with pitfalls and challenges, not the least of which is considering how your clients, customers and stakeholders will take the change.

In an age filled with corporations increasingly utilizing spec work, crowdsourcing and internet votes to make design decisions, Mozilla is going with a novel approach to a public rebrand. To deal with this project, they’ve created two competing design systems and are asking for feedback from the web.

Before we get to that, let’s look at how Firefox has changed their brand over time. The original Firefox logo was born out of a partnership between Daniel Burka, Stephen Desroches and Jon Hicks. Over the years the Firefox brand has shifted, starting with a beautiful but complex illustration and slowly becoming more and more simplified.

As the web evolves, Mozilla needs to evolve as well, providing more apps and services to meet what users expect and need. Obviously, the design system they use needs to have an overall unified feel to it and they feel that at this point, the Firefox brand doesn’t “offer enough design tools to represent this entire product family.” (1) The changes that Mozilla made to their Firefox brand were incremental and safe as we can see above.

For this rebrand, Mozilla is making a bolder move by following what they call the “Open Design” process. They describe this process as following these phases:

  • “Ideation Here we’ll explore different directions we might explore based on the strategy, positioning, and personality of the Mozilla brand. In this initial phase, we’re wide open to ideas from all corners.
  • Concepting Next, we’ll take a handful of concepts through design based on what we’ve learned from gathering and vetting different ideas. We’ll post work as we go and invite designers and non-designers alike to tell us what they think. This phase will result in a handful of first-round concepts.
  • Refinement Here’s where we pressure test our concepts to determine which ones will work best in a variety of situations, from our own web properties and Mozilla communities to external ad campaigns. At the end of this phase, we will have our final selection.
  • Guidance From here, we’ll build launch materials, create style guides, and finalize a campaign to reintroduce our brand to the world. In the best-case scenario, we’ll have a flexible system that can be applied globally to any number of communities, Mozilla teams, and case studies.” (2)

What all of this boils down to is, Mozilla has put out these design systems which they are calling “complete works of fiction” to gather feedback from people both inside and outside of the design community. What’s so novel about this is the fact that Mozilla is being incredibly transparent about their design process and looking for as many different perspectives as possible to get valuable feedback without bending to the will of the crowd. I’m happy to see this level of transparency.

This is something that we here at UDig strive to implement with our clients. Developing solid concepts and identities that resonate not just with you, but externally as well with your customers. This sort of an open process helps to build a sense of ownership with your customers that drives brand loyalty.

Here are the two designs they have proposed:

Like a large majority of the comments in Mozilla’s article on this new design, most of the people polled at UDig chose System 2.

System 1 feels too restrained in its color palette and is far too abstract/vague to really get across what these icons represent. System 2, on the other hand, keeps the spirit of the original Firefox brand while expanding the color palette and having coherent sub-brand icons.

In the end, we’ll most likely end up with something that is far tamer and closer to the original Firefox brand but it’s still nice to see a company push the envelope and open up about how their design process works.
Derek Heilmann

1- https://blog.mozilla.org/opendesign/evolving-the-firefox-brand/
2- https://blog.mozilla.org/opendesign/about/

You May Also Like These Topics