One Mozilla: Onward with the Visual Redesign

The One Mozilla website project continues! After merging the mozilla.com domain into mozilla.org, we’re now starting the process to update mozilla.org’s visual design with a new and improved look.

A Bit of Background:
The current mozilla.org template dates back to 2009, and was refined further last year. But, since then the Mozilla universe has continued to expand, and we want to make sure our visual design style grows along with it. Now that the merge process is complete the next step is to ensure a consistent user experience no matter where the user clicks.

Mozilla.org’s Role:
Although the individual products will continue to be hosted on their own sub-sections within our web universe, the root mozilla.org site is a key hub and starting point for all that Mozilla has to offer. Here are a few of the roles that mozilla.org serves:
* a place to tell the story Mozilla’s mission crisply and cleanly. (Note: historically, this portion of the site has only been represented in U.S. English, so we plan on fixing that with this project.)
* an important entry point for community members to learn about ways to get involved.
* the jumping off point for discovering products like Firefox (for both desktop and mobile) and Thunderbird, as well as upcoming offerings around apps, identity and Boot2Gecko plus innovations from Mozilla Labs and more.

The Process, Next Steps, & Getting Involved:
In August, we conducted a series of stakeholder surveys among the site’s core contributors, and are also running a short survey on mozilla.org to better understand what users are looking for. We’ll use the results from both to inform the design and content creation process on the site.

We’ve also launched the One Mozilla blog, where we’ll be posting updates about both the visual and technical elements of the site’s progress. We haven’t posted there much yet, but things should start picking up there in the next few weeks, and even more in the new year. Please follow along there if you’re at all interested in this project…we’re definitely counting on input from Mozillians around the world as we go.

If you have any questions please feel free to post them here in the comments section and I’ll do my best to answer them. Otherwise, stay tuned for design mockups and more coming soon!

Comments { 0 }

The Firefox Brand Toolkit Is Here!

Firefox Brand Toolkit: Logo Page

Exciting news: today we launched phase 1 of the Firefox Brand Toolkit. The goal of the site is to provide the information needed to properly communicate what Firefox is all about in a consistent and on-message way, so it includes logo downloads*, a copy style guide, sample website assets, positioning info and more. Plus, it’s open to all to ensure maximum usefulness to our global community of Mozillians.

When I first wrote about this project a couple of months ago, I referenced what an incredibly important asset the Firefox brand is. For hundreds of millions of people around the world, it stands for a commitment to putting the user first and always striving to make the web better. It embodies both a rich history and exciting future.

And, because of Mozilla’s open nature it’s the responsibility of all of us to protect it and help it grow the right way. That means speaking in a consistent voice, and making sure *all* our user-facing communications have a common tone and visual feel. That’s not always easy, but our hope is that this toolkit will be a key step toward making that happen.

So, please browse through the toolkit and, next time you’re putting together a website, information for an event or anything else Firefox-related, be sure to keep it in mind…I hope it will be a big help. Also, we know there’s more that could be added, so please let us know what you’d like to see in phase 2.

Huge kudos are due to Sean Martell and Matej Novak for leading the effort to put this toolkit together…really stellar work on their part. Also, many thanks to Steven Garrity and the silverorange team for building it.

Thanks!

* The vector files aren’t up there yet, but thanks to bug 476604 being resolved recently they soon will be.

Comments { 0 }

Moving Toward One Mozilla

I think it was back in 2009 or so when, over a game of ping pong, David Boswell and I started talking about the idea of unifying all the various Mozilla websites under a common domain. The concept of bringing everything together to create a One Mozilla site was pretty great, we agreed, but the thought of actually doing it seemed almost impossibly daunting.

Fast forward a couple of years to the summer of 2011 and, thanks to many hours of hard work by a lot of awesome people, we’re now on the verge of major step towards doing just that. In the next few weeks, we’ll be merging mozilla.com and the various European Firefox product sites back into mozilla.org (the Thunderbird product site already did this last month). As a result, mozilla.com will essentially cease to exist in its current form – all those millions of visitors that have made it one of the world’s most highly trafficked websites will wind up on mozilla.org/firefox instead.

This isn’t just an exercise in domain management, either – it’s a big step forward in terms of how users interact with us online and how we present ourselves to the world. The reasons behind One Mozilla include:
* building a better platform for communicating the mission and explaining why we do what we do. For example, we know people respond well when they realize Firefox is made by a non-profit, so by hosting our product site on the .org domain we make that point more clear and avoid the confusion created by having both a mozilla.org and a mozilla.com.
* providing more relevant and easily discoverable content for users.
* create a more efficient vehicle for talking about both our current products as well as exciting new ones.

I should probably stop here and note that I’m getting a little ahead of myself – this initial step will join the domains, but in the immediate future the sites will continue to have different core designs (mozilla.org and mozilla.org/firefox will still look different) and be powered by different technical infrastructures. The URL merge is a big leap forward, but there’s still a lot of work to be done on both the front and back ends. We’ll be sure to conduct that process in the open (I’m looking forward to discussing the design evolution, for example) and the team will be posting about ways you can get involved soon.

