Facebook Teardown

I’m writing now from cloudy and, only, little rainy Ireland. I have been working on last part of Design block on VCS website. This subject adds extra colours to the everyday weather here. I like this topic very much, except for the discovery part of Web Design. If anyone wants to learn a bit about UX, I recommend this course. Here is my last assignment from Design part.

Discovery & Strategy Part – UX

1. Who is the main user of Facebook?

  • Young and middle-aged people that value sustaining and expanding social connection with other people – especially friends.

2. Top 3 critical goals for that user

  • Connect with friends and stay in touch
  • Share thoughts and multimedia with friends
  • Stay up to date with social and private events

3. Information architecture (it’s just a simplified structure as in reality flows of interactions are looping between many  elements here back and forth)

Facebook IA

4. What is likely to make the top user’s experience particularly satisfying?

  • Quick communication with many familiar people and friends online
  • Clickless way of following social affairs and ‘how are other doing.’
  • Being able to easily and quickly share multimedia with others
  • Easy way of creating events and inviting friends to one

5. To accomplish this goal, how does the user flow through the site’s architecture?

Flow at Facebook

6. What style(s) of navigation is/are used? Do they answer the key questions (Where am I and how did I get here? Where should I go next and how do I get there?)

The home page of logged in user is not only a wall of posts, but also a large interface with a generous number of buttons / doors to different posts, groups, apps, games, people, settings, etc. A user is spared from clicking extra buttons to type as posting and commenting goes through text boxes where the user can instantly write. There are extra buttons for sharing messages or liking which actions are self-explanatory. These main navigation features do not take the user to another page, but rather home page is instantly updated. All these clickable actions don’t change user’s place; rather, the place is constantly being edited by the user any many others like. However simple it sounds, it is not so anywhere further from the main navigation flow (pictured above) as it would involve searching for friends, changing settings etc. – where loosing direction is common. It’s also easy to initiate interaction with posts authors.

7. What does Facebook do well to allow the user to accomplish the top goal effectively, efficiently and with good satisfaction?

The post wall and field for feeding personal posts is a home page – this is a very straightforward solution… Flipping through the friends’posts doesn’t require a single click – only scrolling. When the user is connected with many productive friends, scrolling is never ending entertainment. Contacting recently messaged friends is very simple and one click away. The search bar is very easily accessible from the navigation menu at the top.

8. What does Facebook do poorly when allowing the user to accomplish the top goal effectively, efficiently and with good satisfaction?

It is very difficult to send a message to a friend whose name one do not remember. The user has to look for the forgotten name among friends in his profile – that involves extra clicking and scrolling. When the missing name is known, it is done only by typing the name into the message field “To” and drop down list with suggestions pops down.

Another challenge is in finding a particular post, noticed some time earlier. Unfortunately, once the home page is refreshed or entered again later, certain posts won’t be seen in the same place or order.

Design Part

  1. After squint glance at the page, “who is the most likely user of this page?” – It feels the page is addressed to young audience that is looking for entertainment and social interactions
  2. What is that user’s critical goal on that page?– Entertainment through social interactions
  3. Does the visual hierarchy you sketched lead to that goal?– The main content is always in the center of the webpage, bold and equipped with medium size images or videos. On the side we a have a column with medium images and titles – which are suggestions. There is also a vast number of small elements dispersed on the left, top and right sides.
  4. Do the relationships between the elements lead you to that goal?It does lead me to the entertainment easily, as posts are contrasting with dispersed small elements around (or white surrounding when scrolled down). Posts are in the center and are often aligned closely to an image or video and small profile icon on the top with author’s name.
  5. What font families are most prominent on the page?Helvetica typeface is widely used on the main page. The prominent is the fact it is most widely used typeface in the world. Clearly, Facebook wants to be sure everyone sees it’s in the same way without any loading font issues. Titles and various areas of text are distinguished with a bold, regular, black, grey and blue font.
  6. How do these font families contribute to or take away from the site’s flow?The fact this font is used by every element on the web page creates ordinary and unified effect. It might be another challenge in finding the way back after deep browsing.
  7. How do the line spacings, sizes and weights contribute to or take away from the site’s flow? There are only small portions of text in the majority, adequately distinguished depending if it’s a link, title, menu, etc. Posts are shaped by individual users.
  8. What would you improve to achieve a better hierarchy or flow?Perhaps widening boxes with posts on the wall, reorganizing all the features around them including IA, changing typeface into the modern one, would add clarity, aesthetics and special social ambience. The web page feels packed and outdated. The challenge is that website is trying to serve everybody so is trying to present a little bit of everything. The answer might be in AI algorithms constantly shaping page according to individual user behaviours – but that’s a long way there.


The following mockups are created in Balsamiq. I admit, Balsamiq was the most enjoyable part of all the others in this assignment. In the last few days, I have learnt a lot about this piece of software. I recommend it. The workflow is very intuitive and in few minutes a simple small website can be created as a mock up. This knowledge would had saved me a lot of time in the past as I built few simple websites on frustration caused by constant improvements, resizing elements, changing colours etc. Naturally – construction was based on presumptions and feelings “this will be great”. So here we have the Facebook pages: Log In, About Me, News Feed, Photos, although this is just a replica of the original page, it’s no more messing around with unmeasurable concepts.

This slideshow requires JavaScript.


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 )

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