Solutions engineering for product detail page template "quick wins" focused on CRO optimization
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.
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:
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.
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.
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.
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.
'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.
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: