The Redesign: Round 1

The following is a guest blog post from Happy Cog that provides some information about each of their initial designs for Please feel free to provide feedback on this blog post, at Thursday’s design lunch or on other places.

Redesigning to be a worthy showcase of what Mozilla stands for is an exciting project. Opening these designs up to the Mozilla community for feedback is a humbling task, but the rewards of a larger collaborative endeavor ultimately benefit us all. Exposing these designs at an early stage in their development creates a powerful communication channel to help us find out what works, what doesn’t work, and start an open dialog with the community.

The work we are presenting reflects the direction established by the community and has been articulated in the Big Picture document on the Mozilla wiki. Please give it a read – and also take a look at the Communication Brief that details Happy Cog’s understanding of the project goals. Even at the early stages of this project, Happy Cog is elated to be working directly with the Mozilla team and community and bringing to life an important site in the very awesome and ever growing Mozilla universe.

Concept 1: Established and Progressive Mozilla
Concept 1: Established and Progressive Mozilla

The content and purpose of the current is cloudy. Is this site a portal for those who are looking for something else? What do we want users to take away from a visit to this site? Do folks understand this is an established organization with clear goals that effect internet users on a worldwide scale?

This design attempts to establish Mozilla at the center of all those ideas; global, trusted, and a progressive open community that wants each and every web user to understand their values and contribute in some way.

Concept 2: Constructivism Goes Mod
Concept 2: Constructivism Goes Mod

The brand identity of Mozilla was built on the idea of “Revolution” but what if the “Revolution” was over? What if Mozilla was now the ideal – the utopia of software creation? What if Mozilla was the victor in all-things-internet? Can constructivism reinvent itself as modern movement?

This concept attempts to evolve the constructivist aesthetic into a postmodern style that would make artists like Robert Rauschenberg proud. Mixing oil paint, stenciled images of the Dinosaur head, and numbers that act as interactive elements and various visual ephemera result in an extension of the Mozilla brand look-and-feel that plays homage to the assemblage and collage work the some of the finest modern abstract painters.

Concept 3: The “Do you like me? Circle yes/no” concept
Concept 3: The “Do you like me? Circle yes/no” concept

How can we make the learning experience of Mozilla as easy as clicking one button? Can this action also help to build upon the idea that all-things Mozilla are driven by the actions of the community?

This concept approaches the idea of a low-barrier entry as an interactive question that allows users new and seasoned to help shape content that matters. Visually, the look is a weathered take on the constructivism aesthetic.

The floor is now yours. Let us know your thoughts on these solutions. Are the concepts solid? Is the content engaging? Should there be less products, more news? Or more products and less news? Is there something about the community that isn’t being represented that you would love to see?

Drop us a comment and let’s start the conversation…

