watchparty.tv – A usability analysis

Watchparty.tv is a site that allows users to host or join “watch parties” of popular television shows. During a watch party, users visit a webpage that aggregates their thoughts (blips), along with an opinion tracker and polls. The benefit of the watch party approach is allowing disparate users to watch TV shows “together”.

Upon visiting the site for the first time, one notices that the initial appearance is friendly,with a soft color scheme and edges.  The appearance is entirely appropriate for a site such as this. Normally, a media focused site would be sharper with bolder colors, but since watchparty is selling community, the friendly appearance is a big asset.

Home page

  • The featured shows slider is a good focal point on the homepage for new users, however the hover menu should use a more readable version of the date, preferably the month spelled out with the day. The year is really not necessary here.
  • Auto complete would be nice in the search box (see Hulu)
  • Separating the bottom part of the homepage into current parties and upcoming parties is a little confusing because, essentially, they’re all points on the same timeline. A better solution would be to split the page into thirds, used two thirds for the left side to display currently active parties and upcoming parties in a scrollable format, and use the right third of the page to highlight the most popular parties at the moment. The idea here is to use the mental model of an online TV Guide.
  • The visual focal point of the listings is the “create private” button.  However,it is worth thinking about whether users would more likely be looking to join a public watch party. If so, a join button should be the primary call to action, with the create private button being a secondary action.
  • Regardless, simply turning the show name into linkable text is too subtle for a call to action. A button is needed here.
  • Also as a logged in user, the message link on the global navigation bar seems out of place and doesn’t actually live anywhere in the information architecture. The message section should actually live under the my profile section, and instead of a navigation button, there should be a new message identifier (see Gmail notifier).

Create Private Pop-up

Clicking on the create private button results in a pop-up with two options: create a password and invite people.

  • 6 to 10 characters is a bit too secure for what amounts to a few people watching a TV show. A better option would be to auto generate a four digit pin instead of a password. This approach gives essentially 1000 combinations, and is  unlikely to be brute forced before the show is completed.
  • An even better option would be to just auto generate a short URL, ending in a four or five digit alphanumeric phrase. This URL could serve as both a bookmark and a password.
  • The invite people box should accept any delimiter that is not a valid character in an e-mail. This should be very easily done with the proper regular expression. At the very least, it should be able to handle commas, semicolons, spaces,  and new lines.

Register

  • The registration process is nice and short, but could be made even shorter by removing the password confirmation blank. There will clearly be those who mistype their password, but an easy to use password recovery feature should mitigate any problems.
  • The line of action links at the bottom is duplicative and confusing. The sign in link is duplicated from the global menu, the forgot password link actually should not be on this page, and the Facebook and twitter logins are duplicated from just above. Also, the e-mail confirmation help link should be located on the register confirmation page and also the login confirmation page (only if they have not e-mail confirmed), but not this page.
  • After registering, the user is presented with an error message: (could not sign in, user is unconfirmed). This is not an error, because the user did nothing wrong. Instead, this should be presented as a normal step in the register process. Even better, auto log the user in and worry about e-mail confirmation at their second login.
  • My confirmation e-mail was sent to my spam folder (a common problem). Have you ensured that your e-mail infrastructure has all the proper verifications?

Register confirm

  • The phrase “must set up the following data” is technical sounding and unfriendly, and it is not true that one must fill out the data because the page also says that they can optionally log in.
  • Ideally, the user should have already been logged in, and this page simply asks them to select their time zone before proceeding. Also, the terms of service agreement should probably happen on the register page (It does, so why make the user do it twice?)
  • After clicking “save and accept terms”, there should be some sort of final confirmation that the register process completed successfully.Currently, the user is redirected to the home page. There are two solutions here: the first is to redirect the homepage but provide a nice confirmation message and call to action or redirect to the my profile page where the user can find  content specific to them.
  • As an additional note, after logging in the user is presented with a confirmation message  in orange. A less alarming color should be used for confirmations.

