Calling All Designers, Doodlers and Other Creative Types

The term ‘community’ gets thrown around a lot at Mozilla, and with good reason: the community really is Mozilla. Without it we never would have built a browser that went from zero to 20% worldwide marketshare in just four years, we never would have served up one billion add-on downloads and we never would have set a world record with the Firefox 3 launch (among many other accomplishments).

So, following the successful examples of our developers, localizers, marketers, QA testers, etc we’re going to be making a major push to organize and grow our visual design community. I’ll share more details soon – including our plans to create a new site for posting and sharing your artwork – but if you’re curious to learn more the first thing to do is sign up for our new design mailing list.

Of course, there already is a Mozilla design community – just look at the 3,500+ people who participated in our Firefox 3 t-shirt contest or Google around for Firefox art – but there’s so much more that can be done. This is an entirely new way we can put our greatest advantage to good use, and we should get a lot of cool stuff to look at, too. The possibilities are incredibly exciting.

In the meantime, here’s that mailing list link again (we promise not to spam you!). More to come…

Back to the fuzz

0

Mozilla Goes Green

A bunch of Mozillians are up in San Francisco today as part of our involvement with the SF Green Festival. It’s certainly a new type of conference for us, but when you look at the core values of the various other affiliated organizations there are a lot of commonalities in terms of trying to affect change through community building and grassroots action.

We’re also using this as a platform to communicate our “100% organic software” concept, so from a design perspective this gave us a great opportunity to use one of my favorite elements from the Mozilla.com redesign: our little family of egg illustrations. They’re so bizarre and yet, so perfect.

We worked with designers Monique Johnson and Rhonda Spencer to create egg-based collateral that included a print ad for the festival guide (below), landing pageaffiliate buttons (available for download) and more.

There will be Mozilla-related activity at the festival all weekend long, so if you’re in the area definitely stop by and check it out. Mary has a good overview of the details up at her blog.

Mozilla Goes Green

Back to the fuzz

0

The Return of the Robot

When we last saw the Firefox 3 robot, he was triumphantly proclaiming victory in honor of the record-setting release last June.

Since then, of course, the Mozilla development community has been hard at work modifying and improving Firefox 3 to get it ready for the upcoming 3.1 launch. So, in that same spirit we sent the robot back to the shop for some upgrades, too.

The idea behind the upgrades was to give the robot a look that would be appropriate for the Shiretoko release, so we enlisted the help of talented mecha illustrator and colorist Josh Burcham. As you can see from this screenshot of the Firefox 3.1 beta 1 first run page, the robot is still lurking in the shadows, but don’t worry…more will be revealed soon.

The Return of the Robot

Back to the fuzz

0

Did You Survive the Summit?

It’s been well-documented that this year’s Mozilla Summit was a fairly eventful week, what with a highway-blocking rock slide, bear sightings and a half-day power outage on top of the talks, sessions, ping pong games, dinners, etc.

At the suggestion of Deb Richardson, we decided to immortalize the various dramas by turning them into a laptop sticker. Tim Hogan from the Royal Order was there to experience it all firsthandand was kind enough to translate the excitement into the artwork below (based, of course, on the original design by Nobox).

So, if you did indeed survive the Summit you should be getting one of these in the mail sometime in the next few weeks:

Did You Survive the Summit?

Back to the fuzz

0

Chatting With Tim Hogan About Mozilla.com Design

After my recent post about the Mozilla.com redesign, I figured it was time to go straight to the source. So, I chatted up the co-founder and creative director of the Royal Order, Tim Hogan, to get his take on the whole crazy process. (Incidentally, Tim was at the Summit, so if you were there you might recognize this guy)

Our conversation was held over IM a few weeks before the Summit. For Tim’s thoughts on designing in the open, differentiating Mozilla from the other guys and why he likes those dancing egg illustrations, read on:

First, a little background: tell us a bit about yourself and how you came to be involved with Mozilla.

The Royal Order is a Chicago-based design boutique that was started in 2001 in the wake of the dot com bust. The core members of the team have been working together since the mid-nineties, and have been involved with design for the web literally since the beginning. We have always looked at design and marketing as a way to tell a good story, regardless of the medium, and we’ve been lucky enough to work with people and brands who think our approach matches their needs.

