one mozilla

News from the One Mozilla website project

3 notes &

Redesigning as One Mozilla: Design Review #2

 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.

Read more on fluid images: 

Also, speaking of phones, take a look at how this all works on the grid.

Lower Third - Copy-Rich Areas

In the News - This area will be curated by Mozilla’s PR team, pulling in content from various Mozilla blogs and possibly external news sources reporting on Mozilla. We’ll hide this unit on translated versions of mozilla.org, and work with locales to put relevant and translated content in that space over time.

In the Know - This area is a space for us to promote interesting aspects of ongoing projects across the Mozilla universe that might not make sense or happen to quickly for us to promote in the featured slider.

Get  Involved - Working closely with Mary Colvig and David Boswell, who recently presented the Contributor Audit, we’ve added content here to guide seasoned, new, and brand new Mozillians towards areas where they can contribute:

Simple Footer - We’re working on a greatly simplified footer that all sites in the Mozilla universe can use more succinctly.

Next Steps

1.) Please share your feedback
2.) Our next pass will be to move this over to code, using two frameworks:

Thanks!
  • Sean Martell, lead designer
  • Matej Novak, copywriter 
  • Jason Grlicky, ux advisor
  • David Boswell, tour guide
  • You, feedback & help with iteration

Filed under one mozilla less css less framwork

  1. onemozilla posted this