Create new private watch party

  • The back button is in the wrong place. It should either be moved to the top left or replaced with the cancel button next to the confirm button at the bottom of the form.
  • The combined time and date input form elements are a bit daunting. In this case, it would be easier to comprehend two separate date and time input fields. The calendar could have the standard calendar pop-up, and the time input could be done iPhone style or with drop downs (think about limiting the options to either 15 min. intervals or 30 min. intervals).
  • After the start time is entered, the end times should automatically populate with 30 min. or one hour later. It is also unnecessary to say that the end time has to be after the start time, as this can be caught with a form check.
  • See note from above about the password field and the invite field.

Watchparty event page

The first impressions when initially viewing this page are that there are a lot of options, there are some unfamiliar words, and the page feels quite a bit more static than it should.

 

The eye begins in the top left and observes the name of the current watch party (good), which is followed by a rather large button to see the program details.  This button is perhaps a little bit large for what it does.  After the title, the eyes fall upon the top left box called “flips”.  It is immediately unclear what this word means, but using the context of the box contents one can deduce that they have something to do with expressing emotions.

The eye continues to the right from flips, landing on the “how do you feel” box, which is fairly clear as to its function. Moving down the page, the “blips” box does a fairly good job of communicating that it is some sort of short comment field. Finally, we move back to the left column to the “traks” box.  It is completely unclear what this box is for, especially if there  are no previous traks. Attendees is, of course, self-explanatory.

Significant shortcomings

  • My initial expectation was that the page would be more dynamic. This, of course, is not due to bad design  but instead reflects the fact that the product is still in beta. Every effort should be made to Ajaxify all of the boxes on the page so that the page does not have to be refreshed for updates.
  • Boxes are not located correctly for their importance. For example, blips should be the most important thing on the page, and thus in the top left.
  • It is a little too ambitious to try to coin three new words. I was constantly experiencing varying degrees of cognitive dissonance trying to square the fact that a trak is really a poll, and a flip is really an emoticon.
  • It is not clear why one must be logged in to “attend” a watch party. One should be able to observe, without logging in or receiving an error message. The blip box could be replaced by a login box explaining that one must log in in order to contribute. I would go so far as to list anonymous observers in the “attendees” box, but listed after the registered users.

Minor shortcomings

  • The JavaScript character counter is misplaced, and really should be invisible until one is approaching the limit.
  • The “how do you feel” box should really be a dynamic graph  (see Frank Luntz’s debate feedback sessions for an example)
  • There are too many different types of buttons and links on the page.
  • Traks have constraints that don’t make sense. Why two character minimum; why not five or 10? Why does the trak have to have four options?

Design suggestions

The wireframe below is a suggestion on how one might reorganize the page to overcome these shortcomings.

 

Watchparty wireframe
Note: Not to scale. For layout and functional demonstration only.
  • The words “trak” and “flip” have been removed completely.
  • Breadcrumbs have been added in place of the “leave watch party” link.
  • Blips have been moved “front and center” because they are the main focus of activity.
  • Flips have been integrated with the blip box, invoking the web HTML editor mental model.
  • The character counter has been moved to the top right of the text box, and should be invisible until one approaches the limit.
  • The motion tracking box in the upper right has been changed such that the slider is now vertical and the display is a dynamically changing graph.
  • The program details button is now a link.
  • Traks are now called polls, for less confusion, and are moved to the right. Past polls should still be visible and should move down when a new poll is created. There should be a hard limit on active polls to ensure that no active  poll falls below visibility.
  • The social networking features and invite features are moved to the attendees box which stretches across the bottom of the screen. This feature is important, but  sharing is provided immediately upon entering the page with a modal pop-up.
  • Creating a new emotion (previously a flip) can be accomplished with an in-line text field, or optionally hidden behind a “create new” link.  There is no need to label these at all, as they are self-explanatory.
  • For added simplicity, the blip button can be removed, and blips are simply published after pressing the enter key ( Facebook does this).
  • Black triangles now represent infinitely scrolling content boxes.