Staples Home Page Redesign

By: Ryan, on January 14, 2010

I stumbled across a link in one of those IxDA LinkedIn group emails this morning to a thread about the new Staples home page redesign. I was going to write the OP a note letting him know that I liked the design overall, however, the more I looked at it the more I noticed some serious deficiencies in this design. So instead I wanted to write a quick case on e-commerce home pages and use this page as a singular example.

General Observations:

1. The design is light and on first glance, airy. The branding is placed where you’d expect, so there’s nothing shocking there.
2. The search bar is big and pretty well differentiated, but it’s surrounded with clutter, namely 2 of the 3 navigation bars on this page.
3. Just on this page I count 4 different ways to contact customer service (if you don’t count store locator). A good home page has 1 or 2 very obvious ways to contact customer service so that the user doesn’t confuse them as being different or numbers or the wrong one for them.
4. There are 3 different paths to log in to your account just in this view (yes, there are more). Again, one obvious login path that is consistent on every page is ample and lets the user more easily draw a mental map of the site.
5. There are 4 promos on the page accounting for a significant portion of the screen real estate. That’s without counting the banner in the navigation (which is coming up next).
6. The “Customers Likes These Best Sellers” widget is really helpful, but there’s a ton of wasted space in here. They could have put some very helpful information in all that white space, price perhaps?

The Navigation:

Now I’m a huge fan of jumbo menus, but these menus need to be done a certain way to make them usable.

1. There’s a limited amount of hierarchy being shown in these menus. The paper and pads section has some hierarchy, but they could have done a lot with the fonts and weights of the elements to make scanning this menu mindless.

Jumbo menus are fun, but only when you can read them.

1. The hover states are don’t have very good timing on mouse-in and mouse-out. Adding a very slight delay on mouse-in and a slight delay on mouse-out make it easier for the user to correct their errors.
2. The banner at the bottom of the menu is really interesting, but as you can see from the first picture, you can also get this blinding yellow banner on top of another blinding yellow banner. Bright objects and things with movement distract the user momentarily (because humans are fight or flight animals). So I would be reticent to place my brightest ad in my navigation or to animate it if I did.
3. As I mentioned there are at least 3 different navigation bars on this page. Now, having a lot of navigation options isn’t necessarily a bad thing when you have a lot of different user types trying to accomplish a lot of different tasks. However, when you have such different users the navigation should be clumped into related segments. The sidebar nav is great, but “My Account”, “Customer Service” and the top of the header nav probably could have been clumped together and some redundancy eliminated.

Page Content:

I like the thinking around this page content. I’m assuming that at some point the system remembers what you’ve been looking at a lot and surfaces content relevant to your behavior. However, I wonder if an ad unit and 8 total products (on screen at any given time) represent enough of a starting place for most users?

1. Just touching on that white space comment, there’s a ton of macro white space (space between major page elements) and a ton of micro white space (space between smaller related elements). Sometimes this alienates information from the product it describes, like the reviews and details button in the top widget. It definitely sucks when things look uneven in a design, but it sucks more for the user where there’s no obvious path to follow.
2. Speaking of obvious paths, the names of the products don’t look like links until you hover on them. I’m not trying to support any argument Nelly (Neilsen) would make, but links should look like helpful pathways, so why not style them as such?
3. The yellow banner. I know this thing was created by a marketing department to be “attention grabbing”, but it’s so distracting and painful that I can’t look at it for more than a few seconds. This is less ad blindness and more ad repulsion.

The yellow banner of doom.

1. I like the “Expand to See All” links. UXmatters recently published an article about this type of behavior. The catch is, what if the user doesn’t see what they were looking for when they click that link? You’ve effectively created a cul-de-sac on, a well known conversion killer.

The Footer:

Now, jumbo footers are awesome and don’t ever let anyone tell you otherwise. But there’s a helpful jumbo footer, and there’s a jumbo footer designed around SEO and two logos. This feels like the latter.

1. There’s 3 more promos here (you could count them with the page content, but that would bring the home page promo count to a staggering 8.
2. One of the things I find interesting in this footer is that “Ways to Save” is given top billing, while “Products” and “Help” are relegated to row two. If I’m in the footer looking for the next place to click, is “Ways to Save” the first thing I’m going to look for? There’s an opportunity to save some customers that are scrambling in the footer to find something that will help them. This might have been a better place to promote “Contact Us” or some redundant navigation.
3. The “Easy” button. Man, that was really funny there for a while, but did it create such a strong emotional connection to the brand that it needed to get thrown in there in a random place?
4. Finally, the SEO copy block is just lame. Not only does Google ding you for that in your ranking, it accomplishes virtually nothing. Good SEO and good usability are best served as one course. They compliment each other by helping the customer find what they are looking for and then helping them buy it once they’ve found it.

Overall, I’d give the redesign a C+

There’s clearly been a lot of effort invested in this design, and this is no slight to the design and development team that worked on it. However, it seems like marketing and other business stakeholders might have derailed much of what could have been great design with business needs instead of user needs. I’m also not sure that best selling products are an effective sales tool for office supplies and I was surprised that after I looked for inkjet paper, the “Recommended for You” widget was showing me HP printer ink. It seems like the logic driving this feature is marketing based rather than behavioral. With a few simple tweaks, the home page experience could be massively improved.

Filed under: design, e-commerce, usability