d'bug shares Web development advice, including CSS, JavaScript, PHP, Java, .NET and Ruby on Rails tips and tricks.

Kohls.com — when a redesign goes slightly awry

• Posted by Stephanie
• Posted on September 11th, 2007
• View Comments

I received an email from Kohl’s after the redesign of Kohls.com was complete. For those of you who do not reside in the States, Kohl’s is a popular brick-and-mortar retailer that sells clothing and apparel, home goods, and jewelry. The email prompted me to check out the new site features and even offered me a free shipping coupon as an incentive. Who am I to pass up such a deal?

I love to shop at Kohl’s (just ask my husband), and I was aware that the site was being redesigned. It was down for several days a week or so before I received the email, so I was anxious to discover what this new site had to offer. As an information architect, I am unhappy to report that the new and supposedly improved Kohls.com was a disappointment.

To any business owner responsible for managing a redesign who might stumble across this critique, pay special attention to detail. It is likely that there is already an information architect in your organization, chomping at the bit, ready to remind you that these are unacceptable mistakes in a major redesign. Heed these warnings.

[ Screenshots open in the same window. A red outline was added to highlight some examples. ]

Displaying inaccurate search results

I tried several keyword searches and was unable to achieve accurate results with any of them. Either an inaccurate set or no results were returned with the majority of my search attempts. In each case, after searching, I browsed through the site to make sure that the product did in fact exist in the inventory. I also double-checked that the keywords I was using to search appeared in the product’s title.

For example:

Search Words: Carter’s Bodysuit
Results: 0
Actual number of products with “Carter’s Bodysuit” in the title: 25+

Displaying inaccurate sorting functionality

When searching or browsing an online storefront I generally like to sort my results immediately by price from low to high. Instinctively, I tried this on a few pages at Kohls.com. I found that in numerous instances, the sort order did not show me products by price from low to high. The sort order is instead based upon the regular price of the item, not the sale price, which is the price I would actually pay. The result — a seemingly random ordered set of products.

As a brief side note, labeling consistency is a must. Notice the use of the abbreviated terms “orig.” price and “reg.” price. Is there a clear distinguishable difference?

Ordering refinement options randomly

Normally, I am a pretty big fan of refinements — the ability to narrow a set of results based upon certain attributes such as brand, color, price, etc. I was excited at first to see that the new Kohls.com offered the ability to refine each product result set. Unfortunately, I was disappointed with the poor execution of this functionality.

In most cases on Kohls.com, the refinement options are ordered alphabetically. While this works nicely for refinements such as color or brand, it does not work all that well for size or price. When you order a set of prices or sizes alphabetically, you end up with what appears to be a randomly ordered list (e.g. - L-XL, LARGE, LRG AV/REG, MEDIM/AV/REG, MEDIUM, SMALL, SML AV/REG, X LARGE). This is incredibly difficult for users to digest visually, especially with non-standard abbreviated nomenclature like MEDIM/AV/REG.

I also noticed random ordering when only a subset of the refinement options were shown, plus the option to view more. I am not exactly sure why certain refinements are receiving priority placement over others. If I had to venture a guess, I would say that when a subset of the refinement options is being shown, the options are being ordered based upon criteria as specified by content managers. Again, the result is an apparently random ordered set of options.

Presenting refinements that do not refine anything

As I said, I fully support the use of refinements, but only when the refinements presented to the user actually allow you to refine something. In an instance where a single refinement option exists, it makes sense to implement a business rule that suppresses the refinement option altogether.

Allowing multiple labels for a single refinement option

One of the keys to implementing refinement functionality well, is to make sure that the data is clean and especially consistent. If it is not, the result may look a little something like the following screenshot. I presume that this is not only negatively affecting refinements, but browse and search results as well.

Showing the user products that cannot be purchased

Nothing upsets a user more than showing a product that is out of stock, which cannot be ordered, or back-ordered. On the product results page, a dark gray box resides in place of where the product image would normally show. After clicking on several of these gray boxes, a user begins to figure out that these products must be out of stock. Why bother cluttering up the page with a wide array of products that customers will not be able to purchase? Those who are less patient would be likely to leave the site in frustration after a few clicks. This might be related to poor data, but to the user this is simply an inexcusable shopping experience.

Displaying an excess of “Image Coming Soon” images

On the old Kohls.com site, I do not recall encountering many products that were represented without an image. After all, when a user is buying just about anything online, the product image is the closest glimpse of reality regarding the physical purchase. When browsing the new Kohls.com site, I uncovered an excessive number of products without images.

I understand that the site had just launched before my visit (err… a week ago), and uploading all of these images is a time consuming task for any retailer. Yet, it would still be best to ensure all of your images are in place before blanketing the community with check out our new Web site emails. The likelihood of most users completing a purchase online without accompanying photography is extremely slim. Especially when selling clothing and apparel.

Displaying categories without products

Simply stated — if the category does not have any products contained within it, then do not show it to users. Online retailers are nervous about deactivating categories with no products, because they mistakenly believe that users will assume no products of that type are sold. The truth is, clicking to browse an empty category listing is even more frustrating. To the user, these scenarios are one and the same.

Placing pagination at the top of the page, but not at the bottom

For each set of product results, page number links are clearly displayed at the top right of the page. However, there are no page numbers to be found when scrolling down the page to view more products. The first few times I did this, I got to the bottom of the page and quickly assumed that there were no additional products. Lest you think I am being nit-picky, this is how “power shoppers” with little time on their hands like to shop. The immediate assessment is that there are no additional products — only by scrolling back above the fold do I realize there is more to see. This is a tedious task, especially when viewing 30+ products in a result set. Duplicating pagination at the top and bottom is a must.

Producing a sloppy view

I really believe that if you are going to spend an inordinate amount of time and money to redesign a nationally recognized Web site, then the results should appear clean and professional to even the most experienced eye. I was surprised and disappointed to find the following examples of downright sloppy design and development on the new Kohls.com. I will let the screenshots speak for themselves.

Conclusion

Let me wrap this up by stating that I am not out to bash Kohl’s. I shop frequently both in their stores and online. My hope is that other online retailers will take a good, hard look at these examples, and avoid making the same mistakes. I am sure that Kohl’s has already taken much of this information into account, and is working with users to make improvements that will lead to a better experience.

There is always the question that online retailers must ask that often results in some of the errors addressed. Do we launch late, and to diminished fanfare, or do we launch on time, but with limited expectations. If you are a key decision maker at an organization like Kohl’s, let me tell you that arbitrary deadlines make for unhappy customers. Unless your previous Web site was generating a significant level of negative feedback, stick with it, and get it right the first time around.

Tags: kohls.com, redesign