The Process: A/B testing

For PDP enhancements, the team A/B tested new features against our current design to decipher which functionality to implement permanently on site. Below are the tests we ran, all successfully increasing product purchase conversion.

Alternate image tile test: Will allowing users to click thru images on PDP as a gallery increase engagement & CVR?

‍Test results: Yes, images increase engagement & CVR

Shade filter test: Will allowing customers to filter shade thumbnails improve decision-making & increase shopping funnel metrics?

‍Test results: Yes

Sticky add to bag button test: Will allowing another touchpoint for customers to add an item to cart increase overall add to cart rate & therefore session value? Or will adding noise to the page deter shoppers?

‍Test results: Yes, another add to cart touchpoint increases conversion

New Information Hierarchy

Next, the team gathered site metrics and general SFCC best practices to update the product page information hierarchy. See our final design solution below along with key findings we based our updates on.

Best Practices & Design solutions

Best practice: Users spend less time on mobile webpages, so condensed and concise copy is crucial. Large, contrasting fonts aid in visually identifying information hierarchy and increase ADA compliance.
‍
‍Design solution: Streamline type treatments, implement high contrasting colors, and condense information.

Best practice: Mobile tab functionality out-performs dropdown functionality. According to site metrics, Users want the option to purchase multiple sizes of a product. Customer service responses call for clear information regarding volume measurements of each product.
‍
Design solution: Implement tabs on the PDP that allow the users to select between mini and full size products. The tabs also include the volume measurements of each size.

Best practice: Based on heat maps of existing PDPs, the top portion of the screen is viewed by the most users, with engagement steadily decreasing as they move down the page. The majority of consumers interact with swatches on a PDP page, and SFCC best practices prove that revealed swatches yield more user interaction than swatches hidden within a dropdown.
‍
Design solution: Pull shade swatches higher up on the PDP by condensing information listed above the swatch section. Continue to keep all swatches revealed on the page, with the option to filter per shades per complexion range.

Best practice: Customers seek straightforward shipping and return policies. 37% of e-comm shoppers will abandon carts due to shipping costs.
‍
Design solution: Add in free ship and returns messaging with iconography to add visual prominence.

final solution

Side by side comparison of the old navigation system verses the updated redesign.

Product detail page

The Process: A/B testing

New Information Hierarchy

Best Practices & Design solutions

final solution

Credits