Balsamiq · UX · Viking Code School · Web Design

Tearing Down & Mocking Up Facebook with Balsamiq

This is the final project for the Web Design Basics course of Viking Code School’s prep work. The project involved doing a UX teardown of Facebook, followed by a design teardown of five of the main pages (home page when logged out, newsfeed when logged in, profile page, about page, and photos page), and, finally, a mockup of the same five pages.

Part 1 – UX Teardown of Facebook

1. Who is the main user of Facebook?

Any person with internet access who wants to connect with friends or family in a social setting. The way in which users utilize Facebook differs widely, but they all want to connect to other people in some way for some purpose.

2. What are the top 3 critical goals for that user?

The top three goals of a Facebook user include:

  • Viewing and interacting with posts and information about people in their lives, including friends, family, acquaintances, school colleagues, and coworkers.
  • Sharing photographs and viewing the photographs of people with whom they are connected.
  • Communicating with others via comments and private messaging, as well as sending and accepting invitations for events such as friend meetups, parties, family gatherings, school activities, conferences, etc.

3. What is the site’s approximate information architecture?

FB Info Arch

4. For your top user goal, what is likely to make the user’s experience particularly satisfying?

Facebook’s newsfeed does a good job of presenting a continually updating stream of posts from friends to help you view and connect with what they are sharing. Allowing personalization of this newsfeed by choosing which friends to follow and which to display more prominently improves user satisfaction. The ability to comment and like allows for interaction with the post and further engagement.

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

FB flow

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?)?

All of Facebook’s main pages are easily navigated to and identifiable. To access the profile page of an individual, all one has to do is click on their name or profile thumbnail on a post, a comment, or a tag in a photo. From there, the user can view posts by that person, their photos, and their about information as long as the privacy settings of the user and their connection status to the user allows them. The main navigation bar at the top always allows one access back to the home page (newsfeed) via the icon. A navigation menu on the left side allows access to secondary actions such as viewing, creating, or accepting invitations for events, interacting with groups, and accessing the private messaging and chat features. It is very easy to determine where one is at any given time.

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

There are several things that Facebook does that allows for great connectivity and helping the user accomplish their top goal. The newsfeed described above and interconnected profile pages is the backbone of the social network. Users can comment on a post or photo, reply to an entire comment thread or an individual comment, and like posts or photo (even choose an emotion). Users are further connected by being able to tag photos of their friends in photos they post. The information architecture of the site has been finely tuned over the years to make all of these actions easy and efficient. The main newsfeed is an infinite scroll and encourages users to keep viewing further posts and articles.

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

There is not much I can criticize about Facebook’s ability to meet the first goal. While some updates do add to the effectiveness of the site as new features develop in social networking, overall Facebook does a great job for its intended purpose of connectivity. The advertisements that appear within the newsfeed distract the content the user is seeking, but as the application is free to use and needs ads to create revenue, it is an understandable detraction from the user experience as long as it does not become overwhelming.

Part 2 – Design Teardown of Facebook

Before answering the questions below, general sketches of the layout of the home page when logged out, newsfeed when logged in, profile page, about page, and photos page were made.

1. Who is the most likely user of this page?

Anyone looking to connect socially with people they know, such as friends and family.

2. What is that user’s critical goal on that page?

Home Page (logged out): The user is either new to Facebook and signing up for an account, or is someone logging in from a computer they do not usually use (many users save their log in details on their personal computer and stay logged in).

Newsfeed: The user is a member of Facebook and their goal is to view content posted by their friends and liked pages.

Profile Page: The user’s goal is to view someone’s main page, including posts they have made.

About Page: The user wants to view further details about a particular person.

Photos Page: The user is looking to view photos of a particular person or photos a person has posted.

3. & 4. Does the visual hierarchy you sketched lead to that goal? Do the relationships between the elements lead you to that goal?

Home Page (logged out): The input form to sign up for an account is prominently featured in the center right of the page, while fields to enter your login information are shown at the top right. Both help to bring attention to the user’s main goal of either signing up or logging in to their account.

