The goal for this website project was convergence - to have an online presence that converged with the real, physical shop space in Bicester. All the little, virtual, things on the website were inspired and informed by the real, physical details in the shop and great care and attention were put into the user experience of it all. Particularly important at a time when lockdown demanded that doors be shut, we took full advantage of the opportunity to create a considered online space that works across all screen sizes.

Design Features 

Banner Images

Coles commissioned a number of images to use throughout the site as banners and image blocks. The use of physical shop images helps to show visitors that though they're in a virtual space, there is a physical space they can visit. The banner images are accompanied by a small, editable, text block on the bottom of the image on larger screens to give it context. On smaller screens the text simply wraps below the banner.


Colour to Create Visual Distinction

The previous website focused on the signed editions that Coles sells, but this one brings in the regular stock as well. In the physical shop the Signed Editions are upstairs so to create a distinction in the online store the navigation menu and call to action buttons are green, whereas for the books shop the menu & buttons are cream. For neutral pages, tones of grey are used. The core colours are those found in the Coles logo, but to create dimension and difference online, shades have been introduced.  

Another visual distinction is the ribbon, designed to look like the spine of a book, for signed, signed pre-orders and pre-order books. The pre-orders are also flagged with a little bookmark icon on both the banner, button & in the navigation menu. A small detail, but a consistent visual identifier to spot pre-orders.

Infinite Scroll

What we love about a real, proper book shop is that it draws us in & encourages us to explore. It's wandering from shelf to shelf, section to section & finding a cover or title that intrigues us. Accomplishing this online is an ongoing journey, but part of it is having infinite scroll on category pages. Combining this with the opportunity to jump to specific pages at the top also allows for frequent visitors to jump to the page they want.

Sticky Content

The navigation menu and contact icons are sticky across all screen sizes. This enables visitors to quickly jump to a different section of the website, and also get in touch with Coles. The sticky footer with phone number and icons for map and social media helps to reinforce that Coles has a physical shop space too, with people that will pick up the phone when you call. 

Bells & Whistles

Let's be honest, for an e-commerce site how it works is more important than what it looks like because if someone can't figure out how to buy, then it frankly hasn't met its primary goal. We migrated Coles to Magento 2x software so it benefits from ongoing security updates and support. The checkout process is a beautifully simple thing. Clear add to basket buttons & a sticky cart icon mean it's easy to add and access the basket. Once on the one-page checkout the basket contents can be viewed throughout the process & there is the option of a guest checkout or to create an account after checkout. Account-holders can save multiple addresses. Payment options are laid out in a considered manner, recognising how customers prefer to pay & giving them that option first. Micro details like this make it that bit nicer to buy online. 

The Blog

Tales from Coles is built on the popular WordPress content management system. The customised template has a featured post section at the top of the homepage with areas for the 3 main categories and below, older posts load in chronological order. Recognising the different featured images that would be used, there are 2 image header styles. A full-size image for the majority of posts, but for storytime posts, one that shows the book cover in full alongside the title. 

  If you're a bibliophile, enjoy having a browser around & let us know what you think!