Posted by: kimothy | February 9, 2009

Prologue: for my HCI class, we have to write weekly blogs on the course website about HCI-related topics or critiques of existing designs. My plan is to repost them here, if I like them, so more than the people in my HCI class (none of whom I know that well) can read them. I’ll keep them in their own category.

Week 1 (posted for Feb. 3, 2009)

If you haven’t checked out, you definitely should. It’s a website that offers one product for sale per day Monday thru Friday, ranging from televisions to computers to small electronics to toys and tons of other things; mostly, it’s electronics at bargain prices, often refurbished. There are also sister sites: shirt.woot, which offers a different t-shirt every day, and wine.woot, which offers two wine selections each week, and sometimes wine-related accessories, like stoppers or cheese.

The Woot website is very well organized. (This guy really liked it and used it as an example of “Beautiful Web Design,” under “Contrast,” about halfway down the page.) There is a clear picture of the product being sold on a white background, with a darker color around the white strip, making the product the first thing the viewer will see on the site. The price and details about the product are stated simply and clearly next to the picture in simple black font with bullets, one of the easiest formats from which people get information. There is a very obvious “I want one!” button under the specifics, clearly telling the viewer what to do if he wants to buy the product.

The subsequent ordering and processing pages are also very easy to use. For example, on the confirmation page after entering credit card and shipping information, the site tells the user (not verbatim): “If everything is correct, please click this stupidly large button to continue,” and the button is indeed much larger than standard buttons on websites. It makes the interface entertaining, as well as easy to use, making the user want to come back again and buy more; this is a clever marketing scheme.

Also on the main page, there are links to the shirt.woot and wine.woot sites, as well as links to the Woot Blog, run by the site owner, the Woot Forums, where people rant about products, and other info sites. Each product has a lengthy and often amusing descriptive story, after which the specs are explained in more detail. All this is arranged in a very user-friendly format, and I always enjoy going to the website.

In January, Woot redid its web design. Since I was used to the old format, I initially didn’t like the change, but on further inspection (and after starting examining things from an HCI perspective), it fascinates me how the site could perform the exact same functions in the same easy way, but look almost completely different. The overall layout is the same: large picture of the product, simple specs, “I want one!” button, witty story, and links to shirt.woot and wine.woot. The only large layout differences are a small box containing product comments that was not there before, and more advertising in the middle of the page. The rest of the site, that is, the non-content part (colors, buttons, tabs, fonts, etc.), was almost completely redone. It looks quite different.

Here are screenshots of the old and new designs, for comparison (N.B. I tried making them embedded images, but they were too big to fit in the window at a size that you can see anything relevant, so they’re just links now.):
Woot Now (new design)
(source: I took a screenshot of my own computer.)

Woot Then (old design)
(source: a Google Image search,

The new design is clearly making use of the newer, more popular wide screen monitors and windows. The new design has thumbnail links of shirt.woot and wine.woot, instead of text links, which will attract more attention from people who don’t know the site well. There is no color bar at the top of the new design, which I think is less effective than the old, but it still works overall as a well-organized site. The web designer (and re-designer) clearly knew what he was doing.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: