I blogged about this a bit on Download Day, but now that enough time has passed to let it all sink in I’d like to take a more in-depth look at the redesigned Mozilla.com. Not only is it the primary means we have of distributing Firefox, but it’s also many people’s first exposure to the Mozilla Project in general…in other words, lots of ground to cover!

We started the redesign process last fall when, after a fairly exhaustive search to find the right design partner, we enlisted an agency out of Chicago called the Royal Order. Our joint goal was to create a site that promoted the awesomeness of Firefox 3 while also giving newcomers a feel for what Mozilla is all about.

With that in mind, this excerpt from the creative brief sums up our general approach pretty well:
“Mozilla is a people-powered, grassroots organization built by the contributions of community members around the world. The site design absolutely needs to embody our unique, unconventional and extremely un-corporate nature…while still being professional, informative and useful, of course.”

A quick side-by-side comparison of the old and new sites shows some obvious differences (imagery, font, colors, header bar) and also some similarities (big green download button, same rough page structure):

(click here to see a bigger version)

Of course, improvements to the font and header bar alone weren’t enough to convey any of Mozilla’s intangible qualities, so we added a couple of other elements to get the point across. For example, to emphasize the fact that Mozilla products are created by a collection of individuals we gave the site a subtle handmade feel as opposed to typical Web 2.0 slickness. Note the intentional rough edges, like the chunky edges to the blue background gradient, or the way every bracket and dividing line on the site has a wobbly pencil-drawn feel rather than a more typical pixel line:

The other key addition, of course, was the illustrations. After our early-stage round of public review, our big takeaway was that the site needed a central visual theme to tie everything together. It was agreed that illustrations would be a good way to go, and the Royal Order folks brought in the Delicious Design League, whose hand-drawn aesthetic worked well with the rest of the design.

We gave them the nearly impossible direction of “draw something that represents all the good things about the Internet”…luckily for us, they decided to not run screaming for the hills at that request, and then they proceeded to totally nail it. There’s plenty of fun discussion to be had about the meaning of balloons and trees, doves and pipes or UFOs and circuits, but to me all the elements from our initial conversations are in there…a sense of connectedness, potential, whimsy and optimism. Great stuff.

With the ‘hero’ illustrations out of the way, we also asked the Delicious Design League to tackle a number of more specific concepts. I was concerned that abstract ideas like accessibility or organic software might be impossible to communicate in a single drawing, but once again they blew me away:

And that’s the story of how dancing eggs, a walking fedora and a happy yeti became part of the Mozilla universe. Huge thanks to the Royal Order and Delicious Design League for their many contributions to this lengthy and complex project. A few more thoughts on other elements of the redesign coming soon…