aleks Gorbenko

aleks Gorbenko

{a_G} | Meditations on Strategy and Tech

05 Mar 2016

[VCS Prep-Work] Tearing Down and Mocking UP Facebook: UX & Design Part 1

I am currently going through the Prep Work of the Viking Code School (VCS). I thought it would be a good idea to document the assignments online.

This assignment is a part of the Design mini-course. It is the first part out of the 3 tasks. Below is the part 1 which consists of 8 high-level questions. Part 2 involves a deeper analysis of 5 Facebook pages and building their mockups.

Who is the main user of Facebook

A female or male person, in the age group from 25 - 54 years old.

The estimate is based on this Tech Insider data. Most of the users are aged 25-34 (22% of all users), followed by the age group 35-44 (19%) Data is for US only. Aged 45-54 - 18%. Millennials do use Facebook too, but, it’s safe to assume that the “main user” is aged between 25 and 54 years old.

What are the top 3 critical goals for that user

1st - see the newsworthy updates of friends in a form of visual information (pictures, videos) or text.

2nd - share the news with friends in various media format - text, picture, video, etc

3rd - communicate via other users via chat tool

What is the site’s approximate information architecture

Homepage –> sign up/sign in –> Timeline, User Profiles & Posts, Search Box, Chat, User Groups/Events/Apps.

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

The ability to see and absorb the newsworthy information about other users quickly and easy.

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

If the user doesn’t have the account - he has to create one, which he can do easily on the homepage with a straightforward form completion. After logging into the user account, user is presented with the News Feed featuring the information that other users have posted. At this stage main user interactions would be:

  • Scrolling the news feed and reading/looking at pictures
  • Interacting with the posts in the following ways:
    • “Liking” the post/picture
    • Commenting the post/picture
    • Sharing the post/picture in the user’s own News Feed or friends' News Feed
    • Users can also click on the post itself to either open a link in a new window, open a picture in a soft-box (with more visible comments)
    • Visiting other user’s profiles by clicking on the usernames that are attached to posts
  • Updating user status (can be called posting) featuring picture/text/link
  • Start a chat with another user
  • Use a search  box to search for a user/event/person/page
  • Visit the users own private News Feed

It seems that the main architecture information model is in “Hub-and-spoke” or “daisy” pattern.

The News Feed is the central page and serves as a default return “homepage” for a user who is logged in (the fact that in the top NavBar this page is called “Home” also supports that)

What style(s) of navigation is/are used? Do they answer the key questions

One of the main navigation styles is the top NavBar, containing the search box, User Profile, Account Settings, Notifications of messages and other user activities.

Next navigation style is the actual News Feed. As we have established that one of the most prominent AI elements is the News Feed - users are highly likely to start scrolling it after logging in. The scrolling is continuous and loads asynchronously (AJAX) - hence, it can be considered as a separate navigation style.

There are two secondary navigation styles:

1st - the chat window to initiate the chat with other users

2nd - the left vertical NavBar - it is clearly de-emphasised from the rest of the page by being in the grey background, whereas other page elements are on a white background (Personally, I barely use it. I am not sure what is the engagement rate with this NavBar, but I wouldn’t be surprised that it is not high)

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

To recap, we have identified that the top goal is:

“to see the newsworthy updates of friends in a form of visual information (pictures, videos) or text.”

Effectively? - Yes, in most cases. After logging in the user is presented with the News Feed that is a mash of the posts generated by user’s friends, pages that the user is following and…sponsored ads. It got improved since the end of the of 2014, but still I find quite often the ads being irrelevant and obtrusive.

It is still easy though to meet the main goal - seeing more content - as easy as just scrolling down, while the page keeps loading more posts below.

Efficiently? - In short: Yes. I think Facebook is quite robust and  the loading speed of the site is quite good from the UX point of view (once again this is a personal opinion). From a technical point of view it scores pretty darn well it speed tests too!

Satisfaction? For the most part - yes. As the main goal is met quite easily - the overall experience is satisfactory.

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

The sponsored ads are probably one of the most visible obstacles on a user’s way to accomplish her top goal as often they can become quite obtrusive (especially if they are irrelevant).

Secondly, (I find it a little overwhelming sometimes) the amount of events that your friends are “interested in” or “attending”, which tend to appear quite often in the news feed. I think they could do a better job at matching user’s personal interests with the nature of the events and display these type of posts if they are relevant to that particular user only.

This completes the first part of the Design assignment. On to the 2nd part!