Product Page Re-design Case Study

Problem Statement

A product description page of an e-commerce site is very crucial for the business, after all, that's where most of the conversions (Add-to-cart) happen. The definition of a user-friendly product page includes it having legible content with information about the product; clear indication of price and product variations; and a review section (to name a few).

When it comes to having product variation options, drop-downs are not the best way to go about it. Drop-downs limits the possibility for a user of exploring every available option, especially if they have to scroll through them. It's even more tough on mobile. The client was concerned about the sale of some products were getting impacted because users were skipping some available options.

Additionally, they were looking for other ways to make the product page more UX-friendly.

Challenge

When the idea of product page re-design was pitched, we were faced with the below challenges

Accounting for maximum and minimum variation of a product (Size & Color).
How to display all variation and availability for each variation.
Special Pricing for certain size of shoes.
Utilizing user generated content to promote the product.
Introducing the Add-to-cart pop-up to promote cross sells.

Tools

Figma
Google Analytics

Role

UX Research
UX Designing
Performance Review

Timeline

6 months (whole project)
2 weeks (design process)

Success Metrics

This project was deployed in 3 phases:

Updating the product variation options layout
Adding Magento cross-sell extension to the Add-to-cart pop-up
Moving the existing user generated content section closer to the product gallery

After these projects were deployed, below were some of the performance improvements that we noticed within a month of the projects going live:

A 0.63% increase in the mobile conversion rate.
3.98% increase in the AOV on mobile with 53.31% increase in revenue from previous month.
The overall bounce rate on mobile reduced by 2.59%.