In our experience, clients typically view the homepage as the most impactful page on their site. But data shows many shoppers begin their sessions on the product detail page, or PDP.
Supply, a client of ours, has nearly 38% of total traffic shopping on their product pages. We're going to share some insight into our PDP design decisions for them, because optimizing these key pages typically represent a significant opportunity to impact site wide conversion.
Why the product page is the most important page
The product detail page is the backbone to any digital store - it’s where the sales happen.
This key page has many important elements attached to it. It needs to introduce. It needs to educate. But most importantly, it needs to convince.
Let’s walk through some of the most common (and necessary) elements of a product page, based on industry best practices:
- Feature photo(s)
- Product overview with price, features and variant options
- Product description
- Prominent call to action (CTA)
- Cross-sell
- Social proof
All of these elements are important to include, but without a thoughtful strategy it can overwhelm the shopper. The goal of a PDP design is to present visitors with enough information to make a decision, but not too much that is distracts from the sale.
From the start
As with any product page, there are quite a few pieces of educational information that need to be communicated, especially when you consider a significant portion of incoming traffic lands on this page first.
In Supply’s case, it’s important to immediately address what makes their product so unique - that it’s a single blade razor. We need to sell shoppers on the benefits of it, especially since multi-blade razors have long been advertised as the best shave possible.
Let’s look at what users see when they first land on Supply’s original PDP:
While this eye-catching photo does a great job of encapsulating readers, the product description can overwhelm the shopper with all of the information that’s communicated.
We updated the copy to remove the noise, filtering it down to solely focus on why it’s the best shave of your life. We also add in one of Supply’s strongest ecommerce value propositions - their 100-year warranty. This adds another level of trust for those first-time viewers who, even if they aren’t persuaded to buy, may be inclined to keep scrolling down the page.
Instead of a full-size hero image, we opted for a 3D model of the product which allows visitors to view the razor from all angles. It also provides more insight into the quality of the razor by emphasizing its durability.
What is included
If users aren’t convinced by the hero content we need to provide some additional information to explain what is included in the package, which also helps to justify the high price point.
On their original razor PDP Supply uses visual icons to tell shoppers what is included in each razor package (number of blades, the different settings, and the lifetime guarantee).
Rather than using visuals to display this information, we clear up the confusion with concise copy that communicates exactly what each shopper receives when they open their package from Supply. We use this section to once again sell the benefits of the razor (i.e. easy for beginners, suitable for everyone).
Focus on the copy
As shoppers continue to down the page, we want to provide them with more educational content. Supply’s current product page walks through some important details that shoppers want to know before they decide to purchase a razor. They dedicate a paragraph to explain the razor, the blades, the settings, and the warranty.
While these are important details to disclose, the amount of words to describe each section can be overwhelming.
In our design update, we rely on this same logic. However, we cut down the copy and focus on two key product details: why the single blade is a better shave (especially important considering 75% of their customers have never used a single blade before), and the quality of the product. We do this to reduce friction and better explain to shoppers why this razor is the best shave, and worth the money.
To continue with storytelling, we add a 10-second clip of someone using the razor, so visitors gain a better understanding into how the razor works. This gives some motion and life to the editorial section of the page as well.
Speaking to the smarter investement
Through our discovery process, we learned that the high cost of Supply’s razor is a big pain point for shoppers. Therefore it’s another important element to address on the PDP.
On their original homepage, Supply had a nifty GIF highlighting the cost-savings of their razor versus disposable ones. We opted to move this GIF to their product page, helping ease customers who are a bit hesitant with the price point.
Don’t forget about the cross-sell
As visitors shop, we want to invite them to learn about additional products, like their shaving brush, bowl, settings, blades, etc.
Supply currently does this with their cross-selling section near the bottom of the PDP, and we’ve adapted this to their new product page, but with updated copy that feels more welcoming and real - all in line with Supply’s brand voice.
Adding in social proof
Finally, if users make it to the bottom of the page, it’s time for one final attempt to convince them to buy. We clean up Supply’s review section, and link to them at the top.
Giving visitors easy access to buy
The overarching objective of any product page is to make a sale. That’s why a prominent CTA is necessary - you always want to give shoppers easy access to buy.
Rather than keeping the CTA at the top of the page, we’ve implemented a sticky CTA which remains visible as users scroll so they can add to their cart as they learn more about the product (if they decide to scroll to the top, the CTA disappears).
We also added in a subscription offer for replenishable products (think razor blades, shaving cream, etc.) to drive repeat business.
Getting up to speed
Finally, Supply's average page speed sits at 5.08 seconds, with their PDP's taking the longest to load (most sites should aim to load somewhere between 2 to 3 seconds).
When you consider that a 1-second delay in page speed time can cut conversion rate by up to 7%, Supply's PDP page speed is a huge area of opportunity on their site.
Our goal is to create a speedy PDP for an all around better customer experience.(And we'll be sharing some insight into our approach soon. Stay tuned.)
Providing inspiration
We tied our strategy and brand voice together to create a meaningful page where visitors can learn all about the product. Every change we made on this page helps to streamline the content, making it more scrollable with the ultimate goal of making a sale.
So how did these changes work for Supply?
Supply's Single Edge PDP conversion rate is up 101% following the launch of their new site!
They've also seen a nice boost to their homepage conversion rate, which rose by 126%. You can read all about the changes we made to this key page here.
More results from the rest of our efforts with Supply can be found here.
