November, 2011

Nov 11

Five Years at Mozilla and Moving On

A month ago I crossed the five year milestone at Mozilla, and my first post on this blog was exactly five years to the day.  I’ve recently decided to move on from the corporation to try out design work in an entirely different space.

It’s been a tremendous honor working with all of you.  Every top tech company has people who are brilliant, but few have people who are so warm, so kind, and so incredibly passionate.

This blog chronicles all of my design work over the years.  I’ve recently posted a look at some of the crazier conceptual work we’ve done.  I’ve also posted a talk I gave at PARC on the eve of the Firefox 4 launch that reviews why Mozilla exists, our design philosophy, and a comprehensive look at some of the specific principles that have guided the design of Firefox 3 and Firefox 4.

Some highlights from the last five years:

Firefox 3:
-Interactive design of the awesome bar
-Designed the one click bookmarking interface
-Art direction for every visual resource in the application
-Created an iconic form
-Managed a refresh of the Firefox icon

Firefox 4:
-Visual and interactive design of Sync
-Design of a new notification system
-Design of a new command structure with the Firefox button, leveraging usage metrics

I’ve spent 1/6 of my life working on the design of Firefox.  For the past five years Mozilla has felt like home, and the people here have felt like family.

I’m incredibly proud of what we’ve achieved.  It’s been an amazing adventure.

Nov 11

Talk at PARC: Designing Firefox

Other formats (all 720p):





I gave this talk at a BayCHI event at PARC on 3/10/2011.  Steve Williams over at the CHI Conversations Network provides a nice intro:

“While much open source software suffers from poor design and usability, Firefox shines. What makes the Mozilla community different? With great branding, usability backed up by research but tempered by realism, and a powerful extension architecture, the Firefox web browser claims 400 million users. On the eve of the release of Firefox 4, Mozilla designer Alex Faaborg covers the unique challenge of coordinating user experience design in an open source community, important features of past versions, and the future of the Firefox interface.”

It was a fantastic opportunity to be able to give this talk to a large section of the Silicon Valley design community.  Also looking into the audience and seeing Don Norman smiling was one of the more rewarding moments of my design career so far.

Nov 11

Cutting Room Floor

Design is a very lossy process, and there are a lot of good reasons why a piece of design work might not be released to users.  Sometimes a design is cut due to the natural triage process of focusing on top priorities and trying to ship on time.  Sometimes a design is cut because in retrospect, it really isn’t the best solution to a problem.  And sometimes a design is cut because it was only intended to be a conceptual exploration, like all of the concept cars that are created to help shape the design of future products.

This post features some of the crazier concepts that we never rolled out, and highlights some of the stranger scenes that we have on the cutting room floor.

Nightly Build Icon

I provided art direction for this 2009 candidate aspiring to be the new nightly build icon.  It was humorously rejected by the other product drivers for being “too dramatic.”  I continue to contend that the planet is definitely forming as opposed to exploding, but as a still image, the trajectory of the continents is arguably up for debate :)

Visual design was done by Joy-Vincent Niemantsverdriet of Sofa.  The objectives I gave them were to create an icon that visually conveyed danger and an incomplete product (at the time Minefield was still full of mines).  I also wanted them to base the work on paintings like Castle of the Pyreness by Rene Magritte, or this image from the French anime Skyland.

Stealth Theme for Private Browsing

This is one of my favorite design ideas, but as a low priority feature it has also now missed every major release (Firefox 2, Firefox 3, Firefox 3.5 and Firefox 4).  As an ambient, peripheral, and constant indication of being in private browsing mode (or ideally opening a private window), Firefox transitions to a dramatically darker theme.  This is meant to invoke connotations of day/night, or for the more militaristic, a stealth fighter.

Visual design by Stephen Horlander.  You can also view an updated mockup based on the Firefox 4 theme that he created as well.

Fluffy Pie Menu

