This teardown is for a project for Viking Code School, for one of the first assignments in the Web Design unit.
The questions I’m answering (in purple) have been provided by Viking Code School.
Who is the key user? This isn’t always clear, especially in marketplace sites, so take your best guess.
Key user is primarily young people given the site design, and people interested in both finding new bite-sized creative content and creating that content, given the nature of the site.
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”.
This user’s number one critical goal is to view extremely specialized news and updates from friends and celebrities on topics as wide or specific as they choose.
What is likely to make that user’s experience particularly positive (i.e. provide good satisfaction)?
This user’s experience is likely to be positive if they can move as quickly as they can into viewing tweets, specifically from people they have followed, with as few steps in between reaching the site and customizing/viewing their feed as possible.
What is the approximate information architecture of the site? (sketch it out)
I sketched it out earlier, but for sake of clarity I whipped together a quick little flow chart to approximate what my sketch looked like:
What is the flow through that architecture for the user who is accomplishing the critical goal you identified above?
For each of the specified users (both browsers and content creators) it is one to two steps to get where you want to go – with/without signing in, browsers can begin viewing top and trending tweets as soon as they hit the homepage. The difference in this case between signing in and not signing in is the personalization of the feed. For people interested in creating their own tweets, which you must sign up to do, the “tweet” button is prominent on the homepage after signing in.
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?)?
This is one of the drawbacks for me. As a person with a personalized feed who isn’t super active on Twitter, clicking around on the main navigation panel took me to some screens I wasn’t expecting. More than one button took me to the same place, which is normally okay, but the buttons themselves have such vague names (“Moments” is one example) that it’s not always obvious where clicking on those buttons will take me.
What key interactions does the user have? Are they clear and usable?
One of the key interactions, obviously, is “Tweet”. Although the “Tweet” button is small, the page being mostly taken up by existing tweets, it’s still a different color than the rest of the pretty uniform white screen, so it still stands out pretty well. The other key interaction for people who don’t want to tweet, or who want to personalize their feed, is following others. This isn’t always obvious, depending on the access point. If you’re seeing an account in the “Recommended” sidebar that you want to follow, the “Follow” button is very prominent. However, if you’re looking at the profile page for an account you want to follow, the button is much smaller (again, because more of the page is taken up by their tweets, which is arguably a good thing).
What did the site do well to allow the user to accomplish his goal effectively, efficiently and with good satisfaction?
One great thing about Twitter is that, no matter what kind of user you are, there are only one or two steps for you to take to meet your goal. To Another great thing is that there is such an easy point of entry. Signed in or not signed in, you can start viewing tweets as soon as you land on the homepage. Even if you have never been to Twitter before, you can easily be sucked in by viewing trending news stories right on the homepage.
What did the site do poorly when allowing the user to accomplish his goal effectively, efficiently and with good satisfaction?
One thing the site could have done better is provide more clarity with buttons – where are they going? Will you be redirected to someplace you’ve already been? What I mean by clarity is that some people might not have a clear idea of what “Trending” topics are. They may not know what a “Moment” is – so why would they want to create one? The site accomplishes its main goals effectively, but could be even more effective at accomplishing some of its extraneous goals with a little more clarity on what those goals are and how the average (or new) user can accomplish them.
So there we go, my very first UX teardown! It feels a little bit strange to be critiquing such well known sites when I’m so inexperienced, but I know that that’s how you learn.
Stay tuned for more on my experiences in Viking Code School. I’m really enjoying it so far and looking forward to learning even more!