one mozilla

A Glimpse of the New Platform

jlongster — Wed, 01 Feb 2012 12:09:41 -0800

We’ve been working on a new platform, Bedrock, that will power the mozilla.org website platform, where we’ll deploy the One Mozilla redesign. It is a complete rewrite of the site, allowing us to clean up years of cruft and build new features to fit our current needs.

Ready to Go
It’s built! Technically, the new platform is ready to go. All of the localization, templating, and other features are finished. Most of the work left is coding the new design and migrating a lot of content from mozilla.org and mozilla.org/firefox.

Big Change, Small Steps
A big change like this needs to be done in small steps, so tomorrow we are rolling out a single page on the live mozilla.org site that is powered by bedrock. You can see the page on the dev site already*.

This is an exciting first step that helps us find problems early in our code or our production server configuration. We plan on rolling out a full-scale switch to bedrock after Firefox 11 updates in March.

* The dev site is slow, but production will be much faster. Also, the Python site sits on top of the PHP site, and all URLs prefixed with /b are served from Python.

Redesigning as One Mozilla: Design Review #2

stuartmillrd — Mon, 23 Jan 2012 16:04:53 -0800

With thanks to your ongoing feedback, the One Mozilla website project continues with design review #2.

What’s New?

This review focuses on a refinement and tightening up the design with real content.

You’ll notice that it looks a lot design review #1, and a large reason for that is that feedback on the direction has been overwhelmingly positive, and we’re making small iterations along the way. [1]

The Details

Top Level Navigation -

First, we’ve moved the search box up into the universal tab “Tabzilla”

Second, the nav itself features links to four major pages on mozilla.org, and with internal and external feedback, we’ve come up with the following four major user flows:

Mission - this will be the first time we’ve included the mission in the main navigation. We’re really excited about bringing this content to life.

About - in addition to updating the major 2-column template, we’ll be consolidating content from the Firefox product site (there’s currently a lot over there) here to provide a clearer picture of who we are and what we do.

Products - the intent of this page will be to feature Mozilla’s major product lines like: Firefox, Thunderbird, Apps Marketplace, Identity, and B2G. From this page, we’ll have a very clear user path to another page that will more clearly organize projects that Mozilla supports as well as archived projects.

Get Involved - the intent of this page will be to refresh the current design and some content from /contribute to help users get quickly matched with the right opportunities ranging from volunteering to full-time employment. The initial wireframe can be viewed over in bug 715566

Main Messaging Area - This is where your feedback really helped Matej, our copywriter, who came up with this: “We are Mozilla, non-profit for the good of the Web.”

Firefox Sash - Our survey demonstrated overwhelmingly that more than 50% of site visitors arrive on mozilla.org looking for Firefox. Design review #1 presented the download button clearly, but design review #2 adds context to the content:

Brand positioning: Different by Design
Value positioning: Proudly non-profit, Innovating for you, Fast, flexible, secure

One other note here is that we will be working hard on using browser/version detection in lots of creative ways to serve up content we think users want. If a user lands on this page with the latest version of Firefox for desktop, we’ll feature another product in this space, like Firefox for Android.

Featured Slider - Here’s a version of the home page with different content in the featured slider.

Jason Grlicky, Mozilla UX designer, provided very valuable feedback on this area and that combined with inspiration from Eric Spiekermann’s site gave us pause and inspiration. Though we all really loved the wide, overflowing images posted in design review #1. The smaller, hard-edge images here work better as fluid images.

We’ve also gotten great feedback on how cool it will be to see the color shift on the page with the slider, but important user experience issues have us thinking through how we might pull this off. Moving forward, we’re going to try both approaches, and work with you and user testing to find the sweet spot.

Rolling Out & Testing a Content Rich Universal Tab

stuartmillrd — Thu, 12 Jan 2012 13:21:00 -0800

With 200+ sites, 150 blogs and many other various web properties, the Mozilla universe is massive and can be difficult to navigate.

Roughly a year ago, a few Mozillians (David Boswell, Potch, Sean Martell and John Slater) got together to come up with a solution to unify all Mozilla properties: a universal tab that, when clicked, would expand to expose navigational links across all key sites.

A lot of you have probably become pretty familiar with the grey tab in the upper right corner of Mozilla sites, and from a branding perspective it’s been helpful identifying Mozilla properties. We’re excited to roll out the next phase of the universal tab as part of the One Mozilla project.

