Project Overview:
Role: UX Designer
Duration: 2 months
Team: Collaborated with UX Team, Developers & Ecommerce Stakeholders
Tools Used: Axure RP, Adobe CC, Exponea, Adobe Analytics, Jira.
Background
Complete overhaul of the product list page from filters to price messaging.
Product listing pages are the modern day catalogue. The ability to narrow down products can arguably be one of the most important parts of the customer product searching journey.
Old Product List Page
Previous PLP points of interest
- Outdated filters
- Small prices
- Failed Accessibility
- Image quality
Problem Statement:
This part of the shopping journeys needs to have crucial aspects such as ease of use of filters, scan-ability of product cards, quick accessibility of key product information and clear product images.
Research:
Competitive analysis is a keystone of understanding the competition and what is current best in practice design trends customers expect to see.
By understanding what customers shopping expectations are or what other websites are missing from their customer experience we can design tests to approach the gaps in the customer journey.
Design:
Designing wireframes is a perfect way to determine how much information is required on the page to help the customer move forward in their journey.
A great time to get stakeholders sign off on base ideas and run a few scenarios to ensure the premises make sense before going into fully fledged UI. Mobile product list pages are the everyday research and instantly accessed catalogue of any retail experience.
A key part of this project was to ensure an improvement to filter interaction and behaviour. Smart filters that update current number of remaining products based upon the customers selection help to prevent over filtering and helps manage expectations.
Different layout options make it so depending on product category or customer viewing preferences customers can select list format for one at a time and have the choice to have a larger image negating having to click to product details page, alternatively 2 columns are great for comparing large range of products side by side.
Desktop filters have sat on the left hand side of the product list page forcing customers to scroll to use filters, sometimes the page can reload after filter activation and puts you back to the top of the page which is not the best customer experience.
The idea of these filters are to encourage the customers to make their selection before having to scroll down the page. The showing X amount of products is constant so the customer will not run out of products.
Trying to make filters more visual we added small icons depending on the filter type. The diamond cut filter is a great example as a small vector previewing the shape next to the cut type clears up any terminology confusion, if it was based on colour we used swatches and for metal types we had a gradient metal circle.
We use Sketch to create the full working UI and wireframes but the next step is getting a feel for the working page for testing.
AxureRP is a fantastic piece of software for getting a real feel for a page design without sacrificing development time.
Design a full working product list page on 3 devices is quite a task but is worth the time as it can also be used for user testing.
3 major stages of getting the feel for this page was a working filter that shows accessibility, working active an inactive effects, hover effects on the product cards and scroll behaviour. An added bonus is getting the drop down filter to rely on the device OS as this guarantees the user are familiar with how the dropdown works.
The dev team also have a great advantage with the prototype in the development process as they have a chance to use it themselves to understand how the experience is meant to be for the customers.
New Product List Page
The new PLP has a updated clean design prioritising:
- Cleaner imagery
- Fully accessible text
- Updated icons
- Mobile friendly filters
- Scannability of products