Role
Product Designer
Duration
2 Months
Tools
Figma, Prototype, Jira/Confluence
Team
UXR, PM, FED
Platform
Web mobile & desktop
Frequently Bought Together (FBT) Redesign
Our FBT section, once a sales booster with perfect pairings, hit a rough patch. User interactions dropped, sparking our mission to uncover why. Here’s how we turned confusion into clarity with a redesign that doubled engagement, bringing back the sparkle to our FBT feature.
Problem
Low engagement on the FBT feature highlighted an opportunity for improvement. Currently spread across two viewports on the Product Detail Page (PDP), the layout required extra scrolling, reducing visibility and limiting interaction with complementary products.
Objective
Redesign the FBT layout to fit within a single viewport, boosting engagement, and ultimately increasing the Average Basket Size (ABS).
To tackle low engagement and visibility, we redesigned the FBT layout to fit within a single viewport. With a condensed display, expand/collapse function, and a clear add-to-cart (ATC) button, the redesign makes it easier for users to explore complementary items.
Solution
Reduced viewport space by 60%, enhanced visual appeal, and doubled user engagement in user testing.
Impact
Understanding the problem
The drop in FBT engagement first surfaced when our PM noted fewer interactions with the feature and a dip in ABS. Determined to uncover the cause, I took a three-pronged approach:
Internal research review: I reviewed data from the UXR team’s previous studies on FBT, looking for recurring pain points.
Baymard UX Guidelines: I referenced PDP layout guidelines to align with best practices in e-commerce UX
Competitive analysis: analyzed how top competitors designed their FBT section, gaining insights into industry standards and assess strengths and weaknesses of their design
Research
Key Insights & Pain Points
Our research revealed three main issues:
Hidden FBT CTA: Users struggled to find the FBT ATC button, often outside the visible viewport, leading to confusion and friction.
The current FBT section consisted of product cards stacked vertically, with the FBT ATC button positioned outside the visible viewport.
2. Poor placement: Positioned above core product details, the FBT section led users to scroll past it without notice, a known pitfall in PDP design.
3. Lengthly layout: Competitors were adapting to a collapse/expand format that we hadn’t yet explored, which allowed users to see FBT options at a glance.
I explored several design options for the FBT section, using our Design System to quickly create high-fidelity mockups. Focusing on a condensed expand/collapse design, I experimented with various layouts and gathered early feedback from my PM, developer, and accessibility expert to ensure feasibility and inclusivity.
Ideating
After iterative refinements with input from my PM and peers, we narrowed down to three design options.
Working with my UX Researcher, we put three distinct layouts to the test with users. Each design had its unique approach, and our goal was to uncover any usability issues and see how users responded to different elements.
Usability Testing Pt. 1
Design A
Grid Pattern With Current Item Displayed
🥇 WINNER!
Design B
Grid Pattern Without Current Item
Design C
Industry Standard
Design Iterations
After our first round of testing, Design A emerged as the top choice, with 11 out of 12 users selecting it as the most user-friendly and visually appealing option.
“This one, the current item one (Design A), because again, it helps me visualize why I would benefit from buying the other frequently bought items… it’s just the way the images are presented in this one that makes it more clear and more enticing to buy”
- UserSimar03, 28 years old
However, two key issues emerged:
Issues:
Uncertainty around the “show details” button: Users were often confused by the label or overlooked the “show details” (expand) button due to visual clutter in the area.
Button proximity confusion: The close positioning of the primary green ATC button and the FBT ATC button led some users to mistake one for the other, causing friction.
Changes:
Clarified label: Updated “show details” to “show items” for clarity and reduced visual clutter in the area by integrating subtotal to FBT ATC button.
Improved visibility: Changed FBT ATC button changed from a secondary outline to primary black fill.
Usability Testing Pt. 2
After implementing design updates, we ran a second round of usability testing, expecting to confirm the fixes. Instead, we uncovered a major insight:
User disengagement with FBT wasn’t due to a lack of interest but to a significant confusion between the FBT and sticky ATC buttons.
In our first test, this issue was a small blip on the radar. But in this round, it became strikingly clear that the close proximity of the two buttons was causing frequent misclicks and user frustration.
To address this, we collaborated with stakeholders on potential solutions:
Hide the Sticky (Green) ATC Button when users scroll to the FBT section to reduce button overlap.
Dynamic Sticky ATC Button that switches to the FBT function when users reach the FBT section.
Redirect to Bottom Sheet for an isolated, distraction-free FBT experience.
Challenges & Limitations
The first two options presented unique obstacles:
Hiding the sticky ATC button would lead to a jumpy, inconsistent experience as it appeared and disappeared with scrolling.
A dynamic ATC button, while visually cleaner, risked more confusion due to its shifting function.
Given these drawbacks and the business and technical constraints around modifying the sticky ATC button, we moved forward with the bottom sheet option as the most viable path and proceed with the final user testing.
Solution
Before
After
To validate our bottom sheet solution, we conducted a final round of user testing, which confirmed the design effectively resolved previous usability issues. Users experienced no further confusion, and engagement doubled in the subsequent A/B test. The new design received highly positive feedback for its intuitive flow and visual appeal, while also compressing the FBT feature into a single viewport by 60%.
Beyond achieving the business goal of increasing ABS, this redesign tackled a critical usability issue that’s often overlooked in the industry, especially among merchants with a sticky ATC button on the PDP. This project not only delivered on user experience but also has the potential to set a new standard for FBT design across e-commerce.
Reflections & Future Considerations
Key takeaways:
User Testing: Essential for uncovering hidden usability issues, validating design choices, and spotting opportunities for improvement. Without it, we would have missed critical friction points, risking both engagement and business goals. In hindsight, starting user interviews earlier might have revealed the problem sooner, something I could have proposed at the outset.
Visuals: Larger images effectively captured attention, especially for users quickly scanning the page, while smaller elements were often overlooked. Although condensing features into a small form factor is necessary due to mobile’s precious screen real estate, overdoing it can have an adverse effect of being overlooked, as seen in the industry standard design example. Striking a balance between visual impact and compact design is crucial.
Product Relevance: To maximize FBT conversions, the complementary products need to be highly relevant. No amount of design can compensate for mismatched suggestions. Just as a misinformed store assistant might offer unrelated items, pairing an air fryer with an ice maker erodes user trust. Refining pairing logic or exploring AI/ML for smarter recommendations could further boost cross-sell performance and credibility.