Skip to content

This past year I’ve designed a growing collection of varied eCommerce websites for amazing small businesses around the UK, including gentlemen’s fashion store Furbellow & Co, beer delivery business BeerStork and computer shop AC Computer Warehouse.

eCommerce projects are always interesting. Whilst these three sites are similar in that they are all built using WooCommerce, the popular eCommerce extension to WordPress, they are greatly different in design.

Clothes, beer and computers are all very different products and as with all websites I create, each one has been custom designed and built to suit their respective:

  • Customer base
  • Product values
  • Individual goals of the business

In this blog I’d like to share some of my thought process between working on these three different shops, with particular focus on the product listings and product detail templates.

Designing a good product listings page

The first key template of an online shop is the product listings where the main aim is to help your customers find the products they are looking for.

It’s important for a fashion store like Furbellow & Co to keep the interface simple and make the wonderful product photography (by Whitby photographer Ceri Oakes) stand out.

When choosing an item of clothing, a customer’s first impulse is to see what it looks like. So for Furbellow & Co, the product photo takes centre stage, along with the price. When looking at the product, the person can click through to find out more key information like the size (just as you would do on a rack in a physical shop) and the story behind the product.

Meanwhile with BeerStork, just like you would be looking at beers in a shop, the first thing you spot is the label. So again the photo stands out (designed to be portrait orientation to better suit the bottles). Unlike with Furbellows, when buying beer you’ll be interested in the AVB percentage and the type of beer it is, so this information is presented on the product listing before you click through to the main product template. This is shown once the user hovers over to avoid cluttering the page (much like picking a can up off a shelf to inspect the label).

I worked with branding designer Creative Wilderness on the BeerStork website. Key action areas (like the add to basket button) are in orange and secondary areas (like the filters and checkout link) are in yellow to stand out against the cream background.

As beers are a low-value item, it makes sense to have the add to cart button on the product listings so customers can easily put together their orders without having to go into each individual beer’s pages. This also makes repeat orders much easier if you already know what you’re looking for.

Selling higher-value items such as computers requires providing much more information for a customer to confidently buy the product they want. The key selling point of a computer is the specification. This is arguably more important than what the computer tower looks like. Therefore on the AC Computer Warehouse website I made the thumbnail photo smaller to give centre stage to top-line specification data. Each product listing automatically pulls out the three main spec points (processor, hard drive size and amount of memory).

One of the key areas of the AC Computer Warehouse website redesign was making products easier to find and understand their specifications.

Due to the larger amount of information on show in the product overview, the AC Computers listing suited a vertical list rather than a grid.

All three websites use filters, with AC Computers having the most options in order to allow customers to find their ideal product based on their required specification.

More Articles in Web Design

BeerStork customers can search for a drink they will enjoy based on tags such as category (e.g. IPA, stout or sour), brewery and country as well as their AVB percentage, allergens and whether the beer is vegan friendly.

Designing the product detail page

The product detail template is key to any online shop and again each business requires a different approach. Typically the product detail template is the page which requires the most consideration during the design phase.

The main aim of the AC Computers product template was to present the important spec information in a way that is clean and easy to read. Larger photos are also provided here for the customer to have a closer look at the actual item.

As AC Computers sell custom-built computers, their product page has extra functionality to allow customers to upgrade certain products (e.g. add more memory or RAM to a laptop) on the product page.

Text-heavy sections such as warranty and delivery information are positioned further down the page under subheadings and can be accessed if required without cluttering the page.

The BeerStork product detail page presents each beer’s key information in a clear way, including the AVB, size, brewery and allergens.

By comparison, BeerStork customers require less information to buy a beer. Key information such as AVB, size and vegan friendliness are all highlighted with further information such as the hops used and allergens listed below.

On desktop all of this sits side by side so you can see the product photo, information and ‘Add to basket’ calls to action at the same time.

Again, the Furbellow product page is kept minimalist to let the product photography shine. Key actions like the size selection and add to basket button stand out against the navy blue background.

For a clothes shop such as Furbellows, photography is most important, so the product gallery is much larger than the other sites. As clothes shots are typically in portrait orientation, I positioned the thumbnail gallery to the left to they can always be accessed without having to scroll past the active gallery image.

The product descriptions are kept minimal, with information such as the model’s height and product size used to give extra content to the images.

Mobile use for eCommerce websites

The BeerStork product page has its main call to action pinned to the bottom of the screen on mobile so it’s always accessible wherever you are on the page.

It goes without saying that all modern websites should be mobile friendly, particularly with eCommerce websites where mobile use is typically very high as people shop on their phones and tablets.

Understanding how the different audiences of your business will use the website should influence how your website is designed.

The general assumption is that people at work are likely to be on a desktop/laptop, whilst people at home are more likely to be on a phone or a tablet. Studying the the Google Analytics data for these three sites backs this up:

  • AC Computers, whose customer base is split between business and consumers, is roughly 53% mobile and 47% desktop.
  • With beer being a direct to consumer product, BeerStorks’s mobile traffic continues to grow with 62%.
  • Furbellow’s traffic is a whopping 75% mobile.

These numbers are staggering. Any website that is consumer focussed shouldn’t just simply stack into a single column layout on small screens, it needs to be designed specifically to provide a good user experience to anyone using a phone.

Design ideas for mobile

  • Keep content short and snappy. Break up your text with sub-headings and use images and bullet lists where appropriate.
  • Fix key calls to action such as ‘Add to basket’ to the bottom of the screen.
  • Include links to related products at the bottom of the page so customers have options when they scroll to the end of the product template
  • Put key products at the top of the product grid so they get more clicks

The results

I’m very proud to say that all three sites have performed really well since their launch.

This shows that web design that really thinks about the business and its objectives can make all the difference to the bottom line. It really isn’t simply a matter of installing WooCommerce. It’s about treating the business as a unique individual, rather than whacking a logo on a template.

I’m currently taking booking for new eCommerce projects for 2020 so if you’d like to chat about your online shop, please get in touch.

Get the most from your website

Get helpful advice and articles into your inbox once per month with the PJWD newsletter.

    1 email per month. Unsubscribe any time!


    Get The Most From Your Website!

    Recieve helpful website advice and articles (plus dog photos) into your inbox once per month with the PJWD newsletter.

    Get the PJWD Newsletter