Refreshing the mozilla.org home page

We launched a redesign of mozilla.org last August and have learned a lot since about what works well and what could be improved.

We’ve started working on a new design that is not a departure from the existing one, but rather refines what we have now—I think of it as a delayed fourth round of design that builds on the first three rounds.

The current home page has the right content on it, but is not presented as well as it could. For instance, too much space is devoted to news feeds and this crowds other information. The header also takes up a lot of space and it’s possible to make it smaller while keeping a bold image of Mozilla.

There are many more optimizations in the design and it seems easier to visually compare the two instead of itemizing all of the changes. The following image shows both side by side along with marks to indicate how much of the content shows up on different screen sizes.

All of the elements are still there—a statement of our mission, links to projects, news and ways for people to get involved in the community. Although some information has been pared down, we have more room for other information, in particular contribution opportunities.

I’ll follow up with more about this, but it is important to me to have the Mozilla site act as a hub to all of the interesting things going on and having more of the page devoted to contributing gives more people a chance to feature what they’re doing.

If you have any thoughts or suggestions about this design, feel free to let us know. We think this is a definite improvement and are excited to hear what you think.

25 Responses to Refreshing the mozilla.org home page

  1. Kim says:

    Looks really good and much improved! Great work :-)

  2. I like the changes. And actually unlike in other areas, where I feel change for change sake is lame, change in the layout of a website just to change it actually seems to prompt people to notice it has changed and thus read the new content. So I think changes like this are especially good if they are coordinated with some new message that it would be good to convey to a larger audience.

    But, all that said, I like the new layout on it’s own merit.

  3. I think the new design is good. Especially getting rid of the “community ticker”, which I guess was a nice idea of showing that “a lot of stuff is happening”, but I doubt the content is useful for anyone.

    I do find your description a little disingenuous though. The description of the Mozilla organisation has been more than “pared down”. It’s been drastically cut and the mentions of open source and public benefit have gone. The additional space from that reduction has been pretty much entirely devoted to giving Firefox a lot more space.

    But couldn’t some of the “about Mozilla” global community/open source/public benefit stuff squeeze in somewhere? even if it’s “below the fold” (below the news feed?)

    • davidwboswell says:

      Yeah, the idea behind showing some of the community’s personality through the ticker still seems solid, but the reality just wasn’t worth the space on the page.

      I guess I wasn’t clear about that intro section — the text is just placeholder for now to have something for the design. When we go live, I’d like to try out a few different approaches and then test to see what works best. For example, see the following post for some more thoughts about this.

      http://davidwboswell.wordpress.com/2009/05/27/building-or-believing/

      I do think though that trying to get people to the About page should be that intro’s purpose instead of trying to cram a bunch about Mozilla in a small space.

      • Michael Lefevre says:

        Aha. Well, sorry for calling your description “disingenuous” then – it was just unclear so I (and others) misunderstood a bit.

        I agree getting people onto the About page would be good, so if that can be achieved…

  4. cuz84d says:

    I like the new layout too.. the only nit i see is the top bar is too think now that the menu selections are flattened. The other is do we need all that extra space on the left? And the last, the bottom section, the 1st column (moz licensing) doesn’t have much symmetry with the other columns. Is there any way to make it match?

    • davidwboswell says:

      Well, at least the top bar is thinner than before :)

      For the space on the left, that area should expand or contract based on the size of the screen. The page will be coded as a liquid layout and it’s hard to show that in a static mockup, but you can see how that space works on the current design.

      For the licensing information in the footer, it is separated from the other footer content since they are serving two different purposes — one is just a block of text and the others are a set of links (basically a mini site map).

  5. cuz84d says:

    ah, the top bar looks too thick with too much extra unused space.

  6. GPHemsley says:

    Overall, the new design is good—I particularly like the increased use of the Firefox font—but there is still a lot of wasted space!

    That space on the left of the page is still there, even though it’s functionally useless. The top navbar is still way too large—and this time there’s not even any content to justify it!

    Also, it does not appear that there is any benefit to having the page wider that 1024 pixels. There isn’t any content to justify making users of that screen resolution scroll horizontally.

    Oh, and one other thing: The “In the News” section needs to contain more information to be useful. Oft-generic headlines next to people’s avatars are not likely to entice people to keep reading. There should be some sort of preview of the article—or at least a note saying what blog or news source it’s from.

    On the whole, though, the brighter colors and improved typeface make the site much easier on the eyes.

    • davidwboswell says:

      The space on the left will expand and contract based on screen size. The main column will also expand based on the size of the screen.

      The header is smaller than before but if it gets too small it will lose part of it’s function of displaying Mozilla’s personality on the page. As the Mozilla home page this needs to look like Mozilla as well as provide links to Mozilla sites and content.

      For the news section, we can play with that. The current news section shows too much content, I think but we may be going too far in the other direction.

  7. owww…. this throws off SeaMonkey from the first-page experience for most people. Well, another reason for going more and more our own way as we seem to drown in Mozilla’s efforts to do everything else.

    Still, on every other account, this looks like a very positive improvement!

    • davidwboswell says:

      I actually think this design gives more space to projects other than Firefox and Thunderbird. Right now we have the projects bar where most projects are off screen and someone has to click to get the slider to show other things.

      In this design if someone clicks on More Projects, there is the whole featured area to devote to information about what else is going on beyond Firefox and Thunderbird. This design only shows the featured area displaying Firefox, but that’s not to say that this area is Firefox-only.

  8. One of the things I really liked about the current design is that it got rid of the giant focal box that merely served to direct people interested in Mozilla Corp’s products to that website. The space was then repurposed for something more valuable, actual information about the Mozilla Project and its goals and values.

    Now it seems that the giant box has returned, albeit in a slightly different form. It’s now just promoting Firefox, and beta versions at that, and it seems to me like the big focal space on the *Mozilla Project* website would be better utilized focusing on the values and goals of the Project, rather than on (betas of) one product produced by one of the corporate users of Mozilla Project code.

    • davidwboswell says:

      The featured area won’t just show Firefox (see my response to kairo’s comment above). The mockup that I’ve posted does just show Firefox, but in the coded page people can click through to the Thunderbird and More Projects areas and there will be more information available about those.

      I hear what you’re saying about the big box, but we needed the space since there’s so much going on in the community. Currently the projects slider has 6 items in it and it would be pretty unusable if we expanded that to 15 or 20 things. Here we’ll have a bigger space to provide that information.

  9. I do like the visual design overall (though the gray dino jawbone at the top is a little odd), but I think the older page was much better at focusing on MoFo’s mission. The new design feels a lot like a product download page instead.

    Between name recognition and it being the central project, some prominent mention of Firefox is probably unavoidable. But the primary focus should be on MoFo’s mission and goals, and that seems missing.

    EG, the visual order seems to go
    1) Firefox logo
    2) headline (easily mistaken as a FF marketing pitch)
    3) buy a t-shirt!
    4) dino-head header image

    Only once you make it past all that do things like the Drumbeat / Design Challenge blurbs on the right get noticed, and I wonder how many people will ever get around to clicking the “learn more” link.

    • cuz84d says:

      I see what you mean the new design kinda lost its mission statements and goals. I noticed the layout change more than anything.

      The We Believe (MoFo) feels like a different message than We’re building a better internet (MoCo).

      Which is more important on this page.. trying to get people involved and understand or showing off products?

    • davidwboswell says:

      I agree with your comment that the primary focus should be on Mozilla’s mission, but that has to be balanced with other information since this is a hub for everything the community does.

      The mission headline is front and center on the page with big bold text, although it is between two strong images. If the text feels like a marketing pitch, we’re going to try a few different things here to see what works best. If the headline had been ‘We Believe in the Open Web’ would your reaction have been different?

      Highlighting Firefox is important because it is a major way we achieve our mission, plus we’ve found out in a recent survey that a large percentage of people come to mozilla.org to download Firefox. Instead of downplaying Firefox I think we can make the connection between Firefox and the mission clearer. For reference, the survey results are at

      http://davidwboswell.wordpress.com/2010/04/08/what-are-people-looking-for-on-mozilla-org/

      For the promo that talks about donating to get a shirt, this is a spot that will rotate with all sorts of contribution opportunities. The fact that it seems prominent to you seems like a good thing to me — we want to be able to get the word out about interesting things going on.

  10. Ken Saunders says:

    I like that it’s more polished looking (I like eye candy), but I certainly agree with others about it losing it’s message.

    In my opinion, mozilla.org should be as much about, if not more about getting people involved with the project, or at least properly informing them why Mozilla exists than trying to expose them to the products that already have their own dedicated marketing departments and efforts driving awareness and adoption of Mozilla’s products.

    Mozilla needs a marketing team to market Mozilla and its mission and purpose(s) to bring more (free) talent, supporters, and contributors in.
    User Engagement may/should help with that, but it’s first and primary focus is on Firefox.

    Leading by example and demonstrating how creating and sustaining an open and accessible Internet for all with products is great, but it shouldn’t be the only means.
    Mozilla.org, as I see it is Mozilla’s other best chance (next to its products) of selling itself.

    But, I don’t see the large box going away so few suggestions/ideas.
    Reduce the size of the icons in the projects box so that SeaMonkey and potentially other items can be included. See http://www.drumbeat.org/ for an example of how to do that.
    Reduce the height of the box and below it, put Mozilla content such as what is first seen on the current home page and below that?

    If a news section has to stay, how about putting up the latest headlines (hyperlinked) from the about:mozilla newsletter? It covers Mozilla and not just one aspect of it and is more user friendly (imo) to those not entrenched in the project.
    That would only need to be 5 or so lines and then offer a link to the latest news page or directly to the online version of about:mozilla.

    ????

  11. Nuss says:

    My first impression was that I think it looks fantastic. The only thing that I found a bit odd is the search button; it doesn’t really harmonize with the rest of the page.

    After reading the above comments and scrutinizing the comparison image, I have a couple of questions/suggestions:

    1. The search box + button seems to not fit in the 1024×678 viewport. Perhaps it will fit anyways, since the layout will be liquid? Else, it is quite an easy fix; there are plenty of unused pixels to the left.

    2. Regarding Kaiser’s and Ardison’s comments above, perhaps the feature area could “rotate” automatically, like, e.g., on Oracle’s start page.

    3. Removing the .org from the Mozilla logo: won’t that be a tad confusing now that the difference between Mozilla.com and Mozilla.org are less distinguishable? Or will Mozilla.com become Firefox.com later on?

    • davidwboswell says:

      Re search box, the header will be liquid so the search box positioning should work out.

      Re rotating the featured projects area, I think that’s a good idea that we’ll do.

      Re removing the .org, the goal is to have just one Mozilla site and to convert mozilla.com to a Firefox site. I think there will be a brownbag soon focused on this and other Mozilla universe issues.

  12. [...] the mozilla.org home page, part 2 There has been a lot of useful feedback about the new home page design and I wanted to follow up on some of the comments, in particular about the balance between mission [...]

  13. Peter says:

    Great that the big black bar at the top will get reduced. :-) (That’s what I complained about before and after the last redesign.)

  14. [...] 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 [...]

  15. [...] For a little over a year after that there weren’t any new efforts to improve the page or promote it more. I was focused on other parts of the http://www.mozilla.org site, such as redesigning the home page. [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 30 other followers

%d bloggers like this: