Problem
Users had long been complaining about the length and density of product review pages. In conjunction with other new products, we wanted to create a sleek, information-packed and helpful product card that did not take up a large amount of page real estate but managed to help customers find their perfect product.
​
A complication: this card needed to extend across dozens of product categories and be uniform enough that backend editing for Content was practical and easy.
UX & Business Objectives
The goal for this was consistent with primary strategies across other products: fit in relevant, helpful product information in an intuitive format that made sense to a lot of different shoppers and extended across many product categories.
​
Importantly, we aimed to promote click-through on the card and eventual purchase conversion without removing details crucial for customers and for search ranking. We also wanted to pare down page content for pages with multiple products so that users would browse more than one product rather than getting stuck on one.
WHAT USERS SAID
Users consistently told us in studies that our pages were too dense and long, and that they often didn't know where to start when shopping on our site. We had strong hypotheses about the information they wanted to see, but the biggest complication was the wide range of preferences in that information and how it informed their shopping journey.
The Approach
This was a major overhaul to a table-stakes product, so we started with a cross-functional design jam to explain the rationale and relevant findings from user studies regarding ideal product details and interaction analytics from users. We got great ideas from participants and did paper sketches that the group voted on; the top-voted elements guided initial wireframes.
​
An early idea that was inspired from another site was to consolidate product information into tabs, so this became the foundational driving idea that would transform the product card without sacrificing product details. This was the MVP that our first user study and AB test were conducted on: tabs on the bottom half of the card and more white space and visuals on the top half.
Then, we started iterations that were more conservative and relatively low-lift while continuing to prove the success and flexibility of the tabbed card itself. Variables were plentiful, and the biggest challenge was making the call for which information to include and how to format it. Combining ongoing user research and quick-series split testing helped us make confident calls for what changes to make and how to create a revenue-boosting, global product card.
AB Testing & UX Research Cycle
AB Test #1
Placed a lightweight, tabbed version of the product block on page to compete with the original accordion block. These versions are relatively similar, with the primary change being to the bottom of block formatting. The tabs were determined by user studies for this product and ongoing market research on mattress shoppers, with insights from SEO also guiding our selection.​
​
Results: Mixed - 2.06% drop to click-through rate (CTR); +3.73% lift to conversions
DECIDING THE TABS
Isolating our first variable to one idea, the tabs, was an important first step in this product development. We chose them with using primarily user feedback and insights with a dose of product intuition:
-
Overview: Ground users in basic details and visual breakdown
-
Who It's For: Users love bespoke recommendations
-
Pros & Cons: Show the good and bad, plus a great boost to SEO
-
Shipping & Returns: A critical aspect of Sleep products
-
Bottom Line: Maintain our voice and review in a punchy format​
Next step: Quick-follow split test with two low-lift changes: replacing price with customer rating and adding a video review link in the Bottom Line tab.
AB Test #2
Swapping out price for customer rating, and adding in a video review link to the Bottom Line tab, we saw no lift to performance. Results were not significant so we felt comfortable continuing to tweak, but we had no confirmation that these tweaks were the ones to get us to our final product.​
​
Results: Flat -1.65% drop to click-through rate (CTR); -3.68% lift to conversions (both insignificant)
​
Observed 36% of users engage with Pros & Cons
Next step: With no clear direction for our next iteration to test, we ran a user study to guide our next version. The study was run concurrently as AB Test #2 was being set up, so it used v1 block.
User Study #1
We wanted to vet the user perception of this tabbed product card and understand where to go next. This was an unmoderated usability study that observed desktop and mobile users use the card organically before asking them to complete specific tasks and probe their thoughts and perceptions of the product. ​
​
Results: Overall users loved this block and found it to be helpful for their shopping journey and its functionality intuitive. Many gravitated towards the Pros and Cons tab (also observed in AB Test #2). People appreciated seeing the price but were confused about how this related to the size and ongoing promotions. Mobile users tended to overlook the tabs, which was also reflected in slightly lower engagement with tabs on mobile in the AB tests.
Next steps: Another round of split testing, adding back price since we did not see a lift from removing it and hearing confirmation from users that they want to see it; adding the phrase "before any discounts" to promote more click-through.
AB Test #3
Included the price again and added language around that listed price being before any discounts.
​
Results: Win - +4.76% lift to CTR; +26.65% lift to conversion rate
Next steps: This was a huge win to prove out this new block format and to justify more work on the top part of the block, which was pending a testing success. We had some wireframes ready for the top part, and we started to prioritize their continued design in feedback sessions.
AB Test #4
For the bottom half of the block, the changes were to standardize icons and colors. Within the top half of the block we wanted to include the following:
-
Superlative (e.g., Best Overall)
-
Image carousel
-
Feature callouts
-
Shipping and trial information
-
Promo
-
Links to video review and full review
-
Rating (with tooltip explaining)
​
Everything besides the image can be hidden, meaning many more variables to continue testing in this product category and others after the product is shipped.
​
Results: WIN +11.27% lift to CTR; +12.15% lift to conversion rate
BLOCK FLEXIBILITY
Tab Contents
Each tab title is fully editable, and the content within each tab is flexible to a set list of content formats. They can also house smaller page blocks, such as the ratings block seen here.
​
​
​
Content Removed
The top of the block is also flexible, with the possibility to add/remove product details, customer reviews, superlative and links to the full product review.
​​
No Tabs
We wanted on option with no tabs since this block can also be used for different page layouts and product types.​​
​
​
​
EXPANSION TO OTHER PRODUCTS
Electrolytes
Treadmills
Saunas
The product card was designed to be global, meaning that it would extend easily to other product categories. Here are a few examples of how the flexible design encompasses general shopping needs regardless of category.
LEARNINGS AND FINAL NOTES
Developing this product required confident knowledge of our customers and their shopping preferences, an intense intentionality to the flexibility and future use cases for this block across shopping categories, and strong cross-functional collaboration especially with the power users who gather and create the backend product information displayed in the card.
​
By breaking up the block build into two pieces (top and bottom), but still committing to our first, strong hypothesis that tabs would solve a lot of customer needs, we created an efficient and streamlined approach to testing and development.
​
A lot of the justification for moving forward with this product, even with early flat test results, came directly from our users in prior and concurrent studies, as well as established findings from other AB tests. We created a strong case for our repository of research and testing insights, and for the cycle of qualitative and quantitative research that informed this product.
​
​