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?
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
- 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.
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.
- Swipable images that act as a gallery for alternate product views.
- Pinch/double tap images to zoom and see more image detail.
- 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:
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.