Universal Tab, Version A.

Universal Tab, Version B.

High-Level Content Map

You might be wondering, how did these items make the cut? Well, we’ve spent a lot of time auditing Mozilla websites, traffic and user patterns, and have come up with a first pass of a high-level content map. Right now it’s organized into four major areas, but it will surely evolve based on A-B testing, usage trends and of course your input (which is what this post is all about).

Mozilla - Where users will find the most up-to-date and useful content about Mozilla

mission —> http://www.mozilla.org/about/mission.html
about —>http://www.mozilla.org/about
products —>http://www.mozilla.org/products
MDN —> https://developer.mozilla.org

Products - Will feature links to Mozilla’s major (and currently expanding) product lines, like Firefox, Thunderbird, Apps and BrowserID.

Firefox —> http://mozilla.org/firefox
Thunderbird —> http://mozilla.org/thunderbird
Apps (coming soon!)
Browser ID (coming soon!)

Innovations - Where we’ll feature special projects like WebFwd, Labs, and soon Betafarm

Webfwd —> http://webfwd.org
Labs —> http://mozillalabs.com
Betafarm —> http://betafarm.mozillalabs.com

Get Involved - Links to key ways that people can support Mozilla, by volunteering, becoming a paid employee, making a donation, and more.

Volunteer with us —> http://www.mozilla.org/contribute/
Work —>http://careers.mozilla.org (new site coming soon!)
Find us —>http://www.mozilla.org/about/mozilla-spaces/
Join us —> http://donate.mozilla.org
Learn more —> http://www.mozilla.org/contribute/

The website directory will link to http://www.mozilla.org/community/ and we’ll be doing a lot more work to provide a comprehensive sitemap along with the interactive visualization in 2012 (hooray!).

Promotional Space

This will be a spot to feature a specific project or campaign, and may either pull in data from our about:home snippets or use specially created content.

Next Steps

As noted earlier, this is just a first pass…we really want to get your input before we roll anything out. Is anything missing? Is everything in the right place? Of course we can’t feature every Mozilla site here, but if done right each of these links ought to at least help users get to the sites that will be most useful to them. If you have suggestions, please let us know in the comments section.
Once we get your input, we’ll iterate and then post a test version of the tab in the next few weeks. Initially it’ll only be used for a small % of incoming traffic, but the data on how it’s used will help us continue to refine it. Then, once we’re happy with the content, we’ll make sure it’s ready for responsive design on all devices, and are aiming for a full rollout by the end of March 2012.

Beyond that, we’ll get this fully localized and create a delivery solution (maybe an iframe) so it can easily be used by all Mozillians. We also hope to improve the relevance by adding dynamic information depending on where a user is coming from.

Thanks!

Sean Martell, lead designer
Steven Garrity, developer
David Boswell, tour guide
You, feedback & help with iteration

Redesigning as One Mozilla

tenaciouscb — Mon, 19 Dec 2011 17:59:00 -0800

The One Mozilla website project continues! As you may have already read, as part of the One Mozilla website project we’re redesigning mozilla.org.Our awesome lead designer, Sean Martell, has been hard at work on mockups, and although they’re still in the early stages we’d like to share them with you to get your input.

Note on image: v1-1, by Sean Martell

GOALS

With this redesign we’re setting out to update the visual style with 3 guiding goals that we believe will benefit Mozilla and our community the most:

design a home page that is world-ready
design a home page that is mobile-first
design an interface that connects site visitors with the right content quickly

SURVEY RESULTS

Before embarking on this redesign, we conducted two types of surveys:

#1 stakeholder survey - for this we asked key stakeholders and community members to answer a set of questions to help us guide the early direction of the project and the visual style.

#2 home page single-question survey - we’ve been asking “What brings you to Mozilla” on the mozilla.org home page. Here are the results after one week:

56.5% — Download Firefox, 1080
19.8% — Learn about the Mozilla project & mission (not Firefox), 378
13.5% — Learn how to get involved in the Mozilla Community, 258
20.7% — Looking for another Mozilla product” (thunderbird, mobile, sync, home, etc), 396
10.6% — Find a job, 202
34% — Other, 650

*users may select more than one option

HOME PAGE LAYOUT

Based on the results of the survey, we’re building the design around the following elements:

Top Level Navigation - These will be the main links to major pages in Mozilla.org. It’s placeholder content for now, as we’re talking to a lot of stakeholders about what will go in here. Some ideas include: Products, Get Involved, and About Us.

Main Messaging Area - A prominent place where we can best express what Mozilla is about with a few words (please note that the words in this mockup aren’t final).

Firefox Sash - Our survey results showed that more than 50% of all site visitors arrive at mozilla.org looking for the famous green Firefox download button.

We’ll also leverage user agent detection like we do on mozilla.org/firefox to serve up the right button to the right audience (e.g. if you’re on the most recent version of Firefox for desktop, we’ll serve you Firefox for Mobile).

Featured Slider - This area will be full of featured content like current projects, campaigns, and events. We’ll aim to leverage localization and translation to present the most relevant information on localized versions of this page.

Lower Third Content Areas Left & Center - The ipsem lorem does a lot to obscure this area, but right now we’re considering piping in the latest from the mozilla.org/blog. It’s likely we would hide this unit on mobile devices, and until we can offer a localized content solution would not include it in all localized versions of this page.

Get Involved - We would like to create a simple visual entry point for the many different types of users who arrive on mozilla.org, looking to get involved. Some ideas for this unit include:

Volunteer with us (/contribute)
Work with us (/careers)
Find us (Mozilla Spaces)
Join us (/join)

What do you think of these options? What other entry points do you think we should we consider having here?

TOOLS

This redesign is more than just a new look, our guiding goals require that we pursue integrating new technologies. Since Mozilla has a goal of promoting the adoption of new open web standards and using open source technologies, this redesign will leverage:

Open Sans type - Open Sans was designed to be neutral, yet friendly. We love it, because it works for print, web, and mobile interfaces. It has a huge character set, so it’s great for l10n :-)

Less Framework - Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Media Queries - Media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

Bedrock - Python and Django-based website platform that has a specific workflow for l10n, manages download buttons with simplified javascript libraries, and makes updating designs super simple with smart templating.

YOU + FEEDBACK

We’d love to get feedback on this design review. Things are still taking shape, so with that in mind take a look at these mockups and let us know what you think about the look and feel of the site and visual approach we’re taking. Please post your thoughts in comments below.

*note on content - everything is just a placeholder at this point, we’ll have another review on that shortly.

Title: v2-1-1, for desktop, by Sean Martell

Title: v2-1-1, World-ready for l10n, by Sean Martell

Title: v2-1, Smartphone, by Sean Martell

v2-1-2, variant with slider, by Sean Martell

v2-1-3, variant with slider, by Sean Martell

v2-1-4, variant where slider color changes top messaging unit, by Sean Martell

v2-1-5, variant where slider color changes top messaging unit, by Sean Martell

v2-1-6, variant where slider color changes top messaging unit, by Sean Martell

Full set of wireframes on flickr here

Full set of comps on flickr here

This week we’ve been porting the channel page to bedrock,...

jlongster — Tue, 06 Dec 2011 16:36:00 -0800

This week we’ve been porting the channel page to bedrock, our new Python platform. It was pretty easy, and we were even able to port all the existing translations with shell scripts, so the page is available in all 90 locales (with a few glitches that can be fixed).

High-Level Proposed Sitemap for mozilla.org Redesign on...

tenaciouscb — Thu, 01 Dec 2011 12:27:00 -0800

High-Level Proposed Sitemap for mozilla.org Redesign on Flickr.

Here is a high-level sitemap for the re-organization and redesign of mozilla.org.

We’ve been building download buttons in Python, and...

jlongster — Mon, 14 Nov 2011 14:41:00 -0800

We’ve been building download buttons in Python, and it’s coming along great. Most of the logic has been ported (and hugely cleaned up) from the PHP side. One step closer to a One Mozilla django site.

The "bedrock" project on Github

fwenzel — Thu, 13 Oct 2011 09:50:15 -0700

The "bedrock" project on Github:

Bedrock is a new version of mozilla.org written on top of Playdoh, Mozilla’s Django-based web application template.

Welcome to the One Mozilla blog! This is a blog of various news,...

fwenzel — Tue, 20 Sep 2011 20:29:22 -0700

Welcome to the One Mozilla blog! This is a blog of various news, links, images, and other tidbits about One Mozilla. One Mozilla is the project dedicated to creating a unified platform for the Mozilla project on the Web.

Stay tuned for more!