one mozilla

News from the One Mozilla website project

9 notes &

Redesigning as One Mozilla

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:
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  web­sites. 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

Filed under one mozilla redesign sean martell feedback

  1. buy--steroids--uk reblogged this from onemozilla
  2. mcmyt reblogged this from onemozilla
  3. onemozilla posted this