Product Detail Page
context
I led the redesign of our course product detail pages. The project started as an update to our back-end architecture and in the process of redesign, I identified major usability issues.
Business Goals
Update the site’s back-end to tie to a CMS for easier course description and marketing updates without disturbing conversion and product sales.
Understanding customer Needs
Utilizing UserTesting.com, I ran usability tests on both divers and non divers. I wanted to understand how people were using our current product pages and identify any usability errors in their process. I found two major flaws:
Consumers are not confident in their purchase because they don’t know what is included in the price.
Interested divers don’t know that diving certification is required by most dive shops across the world.
Moving from mvp
The biggest struggle with this project was prioritizing its development during COVID-19. We had another big project with Local Dive Nearby and product sales weren’t easily projectable with travel restrictions.
Phase 1 (MVP) of redesign started the backend migration. I couldn’t change much in terms of design, but was able to add a couple useful content elements in the page.
Three months after MVP launch, we launched Phase 2. Again, few design changes, but I was able to update the hero - no more CTA below the fold! I also hid less useful information and organized content to bring the most useful pieces higher. I added breadcrumbs to help users navigate between courses in this interim.
Phase 3, in development now, focuses on improved design and content. The biggest fatal error in usability testing was an understanding of the product contents! So, updating content was key in this redesign. I prioritized new, digestible content and provided technical, in depth information lower on the page.
Phase 1
July 2020
Phase 2
November 2020
Phase 3
Expected april 2021
Project Wins (so far!)
Increased number of products added to cart by 140.0%.
Increased number of transactions
after product views by 0.9% (from 1.98% to 2.92%)
Increased average customer confidence
from 3.7 to 4.2 (on 5 point scale)
Decreased critical errors
in understanding from 5/9 to 0/9
Launch with enthusiastic stakeholder support in the midst of a global pandemic!
See it live!
Phase 2 of 3 is live. Phase 3 of 3 expected to launch mid April.
https://www.padi.com/courses/open-water-diver
TOOLS
Figma, UserTesting.com, NNG’s Ecommerce User Experience Vol. 1, Google Analytics, Hotjar
TEAM
David Nguyen (Design Manager), Arron Creechley (UI Component Library), Jasmine Yau (Product Management), Clint Avalos (Tech Lead)