Assignment from Viking Code School Prep Work: Twitter, Airbnb, and Amazon UX Teardowns

This is my Viking Code School prep work UX teardown for twitter, airbnb, and amazon.  This post is different from my usual posts, as it is intended to be shared, unlike my other posts, which are more like personal notes.  As such, I won't include any of my coding stats on this post, but I'll go back to doing so after this post.  

One thing that was made plainly obvious while doing the UX teardowns of these three sites was that the design of these sites facilitates their key user's critical goal.  Another thing I noticed is that all three of these sites depend on user-generated content.  All three of these sites provide a platform that is then filled up by buyers and sellers, or in the case of twitter, by readers and writers.

These sites are very successful, they have been carefully designed to facilitate certain critical goals, leading to exponential growth rates.  Also, my first information architecture sketch was done with pencil and paper, but the second and third sketches were done using Balsamiq, which produced far more useful end results.

O.k., here goes!

Twitter UX Teardown

1. Who is the key user? This isn't always clear, especially in marketplace sites, so take your best guess.

People who enjoy consuming and creating microblog content.

2. What is that user's number one critical goal when using the site? Be as specific as possible if there are multiple options here, e.g. "to purchase a red wagon" instead of "buy a toy".

The user's goal is to consume and create microblog content. Twitter limits you to posts of 140 characters or less.

3. What is likely to make that user's experience particularly positive (i.e. provide good satisfaction)?

Easily being able to update content on a user's microblog and the ease with which the user can follow other users' microblogs.

4. What is the approximate information architecture of the site? (sketch it out)

Drawing that took a while and my desk is now covered in pieces of used up eraser, pencil shavings, and lead, haha.  I'm going to try using Balsamiq to do this for the next two UX teardowns, to see if that's faster, now that I know how to use that tool. 

5. What is the flow through that architecture for the user who is accomplishing the critical goal you identified above?

Once logged in, on the very first screen, the user can microblog (tweet) via a text entry box located on the center of the screen. It's very efficient.

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

A horizontal navigation bar is used. Twitter does let the user know where they are and how they got there, as the area of the navigation bar that you are currently in is marked by a blue underline, so you can't get lost. As far as where should I go next and how do I get there, the site focuses the user's attention on the twitter feed by having it centered on the screen and occupying the greater part of the screen's width. From there, the user's individual preferences will determine the path the user takes through the user generated content (or sponsored ads).

7. What key interactions does the user have? Are they clear and usable?

The user can make a tweet, send a message to another blogger, and explore the profiles of other bloggers. Making a tweet is straightforward.

8. What did the site do well to allow the user to accomplish his goal effectively, efficiently and with good satisfaction?

The site focuses on user's critical goal, microblogging, pretty much exclusively. The trends box gives users suggestions on what trending hashtags to follow, the main twitter feed gives users access to the content created by people the user is following and allows the user to create content, and the "who to follow" section on the right gives users suggestions on new people to follow. In sum, the site is all about microblogging, and does a great job at encouraging users to create and consume microblogging content.

9. What did the site do poorly when allowing the user to accomplish his goal effectively, efficiently and with good satisfaction?

The site has a help section for any questions you may have, but it's all in text. I think it would be nice if the site also had video walk-throughs, because those are fun to go through. Other than that, I don't really think it does much poorly.

Airbnb UX Teardown

1. Who is the key user? This isn't always clear, especially in marketplace sites, so take your best guess.

People who are looking for lodging during their travels.  People who are looking to post available lodging are also key users, because without sellers, there are no buyers, but the buyers vastly outnumber the sellers, so I chose to label buyers the key users.

2. What is that user's number one critical goal when using the site? Be as specific as possible if there are multiple options here, e.g. "to purchase a red wagon" instead of "buy a toy".

The user's goal is to book lodging.

3. What is likely to make that user's experience particularly positive (i.e. provide good satisfaction)?

A streamlined process with which to make the booking.

4. What is the approximate information architecture of the site? (sketch it out)

Well, I tried drafting the information architecture both ways, via pencil and paper and via Balsamiq, and Balsamiq is much better for visualizing information architecture.  I love Balsamiq!

5. What is the flow through that architecture for the user who is accomplishing the critical goal you identified above?

Enter location desired, enter arrival date, enter departure date, select number of guests, click on the search button, click on the lodging desired, and then book the lodging (the process then varies from there depending on if the user already has an account or not).

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

