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
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.