A group of us have been working on the Mozilla.com redesign for a few months now, and I’m happy to report that it’s definitely on track to launch at the same time as the upcoming Firefox 3 release. But, it’s also at that point where we really need some fresh eyes to look it over and make sure everything is working properly…which is where you come in.

Next Monday we’re going to begin what I’m calling a “semi-public” beta test of the new site. It’s ‘public’ in the sense that everyone is invited (and encouraged) to participate, but it’s ’semi’ in the sense that you’ll have to email me to get the username and password to the staging site. Here’s how it will work:
1. Email siteredesign@mozilla.com if you want to be part of the beta test.
2. On Monday, I’ll send out details about how to access the staging site, plus some info about known issues, filing bugs, etc.

It’s as simple as that…thanks in advance for your help!

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.

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!

Alix and I are working on the Firefox 3 features content for the redesigned Mozilla.com and would like your input. Our goal is to increase the amount of description and detail (compared to the current site) to give interested parties a better picture of everything that Firefox offers. We plan on listing each feature along with a short description…see below for our list so far.

My question to you is, how does the list look to you? Did we overlook anything? Miscategorize your favorite new feature? Or maybe it’s all exactly perfect already? (wishful thinking, I know)

Take a look and add a comment with your thoughts if you have anything to add. As you read, please keep in mind that 1) this list (and the site in general) is geared more towards the mass audience rather than developers and 2) the wording isn’t final, so don’t worry if you see acronyms or phrases that won’t make sense outside the Mozilla community. Thanks in advance for your help!

Here’s our proposed features list as it currently stands:

Top New Features:
• Awesomebar
• Site identity tool (i.e., Larry)
• Improved performance
• One-click bookmarking
• Full zoom
• Password manager

Security & Privacy
• Anti-malware
• Anti-phishing
• Site identity tool
• Parental controls integration (Vista only)
• Anti-virus integration (Windows only)
• Plug-in version check and disabling
• Secure add-on updating
• Password manager
• Clear private data
• Site-specific security permissions
• Automated update
• Pop-up blocker

Personal
• Awesomebar
• One-click bookmarking
• Library
• Tags
• Smart folders

Productivity
• Pause/resume downloads
• Smart keywords
• Spellcheck
• Session restore
• Live bookmarks
• RSS feed reader RSS preview
• Choice if you want to load images or not
• Platform native look & feel
• Full zoom

Tabs
• Save on exit
• Reopen closed tab
• Drag & reorganize tabs
• Smooth scrolling

Performance
• Improved memory management
• Smaller memory footprint
• Faster page load
• Graphics engine improvements
• Faster Javascript?
• Better DHTML?

Customization
• Thousands of options at AMO
• Fully integrated add-ons manager
• Themes & personas
• Customize: toolbars, search, web protocol handlers, site-specific preferences

Universal Access
• 40+ languages
• Customized per locale (dictionary, search providers, live bookmarks & web feeds)
• Text rendering
• Accessibility

Search
• Integrated web search (including adjustable search window)
• Choose from hundreds of search engines
• “Find in” page
• Search suggestions

Help
• In product help
• SUMO
• Live chat

Standards
• Online application support [email, calendar, etc]…i.e. web-based protocol handlers
• Offline browsing
• Advanced graphic stuff – SVG, Canvas
• Color profile support
• Support for CSS, Acid 2, MathML, EcmaScript 4, APNG, Cross-Site XMLHttpRequest, Microformats

Alix and I are working on the Firefox-related content for the new Mozilla website, and would like to include a page that offers some tips & tricks for beginning, intermediate and advanced users. The idea is to expose some of the cooler Firefox features (either new to Firefox 3 or ones that have been around for awhile) to help people become better users of the browser.

We’ve thought of a few already, but my guess is that you guys will be able to come up with a much better list than we ever could. So, my questions are:

* what are your favorite Firefox tips & tricks? Be sure to think in terms of beginning, intermediate and advanced users…obviously it’s going to take a lot more to wow a Firefox expert than someone who only recently downloaded it.
* how would you define these three user levels? For example, we feel like telling people about add-ons is possibly a worthwhile tip, but is that more suited to beginners (add-ons are a fairly basic piece of what’s cool about Firefox, after all) or intermediate users (given that they require an extra download/restart, perhaps that pushes them up to the next level)?

Please leave your thoughts in the comments section. Thanks for your help!

We’ve been working on a Mozilla.com redesign to coincide with the Firefox 3 launch for a few weeks (check out my earlier post for a refresher on project goals and other details), and now have four early-stage design directions to consider. If you’re interested in this sort of thing, definitely take a look at the options and let us know what you think. It wouldn’t really be a Mozilla project without community input, and and your feedback (along with thoughts from Mozilla Japan, Mozilla Europe, etc) will be extremely helpful towards us deciding which direction to pursue.

The key thing to remember as you review is that this is the first step in a long process rather than a vote between four final choices. In other words, these are design directions rather than final designs, so it’s best to consider the overall look & feel rather than focusing on specifics like photography, text, etc. That stuff is mostly placeholder and almost certainly will change before all is said and done.

With that caveat in mind, check out the options and leave a comment below with your thoughts. Thanks!

As noted yesterday, we’ve recently started planning a new look for Mozilla.com that will coincide with the release of Firefox 3. In the meantime, we’re still pushing forward with other, more incremental, improvements to the site.

