PLP and PDP Pages
The aim was to streamline both the Product Listing and Product Description pages of this eCommerce website, all whilst making both identifying and purchasing products far easier for all users... newbies or pros in the nutrition world.
Project Outline
The layout and usability of the Product Listing and Product Description pages at PhD Nutrition were in need of a full overhaul. Overtime they had become bogged down in excessive information and unwarranted features.
Initial Steps
This project started with a number of workshops with several departments internally within the business (brand, front-end, marketing, trade etc) as they all had a vested interest in the outcome of this project.
The workshops centred around both wants and needs for each department, identify crossovers and therefore priorities in the project.
Extended workshops also looked into potential new features of both the PLPs and PDPs.
Research
Following the workshops, research of a range of other eCommerce sites was undertaken in order to benchmark and see if similar needs had been reached else where in a suitable manner.
Things such as location of written content, image galleries, transitions down the page and up sale opportunities were all looked into as part of the research.
Sites benchmarked against included;
- My Protein
- Bulk
- Cotswold Outdoors
- Amazon
- Apple
I also held some informal user testing, asking colleagues, friends and gym goers (users of the product) to complete various tasks such as finding products that did 'XYZ' or to look for products that contained 'XYZ' in order to see their thought process and if there were any stoppers to the process.
Design Process
Using the insights gathered from both the workshops and benchmarking I was then able to move forward with some initial sketches.
Something that was clearly shown in the earlier stages was that due to the type of product the business sold and the volume of variety, some users struggled to understand what some products did and what their benefit was to a user. This was due to lack of basic information when landing on PDPs for example.
The priority of the designs quickly and clearly become the transparency of the product when it came to PDPs.
However, on PLPs it seems that actually this was a second though as people preferred to straight up see product and be able to filter that to their needs.
In terms of new features, the biggest win here was to be able to add a feature that allowed quick adding to baskets without having to move from the point that the product was 'sold' mentally to the person - be that at the point they land on the page, when they are reading the nutritional info or delving into the product reviews.
The project moved through several interactions and multiple rounds of testing, internally and externally before reaching the final outcome.
Stoppers
Within this project there was a lot of back and forth with various stakeholders as everybody wanted their departments focus to be the focus of the pages.
Finding a balance between these wants and prioritising the needs of the end user was very important to do whilst also simply improving the over look and feel to the page.
Outcome
The outcome was a big success and received really well both internally and externally.
On the PDPs the new designs took a large portion of the written content (mainly there for SEO and required a 'read more' button to be pushed) and moved it much further down the page, making it accessible still but only leaving the basic 'spill' at the top to intro the page. The cards for each product were cleaned up and simply made neater to make them look cleaner for the user. Other features like 'number of products viewable' and a neater 'quick add to basket' function was added too - all of which benefited the end user but didn't compromise the content on the page.
With the PLPs, we moved some basic written content above the fold. This allows even newbies to have a better understanding of product they are viewing from the moment they land on the page. Content was also resized to allow the 'add to basket' button to stay above the fold too making purchase easy.
The biggest function added to the PLPs was the fact we divided the page in two vertically, allowing the right hand column to move in parallax on desktop. This function meant that where ever the user is on the page, the product selection details, the price and the 'add to basket' button would always be present without them needing to scroll back up the page - making the product easier to purchase as soon as the user decides it is what they are after.
On mobile, the page moves to a stacked view and as parallax isn't possible, the 'add to basket' button becomes 'sticky' at the top of the screen once the user moves past the button when scrolling. When clicked this then returns the user to the product selection fields, reducing the need to physically scroll and keeping the purchase of products easy as soon as the user decides it is what they are after.
Using HotJar, we were able to determine that post launch there was a huge reduction in user pain points and faster moving between pages to checkout completion.
