10 Ways Kipling's Ecommerce Site Has Recently Been Improved

For the past few months, our Magento designers have been refreshing Kipling’s product listing and detail pages to better merchandise products and more user experience driven.

Working closely with the team at Kipling, our ecommerce team has overhauled the design and functionality of these pages. Taking the page design full width, adding additional details to improve conversion and introducing user experience interactions are just some of the upgrades made.

What changes were made to the Product Listing page?

Improving click through from listing to product page was a key driver for the changes our designers made to the UX and UI of this page.

1. Previously the site integrated image and copy, reducing the possibility of finding Kipling in search engines. We implemented live text copy to resolve this for their optional category banners.

2. The filter mega menu was given a style update. More specifically:
   – It was re-defined by adding styling to hover elements
   – Improvements made to content hierarchy to streamline the user journey
   – White space margins changed to improve readability on all devices
   – Filters and categories now fixed on the left-hand side with ‘sort by’ and ‘view’ fixed on the right-hand side for ease of use
   – Added new functionality that allows customers to easily add and remove filters with the availability to remove them individually or clear all them

3. More product details are now available on the listing page and are shown in a specific content hierarchy to improve click through to the next stage.

4. Promotional badges are now highlighted and styled with coloured typography. Each promotion has a different colour established.

5. A rollover action has been implemented which reveals more product details. For instance, if there are more than five colours by default, two arrows on both sides will appear and work as a sliding controller. For this functionality to work on mobile we made the number of colours the product have visible at all times.

Improving the Product Detail Page on Magento

The content hierarchy was priority number one. The main objective of this re-design was to include the most important details and calls to action visible above the fold on all devices. The key changes we implemented to achieve this include:

1. Product details are re-styled using new typography to improve readability

2. The colour swatches are styled as circles to better match their brand guidelines and we created a hover state to improve page interaction with customers.

3. As part of our responsive exercise, every single device allowed us to show more or less content than others. For example:
   – A maximum of six colours are shown on desktop, eleven on tablet and seven on mobile by default. When a product has more colours available we give customers the option to show more/fewer colours by clicking the below menu: show more (17 colours).
   – Full-screen product image zoom is for Desktop only
   – On tablet devices, we split product details on the left-hand side and quantity, delivery and call to action on the right-hand side. And mobile we kept the same order of appearance as desktop.

4. For product descriptions, we updated the functionality, so that by default, the website displays a small paragraph of text to improve SEO. But, to not overwhelm customers with information and clutter the page, we added a tertiary button: “view more details/ view fewer”.

5. The customer reviews section was also re-styled due to their importance to Kipling’s positioning online. This will help to increase the credibility of their successful products.