JFW Ecommerce PDP & Cart

PM + UI / UX + Development

The Product

Improve UX from product description pages and shopping cart.

User Problem(s)
  • Product description lacked depth
  • Lacked product comparison for similar products
  • Shipping/delivery options and pricing not visible
  • Inventory/in-stock not visible
Business Goal
  • Increase average order value
  • Reduce checkout abandonment

Constraints
  • Updating checkout page not in this phase of the project scope
  • Internal systems do not allow for est. shipping and delivery times
  • 14-day return policy while industry leaders have 30-day

Client

Johnson Fitness & Wellness
CEO, CMO, Ecommerce Director

Live Site

johnsonfitness.com

Year

2023

The Research

"Ok... I had to make my way all the way to checkout to find out the shipping options and cost."

- Website user

"What if this home gym doesn't fit in my basement? ... Can I return it? I can't find how that works."

- Website user

"With price tags like these, I'd like to know what I'll pay in sales tax [and available financing]..."

- Website user
Users
  • No visibility on tax, shipping options and costs, and return policy
  • No visibility on financing/payment options
  • Lack ability to zoom on product images
  • Can't compare product attributes on same page
  • Product descriptions not easily scannable
Business
  • Increase AOV via add-on products
  • Decrease cart & checkout abandonment rate
  • Drive more in-store traffic
  • Increase in-store sales

The Design

The goal was to improve the UX across the board on the PDP and cart:

  1. Implemented respected online financing option for our user. Allowed for a financing widget on the PDP, in cart, and checkout
  2. Updated gallery with zoom light box + thumbnail images rather than dots
  3. Consolidated "cardio fame" + "console/display" (initially 4 separate products) into a single product with ability to select/compare consoles for single frame
  4. Integrated inventory and added "on display" and "in stock" callout based on local store, along with feeds to paid search
  5. Moved product add-ons from above the "add to cart" into a lightbox that fires after "add to cart" is clicked
  6. Added estimated shipping and tax (with the ability to edit zip code) in cart
  7. Added company value props within shopping cart under checkout button
  8. Added sticky navigation to product description for better accessibility to different sections
  9. Added shipping and return details link above "add to cart"
  10. Added shipping details link above "add to cart"

The Analysis

After go live, we saw the following:

  1. 36% of previous total year's ecommerce financing revenue in first week
  2. 41% of hard good purchase now include at least one additional product
  3. 80% increase in YOY launch-to-date ecommerce sales
  4. 76% increase in YOY launch-to-date ecommerce orders
  5. 15% increase in YOY launch-to-date ecommerce AOV
  6. 7% decrease in YOY launch-to-date ecommerce users

It's never a finished product. More improvement needed in the following areas:

  1. Implement a photo res-up API, and add actual zoom capabilities on image gallery
  2. Move shipping/delivery options/methods along with estimated delivery dates to PDP, and allow users to select at this stage
  3. The entire checkout UI/UX
  4. Working with stakeholders for better return policy and can push "worry free returns"
  5. Working with fulfillment team to provided est. delivery timelines per shipping option