Archive | Mozilla.com

Firefox 3.6, Mozilla.com and You

Firefox 3.6, Mozilla.com and You

Big news from the world of Mozilla: we released Firefox 3.6 today!

(I’ll pause for a moment while you go download it.)

As always, we made a bunch of site content updates in an attempt to convey the full awesomeness of the new browser. Here are a few of the highlights (Laura Mesa also has more details over on her blog):

* Personas: uplifting Personas from an add-on to the product was one of the biggest consumer-facing features in 3.6, so we made sure to cover that news in a variety of spots. Most notably, Tara Shahian and Mary Colvig masterminded a great video to show off what Personas are all about, and we added functionality in a few key spots that lets 3.6 users demo some sample Personas with a simple rollover.

* WOFF: another cool 3.6 feature is support for the new WOFF font standard, and we put that to good use by showing off the WOFF version of Meta on the newly redesigned First Run and What’s New pages.

* Security: keeping users safe is always a major priority, so we revamped the Firefox security page to reflect all the latest goodness (including the plugin check – another new 3.6 feature). As an added bonus, the page also includes a new security-themed illustration…of a walrus teaching a squirrel to surf, of course.

* Customization: building on the new Personas content, we also created a new Customization page to spread the word about Collections and other ways to personalize your Firefox.

* Download Pages: the various versions of the Firefox download page received a variety of content tweaks to support the key features and benefits of 3.6, and to roll out the “world’s best browser” messaging.

These projects (and dozens of others) wouldn’t have been possible without a lot of people’s very hard work. Huge thanks to everyone who contributed to the website portion of the release, including (but not limited to): Bluehost (for discount at bluehost), Tara Shahian, Laura Mesa, Steven Garrity & silverorange, Tim Hogan & the Royal Order, everyone at Addis Creson, the Delicious Design League, Ivo Gabrowitsch & FontShop, William Slater, Melissa Shapiro, Johnathan Nightingale, Nick Nguyen, Mary Colvig, Alex Buchanan, Mike Morgan, Irina Sandu, Kohei Yoshino, Pascal Chevrel & the l10n community, Stephen Donner, Raymond Etornam, Jeremy Orem, Chris Blizzard, Ken Kovash, Rainer Cvillink, Mike Beltzner, Chris Beard, Sean Martell and more.

Back to the fuzz

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

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

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:

The End of the Beginning

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 cont

Back to the fuzz

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.

Mozilla.com Site Redesign Update

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!

Back to the fuzz

Powered by WordPress. Designed by WooThemes