A couple of years ago we redesigned that layout of the Circle website and before we did that we spent a lot of time looking at best practice when it came to designing an eCommerce website. Since then we have added and improved in the areas of SEO (a moving feast) and mobile responsiveness, but thought it would be good to take a look at the fundamentals again to see what may have changed.

Getting the home page right

Interestingly the fundamentals have not changed much and that is because space and time remain very limited. A heat map study we did showed that very few people even scroll down the home page let alone browse through categories but search is well used. A highly visible, responsive search is critical.

If people do not see what they want on the first screen, they leave, often within three seconds. That top section of your home page before scrolling is the hero space, you need have what you most want there with a clear call to action. Think of this space as your store front window and it is there to catch the attention of people walking down the street past your shop.

At this point we are going to make an assumption that your primary objective is to sell books and the primary reason customers come to your site is to buy books. The Circle layout is built around this purpose.

If your primary goal is to sell books, and people coming to your site are primarily looking for a book, then you better have one (the hottest one you've got), and the ability to buy it on that first screen.

Branding is important but it should not take half this precious space to tell customers who you are. Keep banner width down to size and make sure search is in it. Having a book, and potentially the first carousel (and search) in the hero section, tells customers looking for a book that they can get one here, and if the one they want isn't in front of them they can easily find it. With these basics ticked off customers might give you more time and start to scroll and browse categories.


Home page vs landing pages

It is important to realise that not all traffic goes through your home page, in fact it is ideal that it does not. Home pages have a limit to what can be put on them, and the majority of your customers will not see what they want there. Like your shop window they are more like a taster aiming to grab the attention of someone that is wandering, not really knowing what they want. To stop them, get them to come into your shop and look deeper.

People that arrive at your home page are likely to be familiar with your shop already, the will be searching for your shop by name or keying the URL or possibly searching for a bookshop in a particular town. Landing pages on the other hand are 'home pages' for a specific product and have the same hero space and need for a call to action, i.e. you need to see that book on the first screen and a button to get it. Landing pages are there for people searching for a particular book, you do not want these people going to your home page and then having to search again. For this reason every book has its own page. A page with a list of books by a particular author could be another one aimed at people searching for a particular author.

Concluding note

If you want to sell books and your customers primarily want to buy books, place books and the ability to buy them front and centre. Things like blogs should be in the navigation and behind the main site and be setup as landing pages for those that are just interested in those things.