Focus: Product Category Pages

Most, if not all eCommerce websites have product category pages. Pages where websites list all products or category products for the user to browse through, sometimes filter and eventually choose the product they want to know more about.

In this article, I run through a few eCommerce websites, some following the usual design patterns while others try something a little different from the status quo and at times, target a smaller demographic. I will run through each of these examples and you through the pros and cons of each.

In choosing the eCommerce websites I have tried to stay away from the more known larger brands.

Yelvy

Experimental layouts are not for every brand, but as new businesses and start-ups launch, they look to differentiate themselves from the status quo online. In printed material they would appear in fringe magazines and directly appeal to their demographic so why not online also?

Yelvy Product Category Page

Everything about Yelvy’s website offering is aimed at its demographic. Yelvy has quirky layouts, scrolling effects, the use of emojis and a super minimalist design.

Pros

• Visually styled to their target demographic
• They stand out from the crowd
• Good for short product lists

Cons

• The website relies on Javascript and has no fallback
• Text at times can be un-legible. Black on black
• They could be alienating users outside of their demographic with the style
• No filtering if list was much longer
• No prices or names display without hovering on the image
• The older user may get confused with using this websites UI and layout. The website doesn’t follow standard practices and design patterns which can be found elsewhere digitally

Charlie Paris

Charlie Paris sells jewellery and watches that are not expensive or cheap the price range sits firmly in the middle. Trying to gage or create a visual style for their customers would have been difficult. I think they’ve gaged their audience well using both serif and sans-serif fonts.

Charlie Paris Product Category Page

Charlie Paris has very clean layouts and for the most part, is designed and laid out as expected.

Pros

• Displays products as expected and as a consequence is easy to scan through
• Nice options to change strap colour before getting to the product detail page
• The user can see some of the details on the product images without having to click further
• The navigation follows you down the page as you scroll — keeping navigation close at all times
• Does something a little different in its layout

Cons

• Some of the content is very small and can be difficult to read at times
• You cannot add to your basket straight from this page if you knew what you wanted
• The touch/click areas of the strap colour buttons are too small, and they’re positioned to closely together
• The yellow swatch on the watches is pretty much invisible, even on my 5k display
• The pale blue upon hover and grey text will struggle to show on some monitors/devices
• At first, I thought the collection blocks with images were links, but they are in fact product dividers
• Depending on your screen size the navigation can take up vital screen space

Abel & Cole

If your goal is conversion, I don’t think you could go wrong with Abel & Coles website as a starting point to iteratively improve. Able & Cole is one of the emerging companies delivering ingredient boxes direct to your door. Abel & Cole have busy and sometimes claustrophobic layouts as they try to squeeze in multiple pieces of information and reassurance messaging/iconography.

Abel & Cole Product Category Page

Pros

• Easy to add a product to your basket from this category page
• Filtering in the page to help the user round down the many options that are available
• Filtering is available on smaller devices
• Most of the text is highly legible
• Includes reassurance messaging
• Follows common design patterns
• The navigation follows you down the page as you scroll — keeping navigation close at all times

Cons

• Isn’t particularly visually stimulating and looks like most eCommerce websites. Meaning your chances of being remembered are slimmer.
• A little busy on the page and further spacing of elements may help
• The favouriting tool is quite hidden on top of the product images
• While on these pages there is no way to know what some of the product iconography means
• Typographic hierarchy hasn’t been implemented particularly well

In closing

There are millions of eCommerce websites and apps out there for us to use and reference when we’re deciding our information architecture, the hierarchy of content and designing our layout and all of these options differ depending on the demographic of people we’re targeting. It’s important to remind yourself and your client that with any digital launch that you should learn more and iterate.

Start with the most basic idea and let it evolve naturally with your users and their behaviours.

If all else fails, keep it simple, it usually wins over complexity, and remember only to perform research on stuff that matters.

A small disclaimer: I am reviewing these websites from the outside. I do not know the goals of any of these websites in any way shape or form. So I may say things like “there is a lack of text to help support SEO”, but that particular website/brand may not care for SEO as they get plenty of brand traffic regardless.