Optimizing the Product Detail Page
Solutions engineering for product detail page template "quick wins" focused on CRO optimization
Tools Used:
Figma, Sketch, InVision, Shopify Plus
The product detail page (PDP) is a core page template that is essential to any ecommerce store. It balances imagery, core product specs, and storytelling elements to entice a variety of customers to make a purchase. I have worked with a variety of Shopify Plus clients across the beauty, specialty hobby, health & wellness, and apparel industries to design various PDP modules that suit their specific content needs. Designed on behalf of eHouse Studio.
Solutions Engineering & Implementation
Determining how to overhaul a PDP design can be a daunting process for both a client and a design team. I find that the easiest way to tackle an overhaul is to divide it into a few steps:
STEP 1:
Kickoff Call
Setting up a call to capture the client's initial vision, requirements, and limitations helps to get all the initial ideas on the table while also giving space to the stakeholders to vocalize their needs upfront.
PHASE 2:
Requirements & Market Research
Once the kickoff call is complete, I read through the notes and summarize the core requirements. I then define the core use cases and expected functionality as well as any open questions. I also study any cited examples for visual and functionality-related inspiration.
PHASE 3:
Wireframe & Iterate
After market research and use casing, it's time to wireframe the feature's flow. I cross-check these designs with the use cases regularly to ensure that the requirements are being met. There may also be rounds of collaboration with the client and development team at this stage.
PHASE 4:
Handoff to Dev & Visual QA
The last stage is to tighten up the details and hand off the designs to development, ensuring that all settings, expected functionality, and technical approaches are accounted for. Once the feature is developed, a couple of rounds of visual and functional QA are conducted before demonstrating to the client.
Some Favorite Solutions:
'Before-After' CMS Module
Showcasing impactful product results with a draggable before & after photo slider
This module allows admin users to include impactful, image-driven before-and-after testimonials. The admin user can feature a short-form quote from a testimonial alongside one of two types of image displays: a single "after" image or two images layered on top of each other with a magic slider for users to drag back and forth to compare before and after results.
An example of this can be seen on the product detail pages for Ceremonia.
Tabbed PRoduct Details
Divide Product Details into Smaller, Digestible Below-the-Fold Tabbed Details
This product-level feature can be useful for visually breaking up long product details into more digestible sections of text. It can also help carve out key characteristics for a brand's product line and create content patterns that can accelerate a user's browsing process.
An example of this can be seen on the PDPs for The Goulet Pen Company.
Upsell Modules powered by Rebuy app
Implementing "Sections Everywhere" Rebuy Widgets to increase upsell opportunities
Rebuy is an app that provides recommendation widgets that can be implemented on an ecommerce site to facilitate upsells and product recommendations. They are powered by smart data that admin users configure to product tailored results for different users.
An example of this can be seen on the PDPs for BIOHM Health.
Other PDP Enhancements
The right PDP optimizations for a client will depend on a number of factors — how many products are in the catalog, how much bandwidth an admin team has to populate and update site content, how products and collections are set up, and so on and so forth. But a few additional favorite details and implementations I've had a chance to work on include:
Sticky Gallery Functionality
Enabling sticky gallery functionality on desktop for long buy boxes can enhance a user's ability to simultaneously look at photos as they read product details in the buy box. See an example of this on SimplyProtein.
Video Functionality in Gallery
Adding video functionality to image galleries and content modules allows clients to feature product campaigns to paint a more vivid picture of products in use. See an example of this on Ceremonia.
Sticky "Add to Cart" Banner
Creating an "Add to Cart" banner that appears when scrolling past the buy box keeps the call-to-action on the PDP at top of mind for the user and reduces scrolling. See an example of this on BIOHM.
Brand Value Proposition Content Modules
Adding content modules that highlight key ingredients and brand value propositions provides a short-form style of storytelling through imagery. See an example of this on SimplyProtein.
