Spark: The distracting visual display on the Product Listview Pages was painful to look at.
Result: An increase for unique PDP pageviews per visit of 13% was just one of the positive effects.
Background
Primarily, the PLP has two goals:
Give a sense to the customer the full breadth of product that's available
Provide the tools for the customer to narrow down their choices
The MotoSport listview pages were a beehive of distractions from and contradictions to the goals of the PLP.
Mobile & Desktop:
Assumptions
Reducing distractions on the desktop PLP will allow customers to more easily find the product they're seeking, thus increasing conversion and PDP pageviews.
The mobile PLP consisted of a cascading list of product categories. there were no actual products shown until the customer had clicked all the way down through the list. Allowing customers to 'get off the train' will also increase conversion and PDP pageviews.
Process
Mobile assessment:
The mobile PLP completely missed goal #1. The only choice for the customer was to narrow down their choices via the manually managed navigation tree, or leave the page and move into search. Search, unfortunately, sent users down the same path. No products are displayed until the full navigation tree had been exhausted.
The touchable area for each product, when the customer reached the product listing, was disjointed. Each product link was made of 3 href's missing the primary realestate directly in the middle of the target.
As a shopper on the listview page, I want to find what I'm looking for with the fewest distractions, because it's easy to get lost in the clutter
Desktop assessment:
A non-contextually aware promotion intrudes on the page, pushing down the refinement tools that should be primary.
The primary refinement, Category, is duplicated at the top of the page. This is because it's undersized and underutilized on the left sidebar.
The MMY selector, while valuable, is duplicated from the top navigation.
Since only 20 items are shown per page, the # of pages to view are excessive.
The video content which is produced to help narrow choices is hidden behind a two click open/play.
Outdated tools, such as list-vs-grid view...
Discount, a relatively high-value refinement, is hidden behind a click.
Product-level clutter with no hierarchy: SALE! Save 10%! CLEARANCE! New! Blowout! Save 13%! Free Shipping, $ Fast Cash, You Save $9.01, Watch Video.
Bonus: an overuse of borders and gradients.
Redesign
New Mobile
New Desktop
Results
The new designs and shared functionality across mobile/desktop had positive results across all devices:
Mobile conversion rate: + 10%
Tablet conversion rate: + 12%
Desktop conversion rate: + 3%
Unique PDP Pageviews / Visit: + 13%
Retrospective
Since the majority of the changes involved removing styles, setting priorities for product-level information and giving the products room to breathe, the project went smoothly. There were only one major blocker: missing product data. Using a 3rd party for search & browse functionality, we were limited on what data could be passed back and forth without extensive API changes. For instance, we were unable to tell the difference between products that had additional view (side/front/detail) photos and those that had photos of additional colors.
Next...
Tie the listview pages together under a single responsive framework.
Improve the product data sent back from SOLR to better merchandise products with multiple photos, customizable products, products that fit your MMY, etc..
Display products in certain categories from a SKU-basis, instead of by product because the variation is so great between skus that primary product images are not diverse enough for decision making.