The most visible of these interim site projects will be an updated homepage. The current page doesn’t provide much information about Mozilla as a whole (in fact, it’s almost indistinguishable from the Firefox product page), so we’re going to add points from our messaging document to provide a broader perspective.

Those points - security, customization and 100% organic software - will each be covered by a small promo slot that will link to a landing page with more detail. A fourth promo slot will link to a directory page containing details about the other *official* sites like the Developer Center, Spread Firefox, QMO, etc. Right now the site is lacking a central spot where users can access all these pages, so we hope this provides a better window into the Mozilla universe (and ideally inspires people to get involved in their area of interest).

There are some other cosmetic changes as well, but adding these key points and the directory page is the main difference. We still have some work to do on the landing pages, so this will go live sometime in December. The mockup below still needs a bit of tweaking to make it feel less busy and smooth out a few rough edges, but we’re making progress:

As our engineering and product teams move ever closer to the launch of Firefox 3, the marketing department is focusing on ways we can support the release. One of the biggest projects that we’ll be working on is a complete redesign of Mozilla.com.

Although the current site has served us very well in terms of driving lots of Firefox downloads, we still haven’t successfully used it to tell the story of what makes Mozilla so special. We want the new site to reflect Mozilla’s unique personality…that we’re a public benefit organization that relies on the active support of thousands of worldwide contributors to help keep the Internet open and free. Although readers of this blog surely know these details, this aspect of our brand hasn’t fully been communicated to the broad base of Firefox users.

It’s really a pretty amazing situation when you think about it: this unconventional arrangement has created a web browser that’s not only holding its own against the corporate giants, it’s used regularly by roughly 130 million people. How will we communicate all this? To be honest, I’m not sure yet but am looking forward to figuring it out together.

I should also make it clear that none of the branding stuff will get in the way of making the site extremely usable, accessible and localization-friendly…those are always top priorities. As a bit more background, here’s an excerpt from the project’s creative brief:

Unlike almost all other major tech companies, 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.

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.

We kicked off this project with an agency a few days ago…I’m planning on sharing some of the early creative direction and mockups as we go for your review and feedback, so stay tuned for much more on this topic.

(Coming tomorrow: a look at some proposed interim changes to the Mozilla.com homepage)

Lots of changes are afoot for Mozilla.com. Nothing too revolutionary at this point, but there are several things we want to get cleaned up before a larger overhaul in conjunction with the Firefox 3 launch. Here’s a quick overview of what we’ll be working on:

* Homepage: The overall look & feel (silhouettes, blue gradients, etc) won’t be changing, but we will be making some content updates to make it feel more representative of Mozilla in general rather than just Firefox. Right now the homepage is very similar to getfirefox.com, so we’ll be adding some more information to give visitors a clearer picture of what we’re all about (beyond just Firefox, which will still be prominently featured).

* Top Nav Bar: As Mozilla.com has evolved over the years, certain inconsistencies and problem areas have developed within the site’s information architecture. To address this, we’ll be making some edits to the tabs in the top nav bar to optimize the site’s current configuration and to allow for easy future growth and expansion. Paul, Beltzner and I agreed on the following list of tabs a few weeks ago, although this still isn’t totally set in stone: Downloads/Community/Add-ons/Support/Store/About.

* About Section: Lots of outdated info in here, so we’ll be doing a general cleanup. We also plan on getting rid of the left navigation bar (which only appears in this part of the site) in favor of a pull-down menu from the About tab. Right now it’s looking like these menu options will be: About Mozilla/Careers/Press Center/Blog/Licensing/Open Source/Contact Us.

* Careers Page: This one is already complete…we launched the new careers page yesterday. The old version didn’t really convey what it’s actually like to work here, so we added a bunch of employee photos and quotes to provide some authentic Mozilla flavor. We also fit more content on the page using the scrolly DHTML style as seen on the new first run page. A screenshot is below, but you should really check out the live page if you’re curious.

Big thanks to all the Mozillians who let us use their pictures, quotes or photography for this page. And of course thanks to Alicia Patterson for the design and Steven Garrity for the sweet DHTML.

A few weeks ago, JT and Beltzner presented their 12-point plan for improving Firefox retention. David Rolnitzky and I were tasked with point #5 - “Improve download and first run pages”, so I’m happy to say that we launched a new download page earlier today.

As a bit of context, this is the page that users see after they click the Download Firefox button, and it remains up throughout the entire download process. So, rather than just showing a promo for a messenger bag (which is what the previous version of the page did), our hypothesis is that users will be better served by seeing instructions (with visuals) on how to complete the installation process.

We plan to keep testing and evolving this page over time, so consider this more of a work in progress than a “final” page. Obviously the use of screenshots complicates the localization process, so we’re just launching the en-US version now while we actively try to figure out the best way to localize these pages worldwide. In addition to the Mac page shown here, we also created XP and Vista versions, and other OS’s may follow eventually.

Update 9/4/07: Several commenters correctly pointed out that this page wasn’t always viewable from certain key browsers. That was a known bug at the time we launched the page, and I’m happy to report that it was fixed last week.

Thanks to Alicia Patterson for her design work on the many iterations of this page.

…but it’s worth mentioning that, just in case, we now have a much snazzier site outage notification: