IMPROVING JD PRODUCT PAGE

Users are currently confused when selecting colours and sizes when shopping. There is also confusion regarding delivery options.

I was not able to get direct access to the user base but I was able to look at the existing research that indicates 63% of traffic is to mobile devices, 20% on desktop and 17% on Tablet.

I was the sole designer on this project and covered all basis.

Research

I took some time to conduct some competitive research to see what works well. I spoke to a few users of ASOS and Boohoo and they seemed to have a clear understanding of the delivery process and felt quite positive about the experience and convenience.

Audit

I conduced an audit on the live product page and here are my findings.


1. The lack of social proof on this product may mean it’s not serving it’s purpose and rather adding to doubt. On researching other big brands it does not seem to be a main factor in converting the user. So it might be worth hiding it when no reviews are available and using a different part of the site to collect reviews on products, perhaps by email after delivery? The taggstar pop up seems to be a more effective social proof tool.

2. Adding the product code to this section may be causing part of the confusion when scanning the page and looking for options. It appears to be a repeatof the product code which is already located above this section. I would suggest renaming this section for quicker understanding like color?

3. When loading the page, the thumbnail section is not immediately visible. A common trend being used by other big brands is to place the thumbnails on the left or right handside of the product. This is also an opportunity to solve the confusion of colour by adding the visual colour guides by placing all 3 product images there.

4. This add could be reworded or reduced in content to the call to action is immediately obvious

Proposed Changes

1. Rename products so we use less words, this will help reduce cognitive load and allow the user to find choice quicker.
2. Use a quantity clicker so you don’t need a dropdown, this will be useful especially on mobile.
3. Add 3 product thumbnails on the right side of main image so it’s easier to see color options
4. Place delivery options under one link so it’s easier to make a decision.
5. Remove Review section in favour of tagstar social proof.
6. Simplify advert with a quicker call to action.

Wireframe

Hi-Fidelity Design

Other projects: 

Want to get in touch?
Drop me a line!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.