Previous
Next

Victoria’s Basement Top 10 UX Fails Product List and Filtering (and how to fix them)


The following video covers the top 10 UX issues with Product List and Filtering for the Victoria’s Basement online store.

Product List and Filtering is an important part of product discovery in ecommerce. “If they can’t find it, they can’t buy it”

Watch the video:

Transcript:

Hey, it’s Campbell from Blaze Commerce here.

Today we’re looking at the usability or UX of the Victoria’s Basement online store. This business has five retail stores across Sydney selling homeware. It’s a very competitive market, so usability really counts.

This online store is built on WooCommerce and if we take a look at the Similar Web stats, we can see that the site is ranked around 2000 in Australia and is receiving around 265,000 visitors a month, which is a great achievement.

The site does a lot of things really well, but today we’re going to focus on what they can do better. I’ll share ten UX fails that are affecting product discovery and conversion rates.

Let’s start by taking a quick look at the performance of their site. We know that page speed has a significant impact on usability and conversion rate. If we take a look at GTMetrixs, GTMetrix gives them an overall score of C and they’ve got some issues with their largest contentful paint, so there are definitely some improvements that can be made there.

Next, let’s take a look at their overall usability. We audited Victoria’s Basement against research-backed UX criteria that we know have the biggest impact on ecommerce usability and here are the results. The good news here is that they’re performing really well in some areas, especially the cart and checkout, but the online search and the product list and filtering, both in the poor area, these both relate to product discovery. This is important because it relates to how easy it is for visitors to the site to find a product of interest. They’re performing worst in the product list and filtering. So let’s take a look at the top ten UX issues there.

If you want an example of a site that does this perfectly, check out Neiman Marcus, a high-end fashion retailer based in the US.

I’ll be covering the top ten UX issues using a mobile view of the site. If they are like most of our clients, they’re getting at least 50% of their traffic from a mobile device. We have some clients getting upwards of 85% now on a mobile. So if you fix the UX issues on a mobile, the desktop user experience is likely to improve as well.

To get started, let’s navigate to a category. I’m going to check out Cookware sets.

The first UX issue is the size of the header. You can see that 75% of the page is taken up by the header and the top of the category view and products are only shown from the last 25% of the page. This should be the other way around. Only 25% of the page should be taken up by the header and the category info and the rest of the page should be dedicated to the products now otherwise visitors are constantly scrolling on every page to get to the products.

The second UX issue also relates to the header. It’s best practice to have a sticky header so that when visitors want to change a category or navigate somewhere else on the site or go to your cart and check out it’s right there at the top of the page instead of them having to scroll right up.

UX issue number three is a single column of products at any one time. I can only see a maximum of two products on my screen at any one time. The best practice is to have two columns that would enable me to have four to six products on my page at any one time. As I’m scrolling for this category where there’s 50 products, it will take me 25 swipes to navigate through it. Whereas if you had two columns it would take only around ten swipes.

UX issue number four is the lack of product ratings. Social proof in the form of reviews and star ratings can’t be underestimated in terms of the trust and the confidence it creates in the user to take the next step in this case to be in this case to view the product or add it to the cart.

UX issue number five relates to the sorting of the category results. If I click on filtering, the sort-by at the moment is set to default. Now I don’t know what default means, your guess is as good as mine. They do have the price option there to sort by, but it would also enhance the experience by having other options for sorting including alphabetical or by popularity.

Now the next three issues relate to filtering.

Issue number six is the lack of filter options for showing in-stock products. Visitors often prefer to filter their results to show products that they can order.

Right, now issue number seven relates to the lack of category-specific filtering options. We’re in the pots and pans now, and adding the ability to filter these results based on criteria like induction, glassware, copper base, pan size, that kind of thing, would make it easy for the user to reduce the products down to those that they’re interested in.

Issue number eight concerns the price filter. It’s great to see issue number eight concerns the price filter. It’s great to see a price filter here, but a better user experience would be to enable them to input their own price range rather than choosing from a few arbitrary options.

Now, UX issue number nine is a biggie. When I change filter options here, there’s nothing to inform me the product list has been updated. For example, I could choose Green Chef. If I close the filters, I can see that the filter results have been updated. And likewise, if I uncheck that and we go back, I can see that we now have all of our products again. Reducing the width of the filter canvas is one option. And that would allow the user to see that the list of products has changed as they make their selections. Or simply adding a loading indicator to illustrate that something is happening would help the user experience.

The 10th of final UX issue here is the autoload feature. As I scroll down the page, we have the endless scroll feature which is popular in social media. But the research tells us this should be avoided on ecommerce stores. The users get overwhelmed with choice and they’re really not sure where they are in the list. In addition, it makes it hard for users to get to the footer of your site for any reason. The solution here is to add a Load more button.

That concludes the review of our top ten UX fails for the product list and filtering of Victoria’s basement. None of those issues are major on their own, but when combined they have a significant impact on the overall UX and conversion rate of the online store.

Blaze Commerce specializes in ecommerce UX, and online stores built on WooCommerce. Reach out to us if you’d like to chat about how we can help you take your business to the next level.

Thank you.