Lastly, this is a big enough project that it warrants more than one blog post, so keep an eye out for the following updates later this week:
* Chrissie Brodigan on the subject of how we got to this point and what’s happening next
* James Long on the technical magic behind the merge
* David Boswell on what this means for our regional community sites

Much more to come!

Comments { 0 }

Firefox Meets Caltrain

This is a few weeks overdue, but as part of the same project that produced the series of billboards currently dotting the Bay Area, we also did a ‘takeover’ of the main San Francisco Caltrain station. For those of you reading this from a different part of the world, this station is a key point in many people’s commutes from San Francisco to Silicon Valley (and vice versa), not to mention those going to SF Giants games, so it’s a good spot for us to be.

I’ve included a few photos below, but you can see the full set on my Flickr page. Next steps: bring our brand story to a more global audience, and create tools that can empower our community to spread the word themselves. More on that soon!

Firefox Meets Caltrain

Firefox Meets Caltrain

Firefox Meets Caltrain

Comments { 0 }

Open Source Design In Action (Or, London Gets Happy and Snappy)

I love it when a plan comes together: Koen Hendrix gets involved in the Creative Collective, wins the Firefox 4 t-shirt challenge, gets invited to the launch party in London and the result is t-shirty goodness for everyone.

Here’s Koen showing off his handiwork:
Firefox 4 Launch Party

And here’s the *whole crowd* showing off his handiwork:
Firefox 4 Launch Party

(Photos by Desigan Chinniah, aka the one and only @cyberdees)

Comments { 0 }

News and Notes from the Mozilla Creative Team

The Creative team here at Mozilla has been growing rapidly lately, so it feels like a good time to share a quick update on who we are and what we’re doing.

As background, we’re part of the broader Engagement team within Mozilla and are tasked with communicating the Mozilla Firefox story through visual design, copywriting, brand projects and website management. The group includes two veteran Mozillians who in the last several months have taken on exciting new roles:

Sean Martell, Visual Design Lead (blog/twitter) – Sean joined us in December after previously working as the designer for Mozilla Labs, where he spent the last couple of years creating amazing websites, t-shirts, logos and pretty much anything else he could think up. He’s now the visual design lead for all of Mozilla, and is continuing to lend his talents to individual projects while also helping to set our more longterm strategic visual direction.

Tara Shahian, Creative Manager (blog/twitter)- During her 3+ years at Mozilla, Tara has worked on everything from building our design community to producing engaging videos to leading the visual style of the various Fx4 social media efforts. In her new role (which she’s actually been doing since last year), she brings her creativity and attention to detail to managing our many copy and/or design projects and driving art direction for various campaigns.

We’ve also added four awesome new members to the team in the last few months. Please welcome:

Chrissie Brodigan, Website Engagement Lead (blog/twitter)- Chrissie joined us in February, and is tasked with leading mozilla.com’s content strategy, user testing, long term roadmapping and more. Folks who went to SXSW this year may recall her well-received session about bringing designers into the world of open source.

Laura Forrest, Website Marketing Manager (blog/twitter) – Laura started as a contractor last summer, and quickly proved herself indispensable. She leads the onsite marketing efforts on mozilla.com, leads our bimonthly mozilla.com site releases, acts as the team’s resident metrics expert, manages the snippet program and more.

Matej Novak, Copywriter (blog/twitter) – Matej is Mozilla’s first ever full-time copywriter, and has already made his presence felt by providing the words for a variety of Firefox 4 campaigns. If you need help with site copy, catchy phrases, product/feature naming or debates about proper sentence construction he’s your man.

Lee Tom, Visual Designer – Lee also started with us as a contractor last year before going full-time, and has already helped shape the look of mozilla.com, mozilla.org, email newsletters, Rock Your Firefox and much more. He’s probably designed at least one of the Firefox t-shirts you own, too.

Please join me in congratulating/welcoming all the above.

IMG_2417

[We're on a boat: David Boswell (special guest), Laura, Matej, Tara, Chrissie, John, Sean, Lee]

Comments { 0 }

Taking Our Message to the Streets (Literally)

One of the big recent goals of the Engagement team has been to hone the Mozilla Firefox brand message and make it a part of all our communications around the Firefox 4 launch (and beyond). We’re also taking that a step further by launching specific campaigns to help people better understand who we are and what we’re all about.

I’m happy to report that the first of these initiatives launched this week as a series of billboards around the SF Bay Area. They’ll be up roughly through the end of April, and if the response is positive we’ll plan on bringing this message (perhaps in different formats) more worldwide. Starting next week you’ll also notice a very large Firefox presence at the San Francisco Caltrain station.

I’ve included a few pictures below, but if you want to see many more just click here and here.

Also, if you’re in the Bay Area and want to see them for yourself (they’re quite impressive in person!), here’s the full list of locations:

101 @ Whipple Ave
I-80 @ Bay Bridge Toll Plaza
I-80 @ Berkeley
SF: Washington & Battery
SF: Kearny & Market
SF: Union Square
SF: Mission & 6th (begins on April 4)
SF: 2nd & Howard
SF: Lombard & Scott (begins on April 18)
SF: Caltrain station (begins on April 4)

Firefox Outdoor (April 11)

Firefox Outdoor (April 11)

Firefox Outdoor (April 11)

Comments { 0 }

Firefox 4: Building a Better Biosphere?

Biosphere Up Close

The first Firefox 4 beta was released two days ago – a big milestone for both Mozilla and the web in general. So, to commemorate the occasion we’ve started a new series of first run page illustrations in the same vein as the Firefox 3 robot saga from a couple of years ago.

Because the beta process is really all about people in our worldwide community working together to build a better product (there are a few different ways you can help by providing feedback while you browse), the illustration is meant to represent that collaborative, innovative spirit. I’ll leave the specifics a mystery for now, but it seems as if it’s taking place in some sort of futuristic biosphere. The initial artwork for beta 1 is only the first in a series, so keep downloading those betas as they’re released to watch the story unfold!

The artwork is inspired by the work of 20th century futurists like Klaus B├╝rgle…as a kid, I was always fascinated by drawings of futuristic cities like this, so it’s fun to see a Mozilla version taking shape. The illustration itself was done by the very talented Steven Olds, with additional guidance and ideation from Tim Hogan and our friends at the Royal Order. Big thanks to those guys.

Lastly, if you’d like to see a big version of the artwork without the text and other design elements on top, I’ve got one in my Flickr account: check it out.

Comments { 0 }

Firefox = Rockin’

Way back in the summer of 2007, an up & coming young intern known as Fligtar developed a Facebook app that allowed you to share your favorite Firefox add-ons with friends. We called that project Rock Your Firefox, and the design – which was created by Lee Tom and directly inspired by the classic Sesame Street pinball video that had fascinated me as a kid (details here) – remains one of my favorite Mozilla projects.

So, when Fligtar (now a seasoned Mozilla product manger) approached me a few weeks ago about a Rock Your Firefox reboot – this time in the form of a blog – I was all too happy to help once again. We called up Lee, gave him the same set of inspirations (as a fun game, see how many elements from these screenshots you can find in the actual site design) and asked for a 2010 twist on the 2007 original. The results are even bubblier and groovier than ever, and if you’re in Austin for SXSW this weekend there are some good opportunities to grab various swag items.

Most importantly, keep an eye on the Rock Your Firefox blog for the latest and greatest highlighted add-ons. And, for old times’ sake, be sure to check out the original video that started it all:

Thanks to Lee Tom, Justin Scott, Julie Choi, Nick Nguyen, Chris Howse and Elise Allen for their help with this project.

Rock Your Firefox site

Comments { 0 }

Starting the Discussion: How to Make Mozilla’s Websites Better

As noted yesterday, there are many good things about Mozilla’s various websites, but the big picture of how they’re organized and work together leaves a lot of room for improvement. Entering our web universe can be really confusing for users, and the current setup limits the ways we can spread the word about all the stuff that’s happening around the organization and community.

So, to kickstart the discussion of how we might solve these problems, we held a public brown bag today to talk about the overall situation and how to improve it. Big thanks to everyone who attended and participated – it was really great to hear people’s ideas and input.

During the brown bag, I framed the solution as having four basic steps (none of which are easy, of course):
1. think about our sites as components of a larger network rather than a bunch of individual pieces.
2. tell our story effectively by making sure each site has a clear role and distinct focus.
3. group related content together so it’ll be where users can find it.
4. connect sites more effectively through cross-linking, UI elements, visual palette, etc.

More specifically, the central proposal that I put out there was that we should have a single Mozilla site (mozilla.org) that would focus on sharing the big picture of who we are and what we do, and would be a central hub for a bunch of product- and audience- specific sites to orbit around. As part of that, we would rename mozilla.com to more accurately reflect its current focus as the main Firefox product site.

The next question, then, is what to call that Firefox product site. For a variety of reasons (that will probably require another blog post to detail) my personal vote is to call it firefox.com, although there are certainly other options – mozilla.org/firefox or firefox.mozilla.org, for example. It’s an interesting discussion, although the specifics of the URL are ultimately less important than the overall goal of making our sites better.

Regardless of the name, though, there’s a lot we could do on this “new” site, such as integrating Firefox add-ons and support to create a single destination for all things Firefox. It would be a powerful communications vehicle for us, and a really useful resource for users.

Of course there are a ton of details that still need to be talked through, and some big questions to figure out. For example, where do key sites like Mozilla Europe fit into all this? Would this create an improper balance between the Firefox and Mozilla brands? What’s the right URL structure?

But, I’m confident we can answer those questions, and once we do the result will be a huge improvement for all involved: more relevant, accessible content for users; a clearer platform for communicating the mission; a better vehicle for talking about Firefox and other key initiatives like mobile, add-ons, services, etc. There are lots of really exciting opportunities, and I can’t wait to get started on them.

If you weren’t able to make it to the brown bag today (or even if you were), I’ve attached the full set of slides here, and Laura has put up a bunch of notes from the discussion session. The slides have way more detail than this this post, so please take a look and share any questions or comments in the comments section below. Thanks!

Update: David Boswell offers up some thoughts from the Mozilla Foundation perspective.

Comments { 0 }