Warning: Creating default object from empty value in /home/intothefuzz/intothefuzz.com/wp-content/themes/canvas/functions/admin-hooks.php on line 160

Firefox 3 Is Here, and So Is the New Mozilla.com

Any piece of software as undeniably awesome as Firefox 3 deserves a pretty great vehicle for sharing it with the world. With that in mind, we set out more than eight months ago to completely redesign Mozilla.com, and I’m happy to report that, after a few hiccups, both the new site and new software went live together this morning.

Mozilla.com homepage (Firefox 3 version)

We’ve launched a new version of the Mozilla site with every major Firefox release to meet the changing needs of the product and our growing audience, and our goals for this latest edition were pretty lofty. As Firefox has matured into a mainstream product used by more than 170 million people around the world every day, we needed a site that could communicate the many benefits of Firefox 3 to people of all levels of Web expertise. To do that, we enlisted the Royal Order of Experience Design out of Chicago to help us blow up the old Mozilla.com and start from scratch.

I’ll blog about certain areas of the site in more detail over the coming weeks, but for now here’s a quick overview:
* A completely new look & feel. I blogged about this a bit already, and will do so more soon, but for now I’ll just quote our objective from the original design brief:
“The site design absolutely needs to embody our unique, unconventional and extremely un-corporate nature…while still being professional, informative and useful, of course. It should be clean, but not boring; modern, but not tied to any short-term trend. It should be friendly and accessible enough to communicate the details of a high-tech product without feeling cold and technical. It should convey our passion for and faith in the power and potential of the web. Lastly, it should have a sense of fun and playfulness – we’re serious about what we do but we don’t take ourselves too seriously.”
* A significantly expanded section devoted to all things Firefox. The main Firefox page (aka getfirefox.com) serves up different content depending on which browser you’re using (Firefox 2, Firefox 3, IE, Safari, etc).
* A detailed Firefox 3 features page, full of screenshots, illustrations and user-friendly copy explaining all the goodness.
* A short overview video aimed at explaining the high points of Firefox 3 to new users. (warning: beware of ninjas)
* In-depth pages describing Firefox 3 security, add-ons and our concept of “100% organic software.”
* A tips & tricks page with helpful hints for Firefox users of varying levels of expertise. (As I noted a few months ago, we’re always looking for more content here, so please share your favorite secrets!)
* New in-product pages to make sure the experience between the site and the software is as seamless as possible.
* A directory of other key Mozilla sites to give people a window into our world (think of this as the Yellow Pages for potential new community members).
* An expanded Press Center, complete with b-roll video, a downloadable reviewer’s guide and other goodies.
* A “What is Mozilla?” page to communicate the various nuances of the Mozilla Project and our mission to new users.

As with any project of this scale, there are literally dozens of people who deserve a big share of the credit, but I’d like to single out a few in particular:
* The Royal Order – Tim Hogan and his team have been our partners throughout the entire process and have consistently amazed me with their ability to not only translate some of my more esoteric design requests into reality, but to deliver a final result that was always much better than my own vision. Also, although many highly skilled design agencies either lack the interest or ability to get down in the weeds and focus on the little things, the Royal Order guys spent hours pushing pixels and working with our dev and QA groups to make sure all the details were exactly right.
* Delicious Design League – we asked them to create illustrations that would not only serve as the main visual element of the site, but would also somehow represent everything we like about the internet as a whole. Kind of a big task. Not only did they succeed, but they did it in a way that makes me smile every time I see their work. Incredible creativity from these guys.
* Steven Garrity & silverorange – a site is only as good as the people building it, and Steven and his team handled every crazy curveball we threw at them (and there were many) with skill and aplomb. Longtime Mozilla collaborators, they brought their contributions to a new level this time and delivered a site that really shows off some of the best aspects of the open Web.
* Stephen Donner – by my count, there have been at least 217 bugs filed as part of the redesign, and Stephen has been on top of them all. Without his dedication, attention to detail and all-around QA expertise there’s no way this project ever would have come together.
* Pascal Chevrel and our localization community – the work these guys have done is nothing short of astounding. Despite already having their hands full with things like Download Day and Firefox 3 itself, Pascal and his team found the time to localize more than 2,800 pages and 800 screenshots for Mozilla.com and its various international varieties. Think about that for a minute!

I’d also like to give shoutouts to Alix Franquet for helping with the video, features and tips & tricks pages; Elise Allen for her copywriting on the features page; Mike Beltzner for his input on the in-product pages; Wil Clouser for his all around web dev gurudom and Paul Kim for his overall wisdom and perspective. Plus, all the beta testers who offered their comments along the way. And, apologies to all the many worthy people whose names aren’t listed here…it was a true team effort all around.

Finally, if you’ve made it through this entire epic post, go download Firefox 3 and help us set a world record!

Comments { 0 }

Celebrating 10 Years of Mozilla

This year’s 10th anniversary of Mozilla is a major milestone, and certainly one worth celebrating with some special imagery. I’m a huge fan of the original Mozilla art created by Shepard Fairey way back in 1998, so the opportunity to do something new in that style was just too good to pass up.

