Product List Page - Prototyping & Testing

CONCEPT, RESEARCH, DESIGN, PROTOTYPE

In April, 2015 a colleague of mine started a “Design Science Fair” at Mobify in order to encourage more prototyping and innovation around the work we do, outside of client constraints. 

I decided to exercise a concept that’s been floating around my head for a while which a asked the question: Do we really need separate PDP’s (product display pages) on large ecommerce websites?

The result was a bit of research, some sketches, wireframes, mocks and finally a proof of concept.


Are separate product pages really necessary on Mobile?

Notes

Assumption: Separate PDP pages provide a poor UX and are hurting conversions.
With a properly designed PLP we can provide all of the information and UI elements a user needs to make a conversion without loading a separate PDP page.

Data to pull

  • Total time spent loading (dcl) PDPs per session
  • Number of PDP pageviews per session
  • Number of navigations from PDP back to PLP without conversion
  • Number of navigations from PDP back to PLP with conversion

Questions/concerns

  • What if separate PDP pages are hurting the UX and could be a pinch point for the user journey / conversions.
  • What if removing the PDP page improved the UX and increased conversions?
  • With a properly designed PLP we can provide any/all of the information and UI elements a user may need to make a purchasing decision without loading a separate PDP page.
  • We sought out to validate this assumption by creating a super plp that alleviates the need for a separate PDP page all together.
  • Data supporting this assumption.
  • It’s important to think of this differently than a quick view, users can have a negative connotation with quick views, assuming that they’re only getting a small chunk of the information about the product.
  • With this idea, we’re giving the user all of the required information without the need of loading a new page or suggesting that there even is more to see on a separate page.
  • How will users share "pages"? Individual items.

Sketches

Exploring the possibility of a linear product browsing experience on the web.

Exploring the possibility of a linear product browsing experience on the web.

Vertically stacked products with alternate views and options.

Vertically stacked products with alternate views and options.


WIREFRAMEs and Prototypes

After a few iterations, I settled on a more traditional product list with a few key upgrades to allow the user to explore the products without needing to load a separate page.

  1. Swipable images that act as a gallery for alternate product views.
  2. Pinch/double tap images to zoom and see more image detail.
  3. Add necessary actions to complete a conversion. (size, color, add to cart)

Additional views are  swipable on each product image. Detailed zoom views by double tapping or pinching a product image.


Proof of Concept / Web Prototype

Checkout the proof of concept on a mobile device:


Demo

After demoing at the science fair, I got some great feedback and even inspired the creation of a new plugin for Mobify sites. We're now in production of a zoom feature that works on any image allowing it to expand beyond it's container similar to my prototype.