There are two horizontal navigation bars on top, one of which only appears when the user scrolls down far enough, but the site is so streamlined that it is virtually impossible for a user to get lost.  The user is guided every step of the way in a very intuitive manner towards the end goal, booking lodging.  In addition to the architecture being extremely efficient, the site is also aesthetically pleasing.  O.k., that's an understatement, the site is downright elegant, it has a minimalist beauty to it.

7. What key interactions does the user have? Are they clear and usable?

The user is able to search for lodging via a combination of google maps and images of the specific bedrooms/apartments/houses available.  This system is very clear and very usable, it's fantastic.  

8. What did the site do well to allow the user to accomplish his goal effectively, efficiently and with good satisfaction?

The site focuses on the user's critical goal, finding lodging, in a way that makes the search for lodging itself a pleasant experience.  In the past, searching for a hotel involved calling many hotels, jotting down details for comparison, and then crossing one's fingers that what was advertised was what was delivered.  Now, with airbnb's model, what used to be a somewhat tedious process has been turned into an amazing experience.  It's beautiful to behold.

9. What did the site do poorly when allowing the user to accomplish his goal effectively, efficiently and with good satisfaction?

The only thing I can think of, if forced to answer this from the viewpoint of a user, is that the site is amazing, but it is still not a popular service in some parts of the world, so the search function will return sparse offerings in those locations, which is not good.  It would be great if airbnb would promote itself in places where it has not made inroads yet.  So, for example, there are mid-size cities around the globe where there are plenty of hotel offerings, but few or no airbnb offerings because landowners in those areas simply haven't been exposed to airbnb yet.  As airbnb grows and grows, this will change, but for now, there are still areas where airbnb pickings are sparse and travelers still have to deal with hotels.  That said, from the viewpoint of a business owner, not promoting airbnb in these mid-size or smaller cities may be the better business decision for now, allowing growth to happen via word of mouth, so it's understandable.

Amazon UX Teardown

1. Who is the key user? This isn't always clear, especially in marketplace sites, so take your best guess.

Buyers of consumer goods.  Sellers are also key users, as without the sellers, there can be no buyers, but as the case with airbnb, buyers vastly outnumber sellers, so I chose to label buyers as the key users.

2. What is that user's number one critical goal when using the site? Be as specific as possible if there are multiple options here, e.g. "to purchase a red wagon" instead of "buy a toy".

The key user's goal is to purchase consumer goods.  

3. What is likely to make that user's experience particularly positive (i.e. provide good satisfaction)?

Easily being able to find desired goods to buy. 

4. What is the approximate information architecture of the site? (sketch it out)

I love Balsamiq.  It's easy to work with, and I can see how, whenever you are going to create a web application, you've got to mockup both the information architecture and the site itself before writing your first line of code, to lay the groundwork for completing a project efficiently.

5. What is the flow through that architecture for the user who is accomplishing the critical goal you identified above?  

Once logged in, on the very first screen, the user can enter the name of the desired product in the search bar on the top of the screen, which takes up most of the space on the navigation bar.  Once the name is entered, the user clicks on the search button (a magnification glass icon) and a list of results sorted by relevance appears below the search bar.  To the left of the search bar, the users is shown various options that can be used to further filter the search results.  To the right of the search bar, the user is sometimes (depending on the product category) shown sponsored ads for products that are also relevant to the search criteria entered.

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

A horizontal navigation bar is used, but the main feature is the search bar, which facilitates the user's key goal, finding a desired consumer good to purchase.  It's hard for the user to get lost, because the search bar itself is the primary way to navigate the site, and as the search bar is easy to find, navigation is a breeze.  This is excellent, as the design of the site is completely in sync with the key user's goals.

7. What key interactions does the user have? Are they clear and usable?

The user can search for a product, be given a list of results, and can then interact with those results in many ways, by viewing images of the product, viewing product reviews, and finally, making a purchase.  The interactions are very clear and usable, the site is well made and uses every inch of its real estate to advance the key user's goal.

8. What did the site do well to allow the user to accomplish his goal effectively, efficiently and with good satisfaction?

The site focuses on the critical user goal, making the search bar very large and using good search algorithms to display highly relevant goods to the user.  Then, the site has a review system which allows the user to judge a product, after which, if desired, the user can then walk through the very streamlined purchasing process.

9. What did the site do poorly when allowing the user to accomplish his goal effectively, efficiently and with good satisfaction?

The ads can be a distraction if a user is just trying to get in and get out, but in Amazon's defense, the ads are usually relevant to the search, and also, many shoppers are not looking for an efficient experience, instead enjoying meandering through the product selection, taking their time to compare goods before selecting the good to purchase.  Amazon does a fair job of catering to both buyers who prefer a direct, efficient process and those who prefer to meander about and take their time.