So, Tara Shahian and I contacted designer Lee Tom (creator of the Rock Your Firefox artwork and Spread Firefox t-shirt, among other things) and worked with him to create this:

Mozilla: 10 Years (small)

Our goal was to create a piece that retained the bold, constructivist graphic style of the original without the “happy worker” Communist imagery that understandably rubbed some in our community the wrong way.

If you’re so inclined, there’s a bigger version that’s more suitable for printing, and Tara created six different sizes of desktop wallpaper. Plans are also in the works for a t-shirt that will be tied to Mozilla Foundation donations…David Boswell will have more details on that soon.

Big thanks are due to Lee and Tara for lending their talents to this, and even bigger thanks are due to the thousands of people around the world who, for the last 10 years, have helped to make Mozilla what it is today. Happy anniversary, everyone!

Comments { 0 }

Victory

After the beta 5 release, it felt like we needed one final piece of robot artwork to really wrap up the entire Firefox 3 saga…something suitably epic and triumphant. So, in honor of today’s announcement that we have an official release date, I present to you:

Firefox Victory (small)

(Click here for a bigger version.)

When I initially pitched the idea to Nobox, my concept was something like a triptych (quadtych?) that showed all the previous beta pages. Fortunately, they had the much better idea of combining the existing art with something new and even more grandiose, in the style of the classic Drew Struzan movie posters. From there, we ran with the movie poster concept, right down to the “Rated O for Open Source” tag at the bottom.

Big thanks to Jay, Hector and everyone at Nobox for all the creativity and expertise they’ve brought to this entire process. Finally, here are a few more random notes about the robot and what happens next:

* If you’re a fan of this art, we’ll soon be adding it to the Mozilla Store as a limited edition 18×24″ poster. More details on that to come…
* For a behind-the-scenes look at the early stages of the poster, check out the initial concept sketch.
* Currently the www.firefoxvictory.com URL points to the main Firefox download page, but I have a few ideas for turning it into a more participatory robot-related site. Stay tuned!
* Lastly, here’s a Flickr set of the entire series of Firefox 3 robot art.

Comments { 0 }

The T-Shirt History of Mozilla

As anyone who’s spent much time around the Mozilla community knows, t-shirts are an incredibly important part of our culture. So, when Mary showed me a stack of classic shirts she’d collected from Mitchell, chofmann, Myk and others, I thought it would be fun to document all the Mozilla t-shirts throughout the years (with a few Netscape ones thrown in for historical context).

After some detective work, here are the 53 shirts I’ve collected so far (arranged in rough chronological order so you can see the progression):
A T-Shirt History of Mozilla (6.4.08 version)

If you want to see them up close, I’ve created a Flickr set of all the images. I’m quite sure that there are plenty of shirts I missed, so if you have one that’s not pictured here please let me know. I’d like this to be as comprehensive as possible.

This is sure to be a constantly evolving thing…I know of at least four new shirts currently in development that will have to be added soon. So, enjoy this little look back through Mozilla history and stay tuned for future updates.

Comments { 0 }

Discussing Download Day Design

By now, you’ve probably read all about Download Day, our community-powered effort to set a Guinness World Record for Firefox 3 downloads. Very cool stuff.

When Mary and I were brainstorming potential design directions for the Download Day site, we were particularly inspired by the global pledge map (for example, if you’re curious about how many people in Liechtenstein plan on helping set the record, now it’s easy to find out). That sort of friendly competition between nations led us to the Olympics, and since we’re big fans of the art deco style, we decided the design should harken back to the look of vintage Olympics in particular. Coincidentally, that theme is a nice tie-in to the Gran Paradiso artwork, which was also done as an art deco homage.

We worked with Nobox (designers of the Firefox 3 robot, Operation Firefox and the Mozilla Store, among many others) to create the site, and as always they did a great job executing (and improving) on the ideas in our original design brief. The site’s header is particularly reminiscent of that classic style we were going for:

Download Day header

Another one of my favorite Download Day design elements is the globe shown below (this is the ‘before’ version…people who participate in Download Day will see an even cooler ‘after’ version, but I don’t want to ruin that surprise). It has an art deco feel too, but also reminds me a bit of the Unisphere from the 1964 World’s Fair:

Download Day globe comparison

If you’re into this design style, I should also mention that there’s a nice series of Download Day buttons and banners you can put on your own site to help spread the word. And don’t forget to make your pledge today!

Comments { 0 }

The End of the Beginning

It’s been quite an adventure since his flying saucer-battling origin, but now that the final Firefox 3 beta has been released everyone’s favorite open source robot has retired to a comfortable and triumphant life of adoration from a grateful populace:

Firefox 3 Beta 5 first run page

As it turns out, a lot of the action has been taking place around the (fictional, of course) city of Gran Paradiso. Although it’s nice to see it rebuilt after the carnage, it does change the context a bit knowing that there’s a gleaming modern urban area right around the corner from that quaint seaside village:

Gran_Paradiso

