As part of our website redesign project, we needed to tackle the Product Page. We didn't have any specific problems in mind when starting this project — only that it was a while since it was designed and developed, which has made the Project Page feel outdated. Although there are many features that would improve the page, too much new functionality would lead to a slow page. Part of the challenge is choosing which features to implement and which to leave out.
We did some initial research to determine what needed to be improved with the Product Page. Here's a quick summary of the page improvements:
When conceptualizing the new PDP project, the design team utilized the following research methods:
The design team utilized the new Style Guide (read the case study) when designing the Product Page. We focused on cleaning up the Product Page with an updated color palette and elements.
Watch this video to see a quick showcase of the biggest changes to the product page:
Read further for a full write-up of all the Product Page changes — and why we made them.
The biggest limitation of online shopping is that the shopper can't see and feel the product in real life before purchasing. When shopping online, users rely on the product images to get a better idea of the product's color and texture. That's why it's essential to focus on the product image. In our case, rugs are completely visually-driven (the decision to purchase is based on how it looks) so we needed to be even more thorough.
Increased Image Size. Baymard Institute recommends that visually-driven products should have large default images on the product page to better support users in their desire to perform a detailed visual product inspection. Since rugs are a visually-driven product, we increased the default image size by 60%.
Hover-Based Zoom. Baymard Institute says hover-based zooms require less effort on the part of users to initiate and therefore have a higher utilization rate (compared to click-based zooms). For this reason, we switched to a hover-based zoom instead of the click-based zoom.
Note: Although we design for mobile first (because we have significantly more mobile traffic), some features, including this feature aren't compatible with mobile.
Lifestyle Images. In their article on product images, Baymard Institute recommends showing the product in a lifestyle image. In our case, this meant switching the primary image from an overhead image to a room image.
"By showing the product with other appealing products you can implicitly associate their use and values."
-Baymard Institute
Customer Photos. In that same article, Baymard Institute suggests customer submitted photos as a cost-effective way of providing social proof (showing that other people have actually bought this product) and in-context views of the product.
The Buy Section is where the "Add to Cart" button is located. It usually contains the price and the rug variation like color and size.
Stickied "Buy Section". The "Buy Section" is now always visible on the right side of the page. This solved two problems with our old Product Page:
This is another feature that isn't mobile compatible. Our solution for mobile was to have a sticky header with the product image, name, and "Add to Cart" button.
Size Carousel. The size drop-down has been changed to a carousel so the user can get an idea of the the first few available sizes without needing to click. Furthermore, Baymard Institute explains here that many users will miss variation selectors when in a drop-down, even when it’s placed near or within the “Buy Section”.
As a side point, in the A/B test, the size carousel performed incredibly on desktop, but terribly on mobile. In response we switched back to a size drawer for mobile. This goes to show how the approach for mobile sometimes needs to be completely different than desktop.
Shape Selection. We originally combined sizes and shapes in the size carousel. We found in our internal user research that users would get confused when trying to parse through the available sizes — only to keep stumbling across shapes they weren't interested in. On the flip side, when a user wanted a uniquely shaped rug — let's say square — they had trouble finding it because it was buried in the long carousel with over 20 sizes. To address this, we separated shapes into its own carousel. This is a unique feature that isn't found on competitor sites.
Upsells are a great way to increase the average order value. However, if upsells aren't implemented correctly, users will feel like they're being shaken down and then leave without even purchasing the main product.
Smarter Rug Pad Upsell. The old Product Page had a dropdown with 20+ rug pad sizes, and the user needed to select the correct rug pad for their rug. As you can imagine, in our user testing this led to frustrated users.
To solve this, we needed to rethink our approach to rug pads — and we came up with an improved user experience. Now, when the user chooses a rug size, a matching sized rug pad will be offered.
You might have noticed that in the image above there's now two pads offered. This new rug pad design gave us an opportunity to price anchor the standard pad with a premium pad. The user can click the info button to compare rug pads and learn more.
If there's no more perfectly sized rug pads for the selected rug, we offer the next size up, which the user can cut down to size. How can we inform the user that they will need to cut the rug pad? We could just show the rug pad size and let the user figure it out themself — but that would add unneeded complexity on our user's end. Our first thought was to wait until the user selects a rug pad, and then display a message to inform the user.
The problem with this is that it can lead to "wasted" clicks because some customers don't want to cut their rug pad—and now they will need to check the other pad that's available. Additionally, a user that's moving fast can miss the message and add it to cart.
Our chosen solution was to always show the message if any of the rug pads were too large, and display a scissor icon in the respective pad cards.
From this change alone, premium rug pad sales increased by 200%, while overall rug pad purchases stayed about the same.
Upsell Drawer. Now when a user clicks "Add to Cart", a drawer opens with optional accessories. We partnered with Mulberry to offer extended warranties, which can be selected in the cart drawer. The drawer also upsells the rug pads (if the user didn't add one in the Product Page) and a rug cleaner.
Page Organization. Completely reorganized the page's content and layout into stacked collapsible sections. The old Product Page had the page content in these tabs above the product title.
We found in our user testing that these tabs were often missed — the shopper would scroll down for more information and become frustrated when they didn't see the rug information.
For the new design, we moved away from tabs, in favor of stacked content so they'd be impossible to miss.
Additionally, we decided to collapse the Reviews and Q&A sections after user testing for two reasons:
After launching the A/B test with the new product page, we were surprised by a decrease in conversions. Chaos ensued.
We needed to determine what was causing the lower conversion. However, since this redesign had 10+ major changes, we had no way to know which was responsible.
So what did we do?
We watched user sessions and found two issues that were impacting conversions:
At the same time, we ran more thorough user tests with usertesting.com and found two other reasons for the decrease in conversions:
Once the design team realized the data, we moved the button back directly below the Product Image:
Smaller Sale Banner. Rugs USA has always been a discount retailer (our shoppers come to us for low prices and deals). The first rule of UX design: Know your users. We should've kept that in mind before significantly decreasing the size of the sale banner. The benefit of a smaller sale banner was that it it pulled up other elements above "the fold".
Unfortunately, it was less noticeable, which made it have a negative impact on conversions. We decided to compromise between the two designs:
Conversion: +4.63
Average Order Value: +1.55
As the dust settles, here are the major lessons we've taken away from the project:
User Testing. We need to test current experiences, new concepts, alpha releases, beta releases, etc. We did this on a small scale but now we need to add a robust methodology to the design process. Going forward we’d like to utilize usertesting.com to get a clearer picture of our user’s needs from the start of the project.
Data Analysis. We need to analyze page usage data closer and see what interactions are correlated with higher usage and conversions. For example, we moved this button "below the fold", not realizing it was responsible for 10% of conversions.
Project Scale. We must scale back the size of the projects we do. Instead of an entire Product Page redesign we should have swapped the old Product Page out with new features in piecemeal and tested our biggest hypothesis.
Here are a few Product Page features we designed and plan to develop and A/B test in the future.
