Alex FaaborgUser Experience Design at Mozilla

Yesterday and today there was a flurry of quick iterations on the new Firefox icon based on all of the feedback we have been receiving. Tomorrow I’ll likely have some in context shots of iteration 14 posted (similar to the images of iteration 10 in context).

The icon is being rendered by Anthony Piraino at the Iconfactory. The design has been influenced by a conceptual sketch by Jon Hicks, and a conceptual render by Stephen Horlander.

Differences between these iterations are pretty subtle, in this set we were primarily working on the globe’s continents, texture, and lighting. Across all of these iterations the globe is darker than it was in iteration 10 (something that a lot of people commented on). The Firefox head is also a bit lighter across all of these iterations.

Background Information on the Project

-Creative Brief
-Evolving a Product Brand
-Thinking about Refreshing the Firefox Icon

Here is how iteration 10 of the new Firefox icon appears in context on the XP, OS X and Vista desktops and file systems.

The icon is being rendered by Anthony Piraino at the Iconfactory. The design has been influenced by a conceptual sketch by Jon Hicks, and a conceptual render by Stephen Horlander.

XP

OS X

Vista

XP File System

Explorer – Thumbnails
Explorer – Tiles
Explorer – Icons
Explorer – Details

OS X File System

Finder, and Cover Flow

Vista File System

Explorer – Extra Large Icons
Explorer – Large Icons
Explorer – Medium Icons

…this:

…and lots of other things, especially if you are a Web developer interested in really cool integration and access (demo requires 3.5). But if you are a user, you might be thinking “spare my the ideology, what’s so great about open video aside from its level of openy openness.” Well, now video is kind of like text, or images. You can post it to your Web site, you can save it, and you can link directly to it. Forget about <embed> tags and complex bookmarklet saving scripts, thanks to HTML5 (and boriss, dolske and so many others) your dominion over information will soon be complete.

Note: this is a draft icon rendering for Firefox 3.5, subsequent iterations will be posted every 24 hours or so.

This tail is essentially a blending of iterations 8 and 9. The top of the tail features the dimensionality and highlight lines of i9′s design, and the bottom the tail softly transitions into the fox’s fur, leveraging the continuity and balance of texture found in i8′s design.

Additionally there are some small modifications to the shape of the tail, and this iteration also introduces an OS X style shadow. The OS X shadow is just for some additional context, for the release candidate icon we’ll be customizing the shadow by platform, using an upper left light source on Vista and Windows 7.

The icon is being rendered by Anthony Piraino at the Iconfactory. The design has been influenced by a conceptual sketch by Jon Hicks, and a conceptual render by Stephen Horlander.

Background Information on the Project

-Creative Brief
-Evolving a Product Brand
-Thinking about Refreshing the Firefox Icon

Note: this is a draft icon rendering for Firefox 3.5, subsequent iterations will be posted every 24 hours or so.

Today we have a double header, with iterations 8 and 9 exploring various ways to paint and light the Firefox’s tail.

The icon is being rendered by Anthony Piraino at the Iconfactory. The design has been influenced by a conceptual sketch by Jon Hicks, and a conceptual render by Stephen Horlander.

Background Information on the Project

-Creative Brief
-Evolving a Product Brand
-Thinking about Refreshing the Firefox Icon

We are now in the process of landing a few refreshed icons for the Firefox 3.5 themes. Across all 4 platforms roughly 25 of the icons are either being tweaked or are entirely new (there were some last minute feature additions, like geolocation). Here are a few highlights of things that either just landed, or are coming soon to your very own nightly build:

Windows: All Secondary Glyphs in the Main Window

On Windows (both Vista and XP) we are replacing all of the secondary glyphs in the main window (various small arrows, new tab +, etc) with a consistent etched-in appearance. These etched in glyphs also feature a glowing hit state, which varies color by platform. These glyphs, as well as all of our Windows icons, were created by the Iconfactory.

OS X: Removing Background Etch From the Keyhole

We are also considering doing this on Windows, since it lightens and simplifies the appearance of our UI. Either way, we wanted to get the change landed on OS X, since a lot of people were eager to see the etch go (including myself, as it was my misguided idea in the first place). Visual design of the OS X theme is contributed by Stephen Horlander. Our file system icons on OS X were made by Sofa.

Linux: Last Minute Plugin Icons (used in the event of plugin block-listing)



These particular icons were designed by Jakub Steiner (as a very last minute refresh, sorry about that Jakub!). The visual design of the Linux theme is contributed by the Tango team (always friendly, and occasionally featuring overnight delivery :)

As a side note for Linux, can anyone point me in the right direction for contacting the team that works on the default Gnome OS themes? Basically all of our remaining polish points on Linux (related to icons) are things that we would need to improve at the level of the OS themes, like icons not being provided at the right size, and a lack of uniformity with the visual size of some glyph icons. These are things we are eager to get figured out, but right now our teams (and our instances of bugzilla) aren’t really in contact.

Note: this is a draft icon rendering for Firefox 3.5, the next iteration will be posted on Tuesday (Monday is a holiday in the states).

This iteration features a colored and textured version of the tail, with a few modifications to the shape relative to iteration 6.

The icon is being rendered by Anthony Piraino at the Iconfactory. The design has been influenced by a conceptual sketch by Jon Hicks, and a conceptual render by Stephen Horlander.

Background Information on the Project

-Creative Brief
-Evolving a Product Brand
-Thinking about Refreshing the Firefox Icon

Note: this is a draft icon rendering for Firefox 3.5, subsequent iterations will be posted every 24 hours or so. Also note that while these drafts appear with numbers and in a chronological order, each draft experiments with a variety of different ideas as we try things out to see what they look like. It’s better not to think of these as a formal sequence, but rather a series of experimentations to explore the overall design space.

Also please note that the tail (with a current flat color) literally hasn’t been painted yet, this is a work in process as we try to define the correct shape for the tail. Once we get that figured out the tail will get detailing with texture, color and lighting.

The icon is being rendered by Anthony Piraino at the Iconfactory. The design has been influenced by a conceptual sketch by Jon Hicks, and a conceptual render by Stephen Horlander.

Background Information on the Project

-Creative Brief
-Evolving a Product Brand
-Thinking about Refreshing the Firefox Icon

Here are some answers to a particular question that came in about how refreshing a brand can be fraught with peril.

So what are people supposed to say if they actually prefer the previous one for aesthetic reasons? Newer is not automatically better. If you are going to dismiss all “I still prefer the original” as being afraid of change, you’ve tilted the playing field rather a lot.

Remember what happened to Orangina [edit: Tropicana]. Are we really going to get more people downloading or using Firefox, or will they really have better feelings towards it, because we’ve refreshed the icon? What are we actually trying to achieve here? The current version is a really nice icon. Changing it just means that some people will go “huh, it’s changed”, and other people will not like the new version. Whether that’s because they are “afraid of change” or not is irrelevant, and doesn’t stop them not liking it. You are going to find it really hard to have an unambiguous win here IMO.

To clarify, while I was saying that similarities to the previous icon were driving positive comments, the implication wasn’t that we were planning on ignoring those comments, but that we were in fact shifting the creative direction for the tail. It was a little ambiguous (since the two variables being discussed were similarity to the old design and if the tail appeared threatening) and I should have written a clearer statement.

To answer some of the other questions specifically:

what are people supposed to say if they actually prefer the previous one for aesthetic reasons?

If people have that opinion then they are absolutely encouraged to comment. We are trying to get a good read on people’s general opinions by engaging on pretty much every communications channel that the Mozilla community uses. We are also looking into running some studies on mechanical turk so that we can get feedback from a mainstream non-self selected audience.

Remember what happened to [Tropicana].

For those not familiar, PepsiCo deployed new packaging for Tropicana orange juice, and then had to reverse the change due to strong public outcry from their most loyal customers. From the public comments, it’s clear that there are some really passionate orange juice drinkers out there.

The new design was done by Arnell, the same firm that created the refreshed Pepsi logo, which for people in the Mozilla community will likely look kind of familiar. Those interested in what a million dollars in brand design literally buys you, should check out the (potentially fictitious) document Breathtaking Design Strategy.

But to answer your question: yes, I think a disaster similar to what happened to Tropicana is something we need to be really concerned about. In particular we are finding ourselves in a similar environment, where we both have extremely passionate and loyal members of our community (and users of Firefox), and people clearly have a very strong emotional connection to Firefox. I totally understand that one must wear white gloves before touching the Firefox icon. The icon has become more than just a global brand, but something that our passionate community considers sacred.

So, assuming that we don’t want to just adopt a strategy of being frozen in fear, how do we avoid a Tropicana scenario? I think the only way to make sure we are avoiding that type of situation is to make sure that we have buy in from our community and passionate Firefox fans for the changes we are considering. To that end we’ve been extremely public with posting the creative brief, design iterations, and feedback. Mozilla is in a somewhat unique position to run a completely transparent design project (as opposed to relying on things like focus groups and NDAs, even though those things are really considerably more comfortable for designers).

So far I honestly haven’t seen a massive amount of public outcry (much to my genuine surprise given the subject matter), and my impression is that people generally understand both the direction we want to take the icon, and the reasons we feel refreshing a product brand is important.

You are going to find it really hard to have an unambiguous win here IMO.

Given that I still have people really mad at me for the awesome bar, I’m getting increasingly used to what it feels like to work on deploying an ambiguous win. Personally I’m hoping we have more ambiguous wins in the future, because they are still wins, and being frozen in time really isn’t an option in an extremely competitive marketplace.

Note: this is a draft icon rendering for Firefox 3.5, subsequent iterations will be posted every 24 hours or so. Also note that while these drafts appear with numbers and in a chronological order, each draft experiments with a variety of different ideas as we try things out to see what they look like. It’s better not to think of these as a formal sequence, but rather a series of experimentations to explore the overall design space.

Also please note that the tail (with a current flat color) literally hasn’t been painted yet, this is a work in process as we try to define the correct shape for the tail. Once we get that figured out the tail will get detailing with texture, color and lighting.

The icon is being rendered by Anthony Piraino at the Iconfactory. The design has been influenced by a conceptual sketch by Jon Hicks, and a conceptual render by Stephen Horlander.

Background Information on the Project

-Creative Brief
-Evolving a Product Brand
-Thinking about Refreshing the Firefox Icon