22 thoughts on “The Redesign: Round 1

  1. Concept 1:
    The header is so large, had the same problem in the past. I have to scroll down to get to the application downloads (maybe someone can implement metrics to check how many visitors use one of the download pipes of the current page). Furthermore, the news shouldn’t be limited to one line. This way you have to guess the news. An abstract would be better.

    Concept 2:
    Large header, bad accessibility and introduction for new users: Only the application icons are used. IMHO, there should be a “Get Involved” page and not a simple link list of Mozilla related pages.

    Concept 3:
    IMHO the best one, but same problem with application icons. Furthermore, the header is probably an action only a tiny number of people will us (and who will manage/work with that feedback? Have a look at hendrix).

    People come for two reasons to
    1. Getting software.
    2. Getting information about Mozilla and maybe getting involved. So Maybe two or three column (including the news) would be useful.

  2. I also like the first concept, it looks great on my 21″ (1680×1050) big display. It probably looks even better on the 24″ (1920×1200) I used to work for the last few months 🙂
    Don’t forget that most of the people out there have displays with a resolution of not more than 800 pixels vertically (1024×768 or 1280×800). The need to scroll down to see more information is IMHO a bad user experience…
    I guess shrinking the height from the top of the site to the top of the “our product area” by 50% would solve that problem.

    An other problem what I think some people will see: what I like about the “Firefox-globe” is, that it doesn’t show the Earth, and in conclusion it doesn’t favor any country or continent. Showing a globe with North America may result in people not thinking/believing that this is a global project.

  3. #1 feels light and clean, but something about the header text (“Open Source Is Better*”) and globe rubs me wrong… Feels rather plain and corporate-y. Nit: The asterisk makes me think “756 home runs*”. 🙂

    I generally like #2 as well, it’s got a bolder design and some spirit behind it. The “123” thing doesn’t work, though: What’s the twentythree for? Oh.

    #3 is a little too cutesy and trite.

    I like the design of #2 best, but the content of #1 seems to do a slightly better job of explaining Mozilla (although none really seem to excel at that).

  4. Concept 1 – This one does the best at articulating what the Mozilla brand stands for: open source is better. It’s direct and self-confident, unlike Concepts 2 & 3. Concept 2’s primary message is “support” of the “health of the internet”. ‘Support’ puts Mozilla in a passive or secondary role, while ‘health of the internet’ is vague enough to be meaningless to the average user. Concept 3 leads with a question, not a message or identity. “Enrich” is a PR word, an empty signifier. Concept 1 wins hands down on confidently communicating what Mozilla is and believes in… except for that ludicrous asterisk, which undermines the strength of the statement — axe it.

    The fonts used throughout Concept 1 are also superior, fonts on Concept 3 probably the least compelling (too casual).

    Instead of showing individual applications, you might instead point to Mozilla community projects: Firefox, Mozilla Messaging, Mozilla Labs, SeaMonkey, Flock & Camino. That way the presentation isn’t application centric, but sub-community centric.

    I agree with Archaeopteryx that Concept 1 has too little above the fold, which will be frustrating to repeat visitors. But I disagree with Archaeopteryx about why people will be coming to the redesigned I don’t think the primary purpose is to download software (that’s now for and other specific project webpages). Reason #2 is on the mark though. And if is to serve as a community hub, all three designs ought to have more space devoted to news (although I’m not sure if *three* columns are necessary or advisable).

  5. Design #1 is great, but it makes me think I’m on rather than on – what I like best from this first design is the prominent inclusion of the Mozilla principles (makes me want to go reload the page to see which others show up) and the “we’re a global community of thousands” text. Entirely too much prominence is given to the products, though; I don’t think they belong that heavily on that page.

    I like the overall style of #2 best. It’s bold and in your face and entirely Mozilla, even despite the lack of dino bold black and pure red (I guess orange makes for a good substitute). The opportunity / openness / innovation keywords corresponding to the numbers is sadly entirely unclear, but I have quite a bit of faith in that being fixable. Of the three designs, this one gives most prominence to the main menu, which I think is great, because the pages behind those menu items are really what people will be coming to for. I don’t think the header works quite as well on the subpage with the ‘cutout’ from the orange, but that might grow on me yet.

    Design #3 leaves me indifferent, but I do like the inclusion of the “About the Foundation” and “The Mozilla Community” texts. The “answer” header is cool, but I doubt if it’ll have staying power. Great way of getting people to learn about and engage with the manifesto/principles though!

  6. Number 3: We’re not an institute for public polls. It looks more like a site for a single campaign than a entry page.

    Number 2: I liked the initial start, but the developer page got me all fragmented. Navigation, color, visuals, all left and right and top and bottom and cuts. The 23 didn’t make any sense to me until I read dolske’s comment ;-).

    Number 1: The planet kicked me off immediately. Planets are bad, because they’re never in your perspective. “Yeah, right, you’re global like George W.” would probably the immediate reaction to that, and likely any other globe in that size. Animating it to show the earth rotating might ease the pain, but I’m not sure it’s worth it.

    I did like the navigation and information presentation on number 1, though, in particular the follow up page without the planet won me over.

    Regarding most, I’d prefer to talk about products and projects instead of just products. Products is moco and momo, and not

    I’d feature the Foundation alongside the projects and products, or at least have the non-software projects like education follow up on the same level.

  7. I like the first design the most.

    But if it was to be chosen, the earth shouldn’t stay US-centered. Make it spin slowly, follow the time of the day or something 🙂

  8. I like the second one a lot. The first doesn’t really say “Mozilla” to me at all, an the third is just too visually chaotic, trying to do way too much at once.

    The blue/orange is leaning pretty heavily towards “Firefox”, however — maybe a different colour combo, or something at least less …blue? Blue/orange = Firefox, where Mozilla used to be black/red…if that’s no longer the case, maybe find something other than blue/orange?

  9. *great* to see these.

    I know these are concepts, not final copy. Even so, people remember the words. So I’d like to suggest that the overall mozilla message isn’t completely captured by “Open Source is Better.” That’s part of it, but not all. We’re a public benefit open source project trying to build an open, participatory Internet.

    I like that the phrase you have is clear and assertive. Felt compelled to note I don’t think it’s the full story.

    Something that captures all of this “Public Benefit Internet”

  10. Concept 1 reminds me of the awful green “Bondi blue” of the original iMac that quickly became so dated in the late 1990s. Not at all the feeling what we want evoke with (after all, is still here, and Bondi blue and CRT iMacs are long, long gone). The page feels like it says altogether too little, the massive globe is a distraction, drawing focus away from the content (and, as others have noted, a slight/snub to non-North Americans). The most authentic element in the design, the red dino head, manages to look completely out-of-place. 😦

    I think I like Concept 2 the best, although it’s not without faults. It has the right “feel” of to me, though the color scheme is off for Less blue, more red. There’s not enough info/text above the fold here, either (even pretending that the fold in the screenshot is the fold in most people’s browser windows). And how did Concept 2 end up with lorem ipsum when the other two got real text? OTOH, this one looks a lot less busy than Concept 1.

    Concept 3 reminds me of some sort of teen/college party flyer, and the top banner takes up way too much space while turning me off. The products/projects box feels out of place and too “heavy”; it encroaches on the text content. The text content seems the best here, though.

    Can we take the design of Concept 2, the text from Concept 3, a little sizing-for-scale, some more red/black, and mix them all together? 😉

  11. Something I find quite fascinating is how the comments on this blog (the main entry into the design process for people coming from differ from those at (which is what links to). There very much seem to be two distinct audiences giving feedback…

  12. Of the three I prefer the third one the best, but I don’t particularly like any of them — the colors are all too dull, unsaturated, and just blah. The third one, at least, is a little bright, but frankly, the colors of the icons almost provide more of the liveliness than the design itself does.

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s