Through a somewhat convoluted chain of people and companies in the new media space, Mozilla first contacted us to bid on the Mozilla Store site redesign back in late 2006. If memory serves, I think it may have been someone at a former employer of yours…? [ed. note: Lisa Gansky. She rules.]Although disappointed that the project ended up going to another agency, we really liked what Mozilla stood for and felt we struck a connection with yourself and Paul. Toward the end of 2007 we were thrilled to receive the RFP for the Mozilla site redesign, and after several conversations were selected for the project.

It’s kind of hard to believe, but we’ve been working on this project together for about eight months now. Looking back, what were your expectations when we started and how did they compare to the actual process?

We have been doing this long enough to realize that the end product is often very different than the one imagined at the project onset. This is why we have tried to create a process and methodology that is flexible. While there are components we refuse to compromise, there is no exact recipe that will work for every project. Given the relative complexity of many of the full-scale web development projects we work on, 6-12 month timelines are not uncommon.

The initial outline included ‘light architecture and an updated look and feel’. This became a bit like a loose thread on a sweater, and before long many of the pages considered out of scope found their way in. I think it worked out well, because we maintained good communication regarding potential impact, and could make informed decisions.

Another area that presented potential difficulties was working remotely between ourselves in Chicago, Mozilla in Mountain View, and silverorange in Canada. This quickly proved a non-issue however, and Steven and the silverorange team have been absolutely awesome to work with. It’s great when like-minded people with a common goal come together and push in the same direction — there is no ego in it, everyone just wants the best result and is willing to do what it takes to achieve it. That may sound new-age, but when you spend this amount of time on a project, it’s a lot more pleasant with good chemistry.

In a broad sense, what was your approach to designing the site?

Actually it was essentially the same approach we take for every project: 1.) identify the core user groups, and establish a smart, streamlined method of helping them complete their goals, and 2.) execute in a way that is appropriate (but evolves) the brand(s).

One of the big reasons we chose TRO for this project was the fact that you guys really seemed to ‘get’ what were looking for in terms of how to present the Mozilla and Firefox brands. I’d like to read you a few lines from the initial creative brief, and would love to hear how you interpreted them and what your approach was to bring them to life in the final design:
a) The site design absolutely needs to embody our unique, unconventional and extremely un-corporate nature…while still being professional, informative and useful, of course.

I don’t know how many times I read this line over the course of the project, but it was a lot. This paradox was not unlike the one we were presented with in the Patagonia site redesign, in which self-proclaimed luddites wanted to embrace the latest web technology. We decided whatever anti-establishment messaging we chose to incorporate for Mozilla had to be based in an absolutely solid, logical foundation of site architecture. This would be the default when making decisions.

b) The site design 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.

As you know, this took us down several avenues before settling into a solution everyone felt good about. In some cases we pushed too far with our desire to leverage the wealth of content and imagery being generated by the Mozilla community. It was one of the first ideas that came to me, so I really pushed for it. Ultimately I had to accept that while the community was certainly a huge part of the company DNA, the elemental components of the brand had to be established and maintained by the organization.

c) 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.

This seemed to us to be absolutely critical in differentiating Mozilla from IE and Safari, and had to be communicated through site copy first and foremost. It’s at once self-effacing and confident — more paradoxes. Luckily, you and your team were already writing this content without realizing just how perfect it was. We tried editing it and making it more pithy, but wound up back where you had started.

I’d guess that one of the more unusual aspects of working with Mozilla is that we insisted on making this process as open as possible, such as sharing your earliest design comps with the general public. What was that experience like for you? How do you think it affected the end result?

I have to admit that this made me cringe when I first heard it. Despite couching all of our work in specific rationale and as solutions to business challenges, we are human beings and like it or not, vulnerable to criticism. I had never opened up the process to this large of an audience, and wasn’t sure what to expect. I was encouraged that you and Paul were completely aware of this and took the role of design advocate to heart, while allowing the community to speak candidly through your blogs.

Obviously some of the feedback was more constructive than other, but overall, people that took the time to respond appreciated that Mozilla was truly putting their money where their mouth is. I think this trust strengthened the company’s relationship to its constituents, and wouldn’t have changed it.

What’s the TRO creative process like? What was the team you had working on the site like?

Our process follows a fairly well established sequence of Define, Design, Develop and Deploy. With myself as creative director and Stephanie Bankhead as project manager, we maintained the account relationship and have stayed engaged since kickoff. Tasha Luksa executed a formal site audit and competitive analysis during the Define Phase before establishing the ultimate site architecture. This was no small task given the number of discreet web properties and sometimes inconsistent navigation schemes.

Next the design team of Phil Machalski, Jes Foster and Krista Seidl went to work on the look and feel of the interface. This really became the bulk of our work, and as I mentioned before, proved to be elusive before reaching the final solution. During Develop, we worked closely with Steven and his team at Silver Orange when handing off files for production, and Phil’s tenacity and attention to detail are what will ultimately make the site experience seamless. As the new site is deployed, we are creating a style guide and build files so the Mozilla team is able to make regular site updates without compromising the integrity of the system.

Worth mentioning, on a parallel path, the work Jason Meyer did on the Firefox3 product demonstration contributed to the evolution of the brand that I mentioned earlier.

Obviously the illustrations are one of the most central elements of the site…how did you come to work with the Delicious Design League on this?

We are all music fans, and the independent scene in Chicago is one of the best in the country. We were familiar with Billy’s concert posters, and think it’s some of the most clever, smart, memorable work out there. I had never worked on a project with DDL, but when we met it was yet another instance where the gears clicked into place — they just got it.

Some of the home page concepts actually came out of ideas from that first hour-long meeting. I tried to keep the creative direction as high-level as possible, because I was really interested in letting him approach this like a concert poster — where the visual tie-ins are not always immediately apparent, but slowly become clear as you make associations. To me this perfectly emulated one of the pillars of the Mozilla brand: the more time you spend with the organization and the products, the more you appreciate their value.

When it came time to do the illustrations, I think our direction to you was something like “they should represent the power and potential of the Internet, yet in an abstract way”. How did you take that impossibly vague task and make something tangible out of it?

To understand the cockeyed optimism that makes Mozilla so great, one has to look beyond the framework, and see its potential. This is a tangible concept, but let’s face it, it’s hard to set out on a photo shoot to capture something that will communicate the infinite potential of the web. Stock photography was loaded with visual clichés, and the community-generated Flickr imagery that I originally thought could provide us with all the assets we could ever want proved to be far too specific.

We decided to embrace the abstractness of the message, and make up our own versions of this theme. In this way, a network of plumbing pipes may in fact house a cluster of doves. The hole in a tree trunk becomes the node in a system of branches that release hot air balloons. Flying saucers zoom out of the sparks in a circuitry network. These primary objects are vehicles that allow Firefox users to literally ‘take flight’, and the smaller illustrations represent the many other opportunities just waiting to burst forth.

What are your thoughts on the end result? do you have a favorite page or a favorite illustration?

I think as a team we accomplished our goals. The overall site usability has been greatly improved, and the silhouette illustrations have been replaced with something fresh that can be used in multiple applications. Hopefully we haven’t alienated any of Mozilla’s core supporters, while redefining the look and feel of the site.

My favorite illustrations are based on one of my favorite product benefits, and that’s the eggs within the 100% organic software page. The carton of multi-cultural, multi-ethnic eggs still makes me smile every time I see it.

Ok, that’s about it from me…anything else you’d like to note?

I guess one note. I like that our client relationships tend to last, and we end up becoming more like strategic partners. This can be rare in our profession, and I hope to stay involved in working with the Mozilla team in the future, and continue doing good work.

On that note, see you at the summit!

Back to the fuzz

0

Feeling Fennec-y

Now that Firefox 3 is out the door, it’s a good time to look ahead to some other projects, like our mobile efforts.

At the request of Doug Turner and the Mobile team, I worked with Nobox to create a logo they could use in a variety of spots during the Fennec development process. (Big caveat: this logo has nothing do to with the final Firefox Mobile branding.) The result looks like this:
big caveat

There’s also a significantly simplified version that will be used in spots where the fully rendered one won’t work. The inspiration for both was an actual Fennec fox, although the image had to be toned down a bit so as not to overwhelm the cuteness filter on most handheld devices.

Big Caveat

This logo has already popped up in the header of the new about:mobile newsletter…keep an eye out for it coming to plenty of other places soon.

Back to the fuzz

0

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.

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

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 securityadd-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!

Back to the fuzz

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:

Celebrating 10 Years of Mozilla

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!

Back to the fuzz

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:

Victory

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.

Back to the fuzz

0

Powered by WordPress. Designed by WooThemes