iA’s 2006 Facebook Designs, Redesigned

From December 2006 to February 2007 we were in touch with the product manager of Facebook. The prospective: Redesigning Facebook. Eventually. Since the contract was never signed, we kept our designs in the drawer. Until now…

As you might have noticed already, the following two screens are not the exact designs from 2006. The web is not the same anymore and neither are we. In order to have a fair comparison with Facebook’s current design, we adapted our sketches to contemporary design standards. In spite of the thick layer of makeup, the underlying wireframe and the information design principles are still exactly the same. If you click on the images you’ll get the 1:1 design scale.

By default you can only see two comments per feed entry. In order to see the full commenting thread you need to click on either the feed item or the comment block. These two images illustrate that behavior.

The Layout

Our basic idea: To create a mail application-like interface with an elastic three-column layout that clearly separates filter, information stream, and reaction:

1. Filter: The left column works as a sorting instrument
2. Information Stream: The center column shows the filtered results
3. Reaction: The right column is used for discussing the individual feed items

Depending on what menu point you choose (news feed, messages, pictures…) the information design would adapt, but the three-column layout, separating filtering, reading, and reaction would be kept for most sections. For example: If you choose the menu point “Messages” on the left you would see:

1. Submenu with Inbox, Outbox, Drafts, Trash, etc. (left)
2. The message-header and the first two lines (center)
3. The full message with an entry form for your reply (right)

Information Design

If you compare our sketches to the actual Facebook design as it is online right now you will find that:

1. The brand has more room
2. The feed has more room
3. The discussion has more room
4. All main navigational elements are grouped together
5. There is less trapped white space
6. The right column is not the usual flea market
7. The advertisement is more prominent

For a fair comparison you need to open one of the two images in a new browser tab next to the actual Facebook site. Here is the abstract comparison—the current Facebook design on the left, iA’s redesigned 2006 concept on the right:

Of course, at the time we thought that a three column layout was the coolest social network layout ever. In the mean time there are several applications that use the trick—among others the very popular Outlook Express. There is much more to say (scrolling behavior, scaling, where are the requests, what happens if…) but I don’t believe in long blog entries… However I’d really like to get a quick nod from you: Thumbs up or thumbs down?