In this project, you'll be able to try out everything you've learned in this mini-course. In the first part, you'll be asked to do a UX and design teardown of Facebook and in the second part you'll be asked to mock it up.

Facebook Teardown

The first step of this project is to go to Facebook and think of it like a designer would. You'll tease out what it does well and what it does poorly while applying the same approach we've discussed in previous lessons.

Facebook is a huge application and you certainly don't need to go poking around all its corners. We'll try to stick with the main use cases and sections of the site. If you find yourself being pulled down a rabbit hole investigating some tangential feature (e.g. privacy settings), rewind and start again with something more obvious.

Note: You'll need to have a Facebook account for this so you can properly log in. If you're adamantly anti-Facebook, then instead of following the pages we'll be mocking up, follow their signup flow and critique that.

As with the other teardowns, these can make good blog posts if you have a blog of your own. Send us an email if we can include the link to yours here.

UX

This shouldn't stretch your imagination too much since you are likely the user!

1. Who is the main user of Facebook?
2. What are the top 3 critical goals for that user?
3. What is the site's approximate information architecture? (in general -- don't get caught up in the details too much)
4. For your top user goal, what is likely to make the user's experience particularly satisfying?
5. To accomplish this goal, how does the user flow through the site's architecture? (ie. which pages are visited and what are clicked?)
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?)?
7. What does Facebook do well to allow the user to accomplish the top goal effectively, efficiently and with good satisfaction?
8. What does Facebook do poorly when allowing the user to accomplish the top goal effectively, efficiently and with good satisfaction?

Design

Pages

For this section, we'll focus on several of the key pages on Facebook:

1. Home page (when logged out)

   

2. News Feed page (after logging in)

   

3. Profile page

   

4. About page

   

5. Photos page

   

Your Task

1. Go to each of the links above and immediately squint your eyes so you can't really see what they say.
2. Sketch on a sheet of paper what the approximate visual hierarchy looks like -- what areas are denser and what areas are more sparse?
3. Open your eyes and ask yourself "who is the most likely user of this page?"
4. What is that user's critical goal on that page?
5. Does the visual hierarchy you sketched lead to that goal?
6. Do the relationships between the elements lead you to that goal (remember your CRAP principles)?
7. What font families are most prominent on the page? (use the WhatFont add-on or your browser's developer tools to inspect this).
8. How do these font families contribute to or take away from the site's flow?
9. How do the line spacings, sizes and weights contribute to or take away from the site's flow?
10. What would you improve to achieve a better hierarchy or flow?

Mockups

Now that you're intimately familiar with each of the pages in the previous section, turn each of them into a mockup in Balsamiq. That's it!

Don't worry about getting all the color schemes right or including absolutely every element or icon. This project is really about becoming familiar with mocking up pages not going overboard with the details.

Submission

If you'd like to submit your solutions so other students can see them, upload your files to your own Github repo and add the link to it to our public solutions repo right here.

The checklist of files to include in your repo would be:

1. Answers to the UX questions and any digital flow diagrams you might have included. You could include a cell phone picture of any hand-written diagrams.
2. Answers to the design questions for each of the pages and any digital diagrams (e.g. for visual hierarchy) you might have included. You could include a cell phone picture of any hand-written diagrams.
3. Mockups for each of the pages, ideally in .pdf form (so people without Balsamiq can view them).

Don't remember how to do a Github pull request? Go back to the previous mini-course's project on Git and the Command Line. You can add any type of file you want to a Git repo, not just text files.

Additional Resources

• Charley Ferguson's Facebook UX teardown for this project
• Charley Ferguson's Facebook Design Teardown for this project
• Charley Ferguson's Facebook Mockups for this project
• Dariusz Biskupski's Facebook Teardown project
• Edmuno Rubio's Facebook Mockups
• Austin Smith's Facebook Mockups and Teardown
• Daniel Johnson's Facebook Teardown
• Gregory Alford's Facebook Teardown
• Bob Marley's Facebook Teardown and mockups

• How to Improve Home Pages will provide some inspiration for potential change suggestions.

Sorry, comments aren't active just yet!