Newsfeed: The newsfeed layout is well done with all of the posts centralized in an infinite stream that leads to the goal. Secondary options, such as viewing events, groups, etc. are in a column to the left, notifications and the search bar are in a top bar, while ads and owned pages (if applicable) appear in the right column.

Profile Page: A large cover photo and smaller profile photo accompanied by the person’s name directs the user’s attention to whose page they are viewing. The navigation bar and the two columns of content help direct the user to the goal of viewing that person’s posts.

About Page: The about page organizes specific elements of the person’s details for easy navigation (left column) and viewing (right column).

Photos Page: Large photo thumbnails are displayed in a grid of uniformly sized squares that fill with the person’s photos, streaming back to the earliest available. There is almost no text featured. This layout caters to the goal of viewing a particular person’s photos in an almost exclusively visual fashion.

5. What font families are most prominent on the page?

Helvetica – throughout most of the site

Freight Sans Bold – on the home page (not logged in)

6. How do these font families contribute to or take away from the site’s flow?

The website almost exclusively uses Helvetica throughout. This is a very common and suitable sans serif font choice that allows for easy reading. The only place I found a different font used was on the home page where it prompts the user to sign up for an account. The “Create a New Account” and “It’s free and always will be” header and sub-header are displayed in a font called Freight Sans Bold. The green call to action button below the form to “Create Account” is also featured in this same font. This was an obvious design choice by Facebook to make the landing page more attention grabbing and visually appealing. Although both this font and Helvetica are sans serif, this separate font catches the eye more in a subtle, yet important way.

7. How do the line spacings, sizes and weights contribute to or take away from the site’s flow?

The line spacing seems standard and makes the text easy to read. Instead of using solid black, text on the home page is displayed in a dark gray (#333333), which allows for better readability against the light blue background.

Text in the post stream is displayed at a normal weight, 14px size, and a dark gray color (#1D2129). All of these qualities lend to a very readable text that allows the user to effortless scroll through the posts. The bold names of the users or pages that post each comment are displayed next to a square thumbnail of their profile picture. This text appears as a bold weight, 14px size, and a dark blue (#365899). This is slightly different than Facebook’s signature blue (#3B5998) color that displays in the main navigation alongside white (#FFFFFF). The use of the bold and dark blue for the user/page name highlights the author and also indicate to the user that this is a link that can be followed to their profile or company page. The use of the other blue and white in the navigation bar and throughout many of the menus on different pages, creates a two color theme that has come to be strongly associated with Facebook.

On each profile page, the name of the person is displayed with a bold weight and 24px size to highlight this information to the user. Many subject headings for the different category boxes appear at 16px, slightly larger than the standard 14px size post text.

8. What would you improve to achieve a better hierarchy or flow?

Facebook has undergone many changes and updates since I first started using it in 2006. The website has continually improved to adapt to changes in the use of technology, especially with the adoption of smartphones within the last 10 years. I can’t find much within the layout, color, fonts, or structure to criticize except for one element on the home page before logging in. There is a large blank space that appears in the bottom left that makes this page feel unbalanced, the entire form and call to action appearing to the right. It is possible this was done to draw more attention to the informational links on the footer menu or highlight the title “Facebook” in the top right.

Part 3 – Mockups of Facebook

The last portion of this project involved mocking up the five pages discussed above using the program Balsamiq. This was my first time using Balsamiq and I am so glad to have learned this software for future web design. The program allows for a very fast and efficient way to create useful and effective mockup designs of a website before entering into the production phase.

FB Home Page
Mockup of the Facebook home page (logged out).
FB Newsfeed
Mockup of the Facebook newsfeed.
FB Profile Page
Mockup of the Facebook profile page.
FB About Page
Mockup of the Facebook about page.
FB Photos Page
Mockup of the Facebook photo page.

One thought on “Tearing Down & Mocking Up Facebook with Balsamiq

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