This month I’m doing a structured review of the Overstock.com website, looking at various aspects of online usability. Whilst this touches upon good practice learning, my primary focus is from the perspective of the end user: how easy is the website to navigate around and complete core tasks?
First, a handy definition from Wikipedia (yes, I did say Wikipedia!) to frame the discussion:
“Usability is the ease of use and learnability of a human-made object.”
One thing to point out is that without access to web analytics data, I’ve no way of validating my review points. This blog is based on my experience of working with many ecommerce sites, though inevitably without data validation there is a degree of subjectivity in my analysis.
There are so many facets of an ecommerce site that contribute to usability and UX, so I’ve focused on some key areas including:
1. Page load speed
2. Site wide navigation
3. Product catalogue
4. Faceted navigation
5. Product copy
7. Site search
8. Cart page
10. Mobile site
1. Page load speed
Page load seems pretty fast with document load time repeatedly under 3s and first byte loading quickly (under 0.2s). I tested this from various locations in the US using Webpagetest.org, which I find a really useful testing tool.
They’re using Akamai as their CDN (Content Delivery Network) to serve some assets, which is a good way to improve page efficiency as loading all assets from the same domain slows things down considerably.
One interesting thing to note is the frequency of 302 HTTP status codes on some of the assets. It’s best to remove redirects wherever possible, though there may be a logical explanation to this.
Overstock also appears to have done a great job optimising images. Large image files are often the root cause of slow page load on ecommerce sites but for the homepage the largest image asset is only 73kb. One option to further reduce page size is to switch from baseline to progressive jpeg images but there is a potential trade-off: progressive jpeg images load the full image straight away but with only some of the pixel data, meaning the image briefly looks pixelated before sharpening. The Overstock ecommerce team may well have decided the slightly larger file size was preferable to a marginally diminished UX.
2. Site wide navigation
When looking at a site’s navigation, I think in terms of IA (Information Architecture). Broadly speaking, this refers to how a site’s content is grouped together and structured to make it easy and logical for visitors to retrieve this information i.e. are things where I’d expect to find them? Let’s take a peek at Overstock:
• There is a large site search bar prominent across the top of the global navigation pane, using persuasive messaging “Let’s Start Saving” to encourage use.
• There are helpful links top right for things like Newsletter sign-up but the drop-downs are text heavy and the box does blend in somewhat with the main page backdrop.
• The key top links like Club O rewards require a click to get to the main landing page; whilst not ‘bad’ per se, I’m in favour of surfacing content contextually as people mouse over links without the need to click as I’ve seen this help with task completion on other sites. I’m not saying don’t have that landing page for campaign traffic/SEO but why make people click from the global navigation if the content can be served dynamically?
• The top navigation is helpfully segmented with an “All departments” option + individual options for each main category. Naming conventions are logical apart from “Worldstock” which to a naïve browser doesn’t mean anything.
• The options in the drop down menus are well structured and they feature a sub-set of the total available sub-categories (I’m assuming most popular) with a link to view all, which is helpful.
• I like that the top nav bar is pinned so as you scroll through product lists, the menu is always at hand. On the other hand, on product list pages, the site wide footer disappears so you can’t get to useful links like Customer Services and the blog.
• The simple ‘Back to top’ link is a helpful navigation aid for people who scroll far in product lists.
3. Product catalogue navigation
• For such a huge catalogue, the drop down menu is used well to segment the product categories and let customers drill down. Each link also helps with internal linking (good for customers and search engines).
• I’m baffled by the prevalence of sponsored ads from the Google AdSense network on every product list page; I know the click will generate income but surely the distraction to customers and potential loss of sales would negate that? I’m assuming that as the business owners have been savvy enough to build a $bn+ business, the maths speak for themselves. I’d love to see some AB testing data though to validate the impact!
• They use different page templates depending on the product range, which is good practice. A good example is the “Area Rugs” sub-category, which has a “Size” and “Style” additional navigation pane at the top above the products.
• There is no story telling on this site via copy, it’s all about the product. This probably works well for Overstock because they’re a discount retailer, so rich content may distract.
• How they handle multiple colour variants for individual products on product list pages is rather crude; instead of providing a swatch range to hover over to dynamically change the product image to view the colour you want, they use a master image of all variants and add text labels to the image. From a UX perspective, competitors like Macys do this better.
• I can’t find a recently viewed option either, which I would expect as a quick navigation tool given the large catalogue. Retailers like John Lewis in the UK do this well. However, they do provide a ‘saved items’ feature for customers to add items themselves (see Category pages below).
• I’m slightly disappointed by the category landing pages; the generic image grid format with pale white copy on background images makes you work hard to find the sub-category you want. I can’t find any attempt to personalise or customise these pages using merchandising rules because each time I visited, I saw exactly the same content regardless of prior browsing patterns.
• There are multiple versions of some Category pages because they can be accessed via different navigation paths. Sensibly, Overstock uses the canonical tag to reference the master version of the page to avoid duplicate content issues.
• They’re using infinite scroll to avoid the need to click to “See more” or change number of products per page. The page automatically refreshes to load more product as you scroll down, so there isn’t an instant ‘massive hit’ to the page load to try and get all the products in.
• When you roll-over a product you get a “Quick View” button appearing which loads a mini-product light box where you can select variants and add to cart – this is great because you don’t need to click through to the product page if you know what you want.
• There is also a “+” icon that when clicked adds the product to your saved items carousel that appears at the bottom of the page. This carousel disappears automatically and there is a text prompt to re-open. My one criticism would be that the “Show saved items” text prompt is easily missed amongst all the products/copy.
• There is an inconsistency in how product images are displayed on the listing page; many are shown in situ but others are masked on a white background. Also, the size of the in situ images varies considerably and colour variations are presented in many different ways. I’m not sure if this is an issue or not but it’s not ideal for design consistency.
• There’s a prominent “Everyday free shipping over $50” banner top right, which helps reinforce one of their USPs. Interestingly, this doesn’t hover, so if you scroll down this message is lost.
• The category landing pages all have clear promotions but there is an opportunity for more copy to position the product ranges, with a potential SEO benefit as a side-effect.
4. Faceted navigation
• Overall, it’s a pretty good navigation menu with multiple refinement options, each showing the quantity of items available, and a specific search bar within this section of this site: big tick.
• My pet hate: when you filter by colour, the product images don’t show matching colour variants, instead they show the master product image with all variant swatches. This is a poor visual trail – see below for a “green” filter and tell me how many green products you can see?
5. Product details page
Overall, this page template is well designed and structured so that information retrieval is straightforward.
• The primary call to action button ‘Add to Cart’ is clear and stands out as soon as the page has loaded.
• Product specific USPs (e.g. “Free shipping when you purchase this item”) are displayed below the product summary copy, which is a sensible persuasion technique.
• Placing customer reviews at the top beneath the product title is helpful and provides social proof for the products. Of course, there are products with no reviews but that is to be expected with a large catalogue.
• Product information is displayed using a tab system so you don’t have to scroll to access all the details.
• Links to related buying guides and related product categories are provided beneath the product information.
• Customers can submit their recommended tags for the product to provide helpful feedback to the ecommerce team.
• I was slightly disappointed by the social bookmarking options – you can only email to a friend, pin or Like the product, which limits the social networks customers can share the products via. In my experience, allowing people to choose the right social network for them is better than limiting and I’d expect to at least see Twitter and Google+.
• Overstock uses product bundles intelligently, showing items that are frequently purchased together and letting customers add the bundle to their cart with 1 click. If you don’t want all of the items, you can remove one or more from the bundle. If you change your mind, you can add them back in, brilliant. It’s a really clean UI.
• They offer a Spanish language version of the website which is a good move given the sizeable Hispanic population in the US. The core navigation has been translated, as well as the product copy, yet the features & Related Categories are still listed in English, which is odd. An oversight, or an action on a snagging list?
• They offer Buying Guides, a useful tool for customers in the research stage of a purchase + a potential SEO bonus. However, these aren’t translated for the Spanish language version (only the title is). It seems strange to provide a Spanish version of the site and then leave a core part of the content not translated.
• There is a blog, which is categorised to align with the core product catalogue. However, the top navigation is for the ecommerce site, which can be confusing because if you click expecting to drill down into blog content, you end up back on product pages.
• I couldn’t find evidence of video content during the catalogue navigation paths. Given the evidence for the positive impact of video for ecommerce, this is surprising. Some product ranges lend themselves to rich video experience e.g. beauty, clothing. Please note I didn’t exhaustively check every product, I’d still be clicking! I ran a quick poll of 100 products (top 50 best sellers from Beauty Products & Dresses).
7. Site search
Site search is a critical part of an ecommerce site. Typically, visits using site search convert better than those using other navigation paths, even when you strip out bounce visits from the analysis. For some retail sites I’ve seen x3 conversion rates, so there’s a commercial imperative to ensuring search works smoothly.
• The site search uses redirects to relevant product catalogue landing pages where there is an exact match with a category name e.g. “Dresses”.
• However, there are some obvious errors in the search logic because policy related search terms like “delivery” don’t redirect to the relevant information page, instead they return product results.
• There doesn’t seem to be much intelligence to the fuzzy logic either; a deliberate misspelling search for “atr print” doesn’t find any results so then provides matches for both “atr” and “print”. There is no contextual understanding that “atr print” could be matched to “art print”. Underneath is a “Recommended for you” product selection that has absolutely no relevance to the search and is rather confusing.
• However, a miss-spelling on a product category name does return suggestions for relevant matches e.g. search for “dreses” doesn’t show products but does add a text string “Did you mean: dresses, dress or dressers?”
• At the top of search results page related searches are displayed, which is a really useful tool for customers.
• A long tail search for specific product types does match relevant products but some product images don’t match the search query e.g. search for “womens red dresses” and the 2nd product image is for a black dress.
8. Cart page
The UI design of the cart page is good, with consistent colours for positive action buttons and information logically grouped to help you navigate the page.
• The cart page is busy but much of the additional content is promoting value-add services like Club O Rewards, promoting strong savings messages.
• I know from previous testing that cross/up-selling on the cart page can significantly increase cart size. However, forcing people away from the cart to product pages to add additional items can have the opposite effect. This is what Overstock’s does and, as a customer, I’d prefer them to use lightboxes to allow you to make the selection without leaving the cart page. It’s interesting that you can edit a product in your cart on the page but you can’t add another item using the same technique.
• I like the Charity tie-up – raising money for good causes indicates a social conscience that will appeal to some shoppers.
• The ‘save for later’ option for products is useful as it allows customers to park products for future purchases without Overstock losing them from the purchase path entirely.
• They’re using cart abandonment emails to encourage people back to complete their purchase, which is sensible.
• Alternative payment options provide payment flexibility: on offer are PayPal and Visa V.me. There may also be financial benefits to them offering Visa’s wallet solution as the transactions fees are likely to be lower than PayPal (though PayPal has greater consumer penetration).
• Guest checkout is available if you don’t want to create an account – essential for retailers where accounts aren’t required to make a purchase.
• Overstock effectively provides one-page checkout as delivery, billing & payment are on the same page.
• Gift delivery is well presented – the form fields only show if you tick the option for gift order. This is intelligent form design.
• In-line validation is being used in checkout forms – if you move past a field without a valid entry, it is highlighted in red with an error message.
• A separate checkout is provided for international customers. A strange bug I noticed is that you can’t use guest checkout; each time I clicked, it highlighted the email address field for sign in which isn’t the correct behaviour.
• Interestingly, they’re not using postcode lookup for the checkout. Given the research that shows the benefits to conversion of automatic lookup, this is surprising from such a large volume retailer.
• There is a live chat option during checkout, a proven way to help tackle problems, but it’s rather discrete top right and easily missed. However, they may have tested this and found this is the best place to avoid distraction.
10. Mobile site
The mobile site is responsive, serving mobile optimised versions of the webpages based on device detection. A key benefit is that this removes the need for unique URLs for mobile, which is often an SEO headache for duplicate content when not planned carefully.
Unfortunately when I tested there were some obvious bugs on the mobile site that prevented me from doing a thorough comparison with the desktop version, so below are a few key observations:
• The mobile site uses a different navigation UI pattern than desktop – they’re obviously thinking about touch device usage.
• On product list pages there is no infinite scroll, instead you need to press the ‘Show 25 more’ button to reveal more products. It’s sensible not to overload a page for mobile due to download speeds but you can use tech to provide infinite scroll and simply load the products as people scroll down.
• I’m disappointed to find there is no ‘Back to top’ button, so I have to scroll all the way back. Not a good UX.
• Another bugbear of mine is at play when you switch between the mobile and desktop site – no matter what page you’re on, it redirects you to the homepage so you have to start your browsing journey again. They should look to brands like House of Fraser who redirect to the matching webpage when switching, or the homepage only when there is no match.
• The mobile site isn’t always in-sync with desktop. For example, the Down Bedding category has a 10% off promotion banner but this isn’t visible on the mobile category page. The product badges aren’t displaying either, so consistency and sign posting for visitors isn’t ideal.
• I kept getting a Cart error each time I added a product to the Cart – it redirected me to the Cart page but showed an empty Cart with only a Back button to return me to the product page. Hopefully for Overstock this is a temporary bug.
• It’s also disappointing to see such a barren product details page. I know you need to balance how much you put on with the page load issues that sometimes come on mobile devices but I know from experience that you can add components like social sharing without compromising quality.
Comments and questions
I appreciate that this is a whistle-stop tour of the website but what do you think? Please drop by and share your comments, questions and experience. Please also share any relevant links related to website usability that you think readers would be interested in.
I’d like to pay homage to Dan Barker’s excellent post for Econsultancy on deconstructing Jaeger’s ecommerce site which helped give me the structure for this post and I would recommend reading for insight into a useful analytical approach to website evaluation.