02 Jun 2008 0624H

UX-dojo-storming PotteryBarn.com

Oh. Looks like W-S brands’ UX & Dev teams down at the north end of Van Ness have been hard at work lately. Let’s look the numbers:

We are all trying to get this right. Yes yes. Oftentimes we make decisions to get us down the road towards where we are trying to go even if they seem like detours away from the customer-centered path. It’s easy to criticize if you’re not working in that environment: I understand all that. And anyone who has worked in online retail for any amount of time should know that too. So with that disclosure, purely in the interest of competitive spirit, let’s look at what they’ve done across their brands, since they too, like the Gap, share code across the different web properties:

Ginormous hero image

Ginormous hero image. What’s so special about this image that it has to take up 2/3rds the height of the screen (which is still accommodating 800 x 600, by the way) and flush left, not centered at that? Trying to get a piece of the Crate & Barrel pie, eh? They need to get in line with everyone else. Sometimes I’m not even sure if the pie’s already been et, as they say in certain parts of this country.

Hidden affordances on mouseover

Ah. As you can see here, they have hidden links within the hero image that present themselves on mouseover. But there are no affordances (little hints that things, like door or faucet handles, can be acted upon and how to act upon them) on the hero image and no expectation that the mouseover would show that the user can take action on the target. Perhaps that is why the designer or their stakeholders decided to make the image 2/3rds of the height of the screen. You know — subtly hint something could be done here. Ha. Let’s click.

The Collections page

This would seem to be a detail page on first glance. But actually it is a kind of detail page that is a bit wonky since it is both master and detail, subcat and product page. There are actually different kinds of pillows that are on this page. I learned that by scrolling down the page by the way cos I was looking for an add to cart button and a quantity field. Instead all I see are swatches, which we could use further down the page when you are trying to make the comparison, and there’s the shopping info, which isn’t helping me right now either. Where is the compare function anyway?

Pop-up window with the collection

So this is helpful, but the image that gets fired up when I hit the button to view the swatches (and view shipping info should be worded so as to maintain consistency for action buttons) doesn’t entirely fit inside the darn window and you have to scroll to see the detail. It’s nice they have different contexts, sure, but couldn’t this be more appropriate to the context?

Oooh pretty colors

We march on, inexorably, to the colors. Again, I am thinking that these could be more contextual.

Shipping Info.

As could the shipping info. You all did see the PayPal ComScore survey that said people really get turned off at checkout by high shipping costs, right? On eBay, a common seller tactic is to lowball the price but then stick it to you on the shipping. People really pay attention to the shipping costs, which really can only go up as the days of cheap gas are officially over. More so than taxes. But you could move this information elsewhere to be more contextual.

Selecting items.

Advancing down the page, we come to the product details. Here’s where the problems really begin. We saw at the top that the price for the pillows is $25. This is fine for just one — the 18″ pillow — but for the 12″x15″s it’s used to show $25 for each color, unless not available. So this appears to be a code issue where because of the way the page is coded, the iterator pattern is used to write $25 as the price for each color unless it’s not available, in which case no price, but “no longer available.”

There’s a number of lost opportunities here, not the least of which is that here is where you want to show the colors. Is it really necessary to show $25.00 for each pillow? And maybe the only reason why I would show No Longer Available would be to use it as an opportunity to check other PB stores in my area to see if they have any, or email me when this comes back into stock, or some way to get the user to convert.

Here\'s where the colors could\'ve come in helpful

By the way, those bright swatches we saw waaaaay up top? We could really use them here. Did I mention the color swatches already? Avoids bouncing back and forth to the top. Kind of mini-pogosticking.

Selecting Shipping Options

Here’s something interesting. If you select You for the Shipping Options, all the other shipping options change in turn. So there is no ship these pillows here and then ship those pillows there.

Shipping to Yourself

So what happens if we ship these to Other?

Taking the user to the Shipping Page

I’ve been taken to what looks to be a page in the Checkout path to give my Ship To information. Unexpected. Seems odd and out of place here, since it still seems that I’m in the Rugs, Pillows & Windows Page. Wouldn’t this be best in the Shipping Info page for the Checkout instead of interrupting my shopping experience?

What happens when I click Add to Cart?

The cart as lightbox

Actually all the items get added to cart with one add to cart button push (unexpected, but okay) if you have set quantities for each item on the collection page, and add to cart then fires off a lightbox, which is modal (no real reason for it) instead of pogosticking you to the first page in the checkout path.

A good thing working here is that the cart indeed, when fired off, does not have to be pinned top right. Only the affordance for the cart — meaning the cart icon, the word “cart”, the checkout button — needs to be at top right where people expect to find it. Here it is not exactly clear, hidden in plain sight as it is as a kind of link which will take you to the checkout path. But the action of adding to cart is correct, and it shows what has just been added and allows the user to close the thing to acknowledge the action, which, I don’t think is necessary here — it should acknowledge the action and then go away.

Paraphrasing Krug, this stuff is hard to get right. People always make these assumptions that the people behind websites are just crazy, simply irrational, they don’t know what they’re doing. But in reality often times people do have rationales about doing things, even if they don’t wind up doing things right for the consumer online. Maybe someone with more authority leaned on them or made a unilateral call without any data. Maybe it was IT related and the effort to change a process or data was ridiculously expensive. Everyday we deal with highly political environments where we are trying to deal with multiple inputs, from merchants, from business unit owners, from the IT side: this is what it is to work in large corporate settings with lots of people. The important thing is that as a discipline, businesses are starting to understand that their profitability online is inextricably linked to the quality of their user experiences. Now having said all that, because business leaders are still trying to grasp this concept, progress is measured oftentimes by baby steps, and not by the quantum leap that Gap Inc took with its user experience back in ‘05, which even that likely required months of planning in advance.

Permanent link to UX-dojo-storming PotteryBarn.com

Filed under Information Architecture, Information Design, Interaction Design, Usability, User Experience, Web, Work

Be the first to respond to "UX-dojo-storming PotteryBarn.com"

RSS feed for comments on this post. TrackBack URL

No responses yet.

And now it's your turn.

Fire your weapon, soldier. Just be careful of friendly fire. NAME & EMAIL required.

Your response