Archive | Websites RSS feed for this section

New Creative for a New Firefox

*Crossposted from about:pixels*

Today Mozilla launched a brand new version of Firefox, with a completely revamped look and dozens of feature enhancements. It’s unquestionably the best Firefox yet, which of course meant we in the Creative team had to raise our collective game to ensure our work was worthy of the awesomeness coming from the product.

With that in mind, we (along with many other Mozillians) set out to overhaul our full set of Firefox user touchpoints in a way that would effectively communicate the key benefits of the browser as well as the larger story behind it. Both the ‘what’ and the ‘why’, if you will.

For starters, we couldn’t launch a redesigned browser without a redesigned website, so we collaborated closely with the Web team to completely bulldoze the previous Firefox site and build a new one from scratch. In the process, we drew our inspiration from the Firefox design values with the aim of creating pages that felt both clean, crisp and modern as well as warm, human and inviting.

Pay careful attention to the animations sprinkled throughout the new site. Not only do they present a more engaging view into what the new Firefox is all about, they’re built with CSS keyframe animations to make sure we’re showcasing the best of what open Web technologies can do.

Screen Shot 2014-04-29 at 10.19.13 AM

Because Mozilla is a non-profit, the ‘why’ is just as important as the ‘what’, so we created another site called the Web We Want to help elevate the conversation beyond (the admittedly awesome) product features and functionality. This site (and the accompanying video) is at the center of a lot of our social media activity, and we hope that by asking people to pause and think about what they want for the future of the Web, it will spur collective action to help make those visions a reality. Definitely check it out and share what you think!

Screen Shot 2014-04-29 at 10.16.20 AM

Of course, the story of Firefox is really the story of all the dedicated and talented Mozillians who give their heart and soul to make the magic happen. Here’s a look at what some of those amazing people have been up to (you can view other videos in this series here and here):

This is only a glimpse into the full scope of the launch, and since it would be impossible for me to accurately list the complete set of people who made it all possible, please allow me to focus on the members of the Creative team in this post. Huge shoutout to Jennifer Balaco, Rainer Cvillink, Ty Flanagan, Spencer Hui, Sean Martell, Matej Novak, Matt Ternoway and Lee Tom for devoting their time and talent to a world-class release of a world-class product. I couldn’t ask for a better team to work with.

Comments { 0 }

For Your Review: One Mozilla Style Guide, v1

One Mozilla Style Guide (sample page)

As Mozilla continues to grow and evolve, it becomes increasingly important that we tell our story consistently and effectively at every opportunity. Whenever a user encounters one of our brands, be it an interaction with one of our products, a visit to one of our websites or simply seeing a Firefox shirt, we want the experience to truly feel like Mozilla.

But, what makes something feel like Mozilla? And is it possible to carry that feeling across many different touchpoints? With all that (and much more) in mind, our creative and UX teams have been hard at work defining our rules of style so that anyone who creates on behalf of Mozilla will have a guide to follow.

When it goes live as an open-to-anyone website, this One Mozilla style guide will connect everything from our product design to our logo rules to our written tone. It’s undoubtedly a lot of stuff, which is why we need your help making sure it’s done right. The link below points to a draft of the guide (to put it in Firefox terms, it’s like an Aurora release). Please take a look and let us know what’s working, what’s not working, what might need more explanation and what’s missing altogether. We know there’s more to do, but your input will play a big part in identifying what happens next.

We’ll have more to share about this project soon…until then, thanks for your help!

One Mozilla Style Guide, v1

[note: the product design details currently exist in a different format, so they'll be flowed in during the site development process.]

Comments { 13 }

Mozilla.org Redesign Update

As noted a few weeks ago, the next step in our One Mozilla web project is to update the visual design of mozilla.org. There will be content and IA updates along the way, of course, but we’re starting with a common look & feel. Once that’s done, we’ll be able to begin blending our various sites into a truly unified experience.

We have a One Mozilla blog set up where we’ll be posting updates about both visual design and technical updates…it will be syndicated to Planet Mozilla soon, but until then I wanted to be sure to call it out here.

In particular, please check out our latest post, which includes the first batch of early stage mockups by Sean Martell. Be sure to read all the background context (very important: all content is placeholder, so please focus on the look & feel elements), and then share your thoughts in the comments section of that post. Looking forward to hearing what you have to say!

Here’s a sneak preview:

desktop-mockup-v2_1_1

Comments { 0 }

Different By Design

Different by Design

I’ve written before about how one of the Engagement team’s big goals is to make sure that the meaning behind Firefox comes through in our marketing. In other words, we want people to understand that we (Mozilla) aren’t like our competitors in terms of our mission, motivation or the way we do business, and that the products we make reflect those differences. We know that the more people understand that, the more favorably they’re inclined to view us, so it’s an important concept to communicate.

With that in mind, we launched a new campaign today to share our people-powered values more clearly and boldly through the download process on our website. The Firefox download page (for non-users…people using the latest version of Firefox see a different page) has been updated with a new look and new messaging to reflect these values. In particular, I really like the bold use of orange (a good color for us) and the collage of Mozillians in the background. The same theme continues on the download confirmation and first run pages to give new users a consistent experience.

For now this campaign is in en-US only (although we’re working to expand it to other locales) and doesn’t extend to the rest of the site. But, if it goes well I could see variations of this look used in other areas as well. I think the photography in particular is a nice visual metaphor for how we’re different from the other guys. Plus, look carefully…you might even see someone you know!

Comments { 0 }

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 }