WeAreShoe – Product List & Filtering

Even though we'll see a few generic aspects along the way, the main focus area of this teardown is the Product List and Filtering.

The thing that grabs my attention is the lack of a persistent main navigation. It is invoked by clicking on the hamburger icon.

And here are the store's top categories.

Hiding the main navigation behind an icon is the best way to ensure users don't see what the store offers when they land on the homepage and is the worst implementation for product discovery.

Let's see what the SHOP offers

Ah! Here it is. The store's top categories displayed as part fo the main navigation.

Onward to see the Women's collections.

And there it goes again. The top categories are no longer displayed. The sub-categories under the Women top category have taken its place in the main navigation.

Having a persistent main navigation that includes to store's top categories is paramount to users' product finding abilities.

A mockup of how the hidden navigation can be split into a persistent main navigation that includes the store's top categories and a courtesy navigation to place other important links in the header.

Alright then. Its time to focus on the Product List and Filtering.

Speaking of Product Filtering, where are the filtering options? Though not recommended, they are often hidden behind a Filter link.

There are no filtering options!!!

An apparel ecommerce store that has no filtering options!!! Do they expect shoppers to scroll through their entire collection under every single sub-category?

Nobody wins when the shoppers' product discovery mechanism is made fully manual without levaraging the store's and products' inherent attributes.

Let's see how shoppers can benefit from a product filtering ability.

Having a Filter by category that lists sub-categories effectively informs the user about the range of products the category carries.

Users will apply filters and narrow down the product list to a manageable chunk.

Including the number of items beside each category name will help them take these decisions.

Implementing important product attributes as filters allows users to narrow down interested products.

A quick look at the products reveal that a majority has color and size variations.

Let's add the color and size attributes as filters.

Shoppers will also benefit from being able to filter products within a category based on their price. So, let's add a price filter too.

With numeric filters like Price, in addition to pre-defined ranges, a user-defined range filter allows users to filter products above or below a set value.

If the number of items in the product list is not displayed, users lack important feedback on the quality of the category scope.

When displayed, it will allow them to focus on narrowing down the list instead of wasting time browsing an overly broad scope.

For products with visual variations such as colors or patterns, having swatches in the product list thumbnail will inform the user that the product comes in a variety of options.

The swatches must be displayed by default and not on hover. The main product thumbnail can be switched based on the variation swatch being hovered.

When users filter the product list using a variation attribute, the selected variation should be made as the default thumbnail.

For eg, when users filter by Orange color from the filter sidebar, the default thumbnail should be changed to that Orange Fleece Beanie variation.

The built-in delivery wait time for web stores, as opposed to physical stores, is an opportunity for sites to complete orders for products, even if they're temporarily unavailable.

By simply increasing the delivery date of products instead of showing Out of Stock, users who decide the extended delivery window is acceptable will place the order.

They often have a hard time finding items that they just added to the cart.

When a product is in the cart, it can be helpful to highlight it in the product list.

Loading more products when the user scrolls to the bottom instead of having pagination links is generally well received by shoppers.

Making filters sticky allows users to continue using them when scrolling through the product list.

Users will also benefit from having a Loading... indicator.

Thanks for reading!

Wanna know when we launch new ones?

/ 87

You can use keyboard key.

/ 87

Want your favorite ecommerce store torn down? Let us know in the comments section below. If you found this teardown interesting, please share it with your development partner, web store owner friends and followers using these handy buttons.