This entire robot series has been immensely fun, and huge thanks are due to Nobox for their concepts and creativity throughout. Also, props to Mr. Mike Beltzner for figuring out how to tie it all back in to Gran Paradiso in the end.

Coming up next: a variety of robotless designs related to the Firefox 3 launch.

Comments { 0 }

Blasting Off With Firefox 3

Admittedly the Firefox 3 betas offer a bit more than just cool robot art, but I have to mention that the first run page in tonight’s Beta 4 release brings us the latest chapter in the ongoing robot saga. Now that the scene has shifted to a final battle in space, it’s all building to a big finish…stay tuned!

Firefox 3 Beta 4 first run page

Comments { 0 }

Mozilla.com Site Redesign Update

It’s been awhile since I blogged about the Mozilla.com site redesign, so it feels like time for an update on our recent progress. In order to provide some context, I’ll also take a step back and give a little background about the process and how we’ve approached this project.

First, why redesign Mozilla.com?
* To support the Firefox 3 release…we did the same for the launch of versions 1.5 and 2.0.
* To provide new and improved content about both Firefox and Mozilla.
* To make sure the site continues to evolve and improve along with our organization, our expanding userbase and the Mozilla Project as a whole.

The process so far:

* September 2007: We began soliciting internal suggestions for design agencies.
* October 2007: We sent RFPs (requests for proposals) to six agencies that seemed like good potential fits.
* November 2007: Based on their design abilities, understanding of our brand and history of working on sites with heavy community involvement, we selected the Royal Order and immediately began giving them massive amounts of background info about Mozilla.
* December 2007: The Royal Order created a detailed information architecture plan and did some initial design exploration.
* January 2008: Worked with the Royal Order to refine the design direction; they began designing the site in earnest.

Design background:
The overall design goal is that the site should embody Mozilla’s unique nature, while still being very usable, informative, etc (read more about our design objectives). Having said that, it’s also important that the design not overshadow the key content goals of driving Firefox downloads and educating people about Mozilla. Plus, the site also needs to be easily localized, highly accessible and compliant with Web standards.

After sifting through people’s reactions to the initial design explorations, Paul and I realized that, although the basic layouts were quite solid, they were still lacking a main visual element that met the above design goals. Specifically, we decided that using photography as the main element would make it too difficult to fully represent the global scope of Mozilla, so we and the Royal Order began to focus on illustration options instead.

With regard to illustration style, we wanted hand-created elements rather than slick, vector art in order to represent the fact that Mozilla software is created by a community of people around the world rather being than a faceless corporate entity. The Royal Order recommended an illustration studio called the Delicious Design League, whose style really complemented this concept, and things began to come together.

Our somewhat ambitious goal for the illustrations was that they should abstractly reflect the good things about the Web itself…things like connectivity, collaboration, creativity, etc. That’s certainly not an easy task, but the designers and illustrators have come up with several different concepts – all based around metaphors for networks – that support this really well. The final site will incorporate a few of these, one of which is shown below.

This mockup of the homepage will still receive a few more tweaks before it’s all said and done, but it’s a good sneak peak of what’s to come. As noted earlier, the illustration of the tree is meant to suggest the power and possibility of the Web, as well as the way Mozilla works. And the various handmade elements, such as the pencil-drawn lines and background shadings are all meant to evoke the grassroots, people-powered nature of Mozilla itself.

New Mozilla.com homepage

What next?
The design work is still in progress, and we’re busy creating some cool new content like a detailed Firefox features page. From there, we move on to development with our friends at silverorange (who have been closely involved in the entire process), localization (for more on this, definitely check out Pascal’s recent post on the subject) and QA – all with the goal having the site ready for the upcoming Firefox 3 launch.

There’s still lots more work to be done, and I’ll have plenty more to say about the design and the specifics of the new site later. In the meantime, thanks for reading, and stay tuned for more!

Comments { 0 }

The Robot is Back!

There are still many unsolved mysteries, but his return for the Firefox 3 Beta 3 brings a few more clues about his origins and mission. You guys had some truly excellent theories about the beta 2 page, so I’d love to hear your take on his newest adventures…please leave your thoughts in the comments section (alas, no contest this time though).

Where does he go from here? That remains to be seen…

Firefox 3, Mozilla, first run page

Once again, thanks to Nobox for the very cool illustration.

Comments { 0 }

The Robots Are Coming!

Goal: Create a first run page for the latest Firefox 3 beta that would be eye-catching enough to make people stop and explore ways they can provide feedback.

Solution: A giant robot, of course.

Your Challenge: Answer the unanswered questions…who is behind this rampaging robot? Are the UFO’s in the background working with or against it? What’s the significance of it all? Post your theories in the comments section – the best one gets a Firefox t-shirt.

Firefox 3 Beta 2 first run page

Thanks to Nobox for getting in touch with their inner sci-fi geeks and creating the very cool art for this page.

**Update**
The informal contest is now over (details here)…thanks to everyone who submitted their theories. I’ve been really blown away by all your ideas!

Comments { 0 }