Catherine Hur

Back

CBDfx

Product Detail Page

Redesign the product detail page utilizing best e-commerce usability practices.

Tools

AdobeXD

Problems

  • The current PDP layout have product information in two different places. Some product information is on the right side of the page, next to the product image and rest of the information at the bottom of the page, below the fold.
  • Depending on the amount of copy the Add To Cart button usually disappears below the fold.
  • The page has a large amount of SEO copy below the product information. The stake holders wanted the SEO section to be more easily digestible for users.

Solutions

  • During user testing most users wanted to know the benefits of the CBD without having to read through a lot of copy. I introduced the "Benefits" section for customers to quickly skim the benefits.
  • I consolidated all the product information the right-hand side of the layout.
  • Utilize the current UI trend in making the product image sticky till the end of the product information.
  • To keep the Add To Cart button above the fold, I used a "read more" and "read less" accordion function and limit the amount of information shown on default.
  • To give users more compelling experience, I introduced more images and graphics to the SEO copy.

Research
 

Google Analytics
Get page performance and customer insight.

Articles
Read articles on PDP best practices from Baymard Institute, Smashing Magazine, and Nielsen Norman Group.

User Interview
Usability test the redesigned PDP prototype.

VWO
Generated heat map to see where on the page users are clicking the most.

Competitive Analysis
Analyse other CBD and CPG ecommerce product detail pages.

A/B Testing
Reviewed all the A/B testing results for the product detail paage.

Wireframe
 

Product Detail Page Wireframe (Default)

Product Detail Page Wireframe (Read More)

Redesigned PDP