Interactively this pie menu does what pie menus are good at, it provides visual feedback for a mouse gesture (in this case browser navigation).  But what I really like about this particular pie menu isn’t what it does, but how it feels.  It’s fluffy, it’s soft, it’s friendly.  It’s like interacting with a happy cloud.

I provided art direction, and the visual design was done by Mozilla intern Wei Zhou.  This design work was purely conceptual.

Immersive Full Screen Mode

Again purely conceptual design work, this was an immersive full screen mode, where the site’s aesthetic dominates the entire browsing experience.  Visual design was done by Mozilla intern Wei Zhou.  To correctly build this type of overlay various Web sites would of course need to be expecting it, which is a technical challenge.  This design work did however later inform how we approached overlaying the browser’s control scheme on top of personas in Firefox.

Bugzilla Theme Refresh

I spend a significant part of each day living in bugzilla.  As you can imagine, I’ve had some time over the years to daydream of a more elegant and streamlined interface that is easier for users to very quickly visually parse.

As an advanced tool for organizing software development, bugzilla isn’t meant to be simplistic.  It’s like a DLSR camera, consisting of a dense set of controls meant to be quickly and easily accessible to highly trained users.

But that doesn’t mean that users (including the highly trained ones) should arrive at a bug, and have absolutely no idea what is going on.  This redesign of bugzilla uses color exclusively to represent value (positive, negative, in transition).  This makes it easy to figure out the current status of a bug (status, assignment, commitment) at a broad glance, including peripheral vision.

Additionally, while it keeps controls in a mostly consistent position for the thousands of users already acclimated to interacting with bugzilla, this design provides enough visual structure to organize areas of UI around the core journalistic questions (what, who, when, how).  This makes it easier for users to answer specific questions about a particular bug.

The design focuses on clean stark lines, and emphasizes data (like bug summaries) over metadata (like bug numbers).

View the full mockup

Many of the same design principles were also used to redesign the interface of HTML bugmail messages.

View the full mockup

Command Blocks

This was an exploration of how we could turn the location bar into a sort of modern graphical command line, building on the work of Mozilla Lab’s Ubiquity project.  We explored exposing the selection of various commands through both mouse and keyboard input, and providing rich results based on the activated command block.

This is a visual design for the command blocks that I worked on with Stephen Horlander:

Graphical Keyboard User Interfaces

These mockups are a series of explorations into creating graphical keyboard driven interfaces.  Designed as accelerators for advanced users, these mockups re-imagine functionality that exists elsewhere in the browser.  The resulting interaction is fast, transient, and provides keyboard users with a level of visual exploration and feedback that is uncommon to standard keyboard shortcuts.

Detailed post about the common tradeoffs between mouse driven and keyboard driven interfaces

Searching the Web:

Bookmarking and tagging a page:


Browsing your Personal Web

This is a conceptual redesign of bookmarks and history in Firefox that focuses on leveraging the core browser controls (location bar, navigation controls, content area), to blend navigating bookmarks and history with browsing Web content.

In this model, users can navigate to an existing collection of bookmarks using the location bar, just as they would navigate to a Web site:

These bookmarks then are displayed in the content area of the browser:

Read an extended discussion in a blog post about the idea.


Isometric Pixel Art for Prism Apps

Mozilla Lab’s Prism was created to frame Web applications as equals in the desktop environment. This quickly introduced a problem for the project: most Web applications only have a 16×16 favicon, and desktop applications, particularly on OS X, require icons that are at considerably higher resolutions.

Leveraging a nostalgia for the 8-bit age, I embraced the low resolution nature of favicons, and converted them into isometric pixel art.  The image below is an actual screen shot as opposed to a mockup.

This was also one of the very few times I sat down and wrote some code to get an idea across.  While a cool idea, the apps team at Mozilla is now defining a manifest file for applications to package their own high resolution icons, so the overall problem of only starting with 16×16 icons now no longer exists.


Those are the highlights of the design work that didn’t make the cut.  In each case there were good reasons for us not to move forward, or just not to move forward yet.  Even if these concepts never get deployed in Firefox, ideally they’ll spark even better ideas in the future.