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.
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).
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).
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.
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.
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.
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.
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
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
I’m very proud to say that all three sites have performed really well since their launch.
- Within just two months of their relaunch, AC Computers have recouped their investment in their new site via online sales alone. Read the full AC Computer Warehouse case study
- Furbellow made their first online sale within a week of launching, with traffic and barbershop bookings up as well. Read the full Furbellow & Co case study
- BeerStork have more than doubled their average monthly sales within the first four months of their new brand look and website launching. Read the full BeerStork case study
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 helpful advice and articles into your inbox once per month with the PJWD newsletter.