Navigation

Archive | Design

Creating a New Look for Mozilla.com

By on December 17, 2007 in Design, Mozilla.com, PlanetMozilla

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!

Back to the fuzz

Coming Soon To Mozilla.com, Part 1

By on November 19, 2007 in Branding, Design, Mozilla.com, PlanetMozilla

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.

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.

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.

 

Back to the fuzz

New Approaches to an Old Challenge

By on October 4, 2007 in Design, firefox, PlanetMozilla

Convincing people to download and begin regularly using an entirely new web browser is a pretty tall task for an online ad, which is why we’re always testing different approaches to see what works.

We recently asked Nobox to come up with concepts for two online ads around the themes of security and customization (key points of differentiation between Firefox and the competition). The ads started running a few days ago…my esteemed colleague David Rolnitzky has a detailed breakdown of the thought process behind them on his new blog, so definitely check that out.

Our main request to Nobox for the security ad was that it be very benefits-focused…in other words, communicate how browser security (or the lack thereof) directly impacts the user, rather than just making a generic statement about what Firefox’s security features are. For the customization one, we asked them to explore some non-technical metaphors (besides the somewhat played-out one of souping up your vehicle) that would help explain what add-ons are and how they can help you.

Nobox processed all that and came back with an interesting approach: cartoons. When they first proposed this I have to admit I was a little uncertain, but they quickly sold me with their specific concepts, which communicated our key points in a very fun and engaging way. I feel like it’s important to be serious about what we do, but also not to take ourselves too seriously, and to me these ads do a good job of doing that. Of course, online advertising provides very well-defined results so the users will have the final say!

The landing page for the security ad is below. You can see the other landing page plus the ads themselves on David’s site.

New Approaches to an Old Challenge

Back to the fuzz

Addressing Firefox Retention on the Download Page

By on August 20, 2007 in Design, firefox, Mozilla.com, PlanetMozilla

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.

Addressing Firefox Retention on the Download Page

Back to the fuzz

Rocking Your Firefox Just a Little Bit More

By on August 6, 2007 in Design, firefox

You’ve very likely already read about Rock Your Firefox, the cool new Facebook app that enhances the Firefox Add-ons experience. What you haven’t read about until now is the previously secret Sesame Street connection.

As we were branding the program, Justin Scott wanted an eye-catching design that would make Rock Your Firefox stand out from all the other Facebook apps out there. We hit upon the idea of using a loud 70s graphic style to get our point across. I then contacted Lee Tom, a designer who did an excellent job of translating all my random thoughts and pop culture references into this:
Rocking Your Firefox Just a Little Bit More

One of the pop culture references I gave Lee as direction was this extremely groovy vintage Sesame Street clip. I’m probably dating myself here, but it was one of my favorite things as a kid and I was very happy to find it on YouTube several weeks ago (completely unrelated to this project). You’ll see the influence on Rock Your Firefox as you watch:

So that’s the story behind the story. And if you’re into this design, I should mention that Rock Your Firefox desktop wallpaper is available in several sizes here.

Back to the fuzz

Powered by WordPress. Designed by WooThemes