Johnstons of Elgin – Spring Summer 2020

eCommerce Site Redesign

Over the last 6 months, I have been working closely with the eCommerce team to replatform and redesign the Johnstons of Elgin eCommerce site. As well as including an upgrade from Magento 1 to Magento 2, this has invloved re-looking at many of the pinch points in the user experience of the current site to see how we could improve. Below I have detailed some of the features that have been added.

Spring Summer 2020 Homepage

Enabling colour change directly in the product listing page

One of the problems with the existing site was that there are many products which come in a variety of different colours, sometimes up to fifteen. How do you display these? Do you show the product only once on the category page and potentially miss out on a sale because the customer only sees one colour and they don’t like it, or do you show the same product 15 times over in one listing page and force people to scroll through many iterations of the same product?

Our solution was to display in text form the number of available colours for a product, then, on hover, to show those colours as clickable radio buttons and allow customers to choose their colour and update the product image on the listing page itself. Clicking on that product would open product page for the current selected colour.

Showing online customers the brand story

We knew from research that visitors to either of the Johnstons of Elgin mills were coming away with a solid understanding of the unique heritage and story of the company. This happened through things such as being inside the historic mill buildings that house the store, going on a mill tour, seeing imagery of workers and machinery, and through artefacts around the site. What was more difficult was giving online customers a similar experience of the brand.

There is already a lot of strong visual content on our social channels so this block brings Instagram Story content straight onto the homepage through an overlay that pops out in the same place as the menu on mobile and other elements such as the mini bag. A simple darkening layer ensures that the rest of the page doesn’t distract, and the overlay is easy to close either with the cross or by simply clicking back in the main homepage area.

Making the shopping experience simpler

Another new feature for the site is the Mini Bag. This allows customers to view and customise their shopping bag, including things such as adding gift wrap, while staying on the page they were on so as not to interrupt the browsing experience.

The mini bag overlay is the same size as other features on the site, such as the Instagram Stories, mobile menu and filter, for consistency. It also provides useful feedback for actions e.g. when gift wrap has been successfully added to an item, and calls to action when there are no items in the bag.