A Research-Driven Redesign of the "Frequently Bought Together" Section to Reduce Drop-Offs
Company
Canadian Tire
Timeline
2 months (2024)
Project type
product revamp
platform
responsive web
Objective
The "Frequently Bought Together" section on Canadian Tire’s mobile e-commerce site was seeing high drop-off rates, limiting product discoverability within the section and beyond. This project aimed to reduce drop-offs and boost user engagement by redesigning the section to encourage further exploration.
My role and impact
As a UI/UX Designer in the project, I optimised screen space usage by 60% on mobile web and achieved 100% task completion rate by co-leading design explorations based on user feedback while balancing business and technical requirements.
My team
Through competitive analysis on 14 e-commerce websites, 2 design iterations, and 2 usability testings, I collaborated closely with the Product Owner, UX Researcher, UX Designer and Developer to create an engaging shopping experience that meets user experience, technical and business requirements.
Before
🏅 After
Encouraging users to discover related products
Canadian Tire’s "Frequently Bought Together" section, located below the product description and above reviews on the product details page, helps users discover up to 3 add-ons and supports cross-selling. From July to December 2023, it contributed over 3.4% of online revenue.
However, high drop-off rates on mobile, where over 75% of customers shop, signalled a need for improvement. The project aimed to understand the drop-offs and create a more engaging experience to help users discover items, boosting conversion.
Identifying long section length as a key drop-off factor
Secondary research revealed that users tend to stop scrolling when they encounter a full-width cross-sell section, assuming it is the end of product information. It prevents users from seeing reviews and Q&A that could help their decision-making.
This insight suggested that the lengthy "Frequently Bought Together" section on the mobile site, which exceeded the viewport, was a major cause for the drop-off.
Optimising section length to enhance user engagement
As reducing section length aligned with a long-term business goal too, the team decided to shorten the section while maintaining the functionality of it.
"How might we minimise the length of the 'Frequently Bought Together' section to keep users engaged in discovering more product details while maximising the value of the section?"
Displaying smaller images as the design direction
Our competitor analysis of 14 e-commerce websites revealed that smaller images maintained item visibility without overwhelming users or occupying the entire viewport. This influenced our decision to display smaller images and hide product details. Considering user expectations, business goals, and technical feasibility, the team decided to explore design options for this approach.
Exploring Designs
Exploring 2 design variations
Based on competitor insights, we explored 2 design options:
Design A: Displayed only the recommended items.
Design B: Retained the current product for user familiarity.
Design A
Design B
Testing and refining the designs
The team conducted unmoderated usability testing with 12 frequent e-commerce users to evaluate both designs for comprehension and usability. Their feedback revealed key friction points in navigation and calls-to-action. Below are 3 key insights and the refinements made for each design aspect:
Layout of the items
Design A
🏅 Design B
Design B: Clear and engaging layout
After testing both designs, users consistently favoured Design B for its clear display of the current product, leading us to proceed with this layout.
"Show details" button
Before
🏅 After refinement
Enhancing clarity with a clearer button
4 participants missed the “Show Details” button, leading us to consolidate multiple actions into a single and prominent button for better clarity.
"Add to Cart" buttons
Before
🏅 After refinement
Improving clarity with a bottom sheet solution
Participants' confusion on the sticky green "Add to Cart" and the "Add x Items to Cart" button highlighted a need for clearer calls-to-action. After feedback from the business team, we leveraged a bottom sheet to display the list with a single call-to-action, improving user clarity.
Testing the refined design
The team conducted a new round of usability testing, helping us assess if the refined design provided greater clarity for users.
Improve clarity for users
In the usability testing with the refined design, the task completion rate improved from 66% to 100%, The improved visibility and clarity of the buttons further contributed to a smoother shopping experience.
Enhance users' decision-making
By shortening the section by 60%, users were able to view other important sections, like "Reviews" and "Q&A," within the same viewport, helping them make informed decisions.
Boost conversions by maximising viewport efficiency
By shortening the section, more product details and cross-sell sections could be included in the same viewport. The optimised flow was expected to reduce drop-offs and increase conversion rate on mobile.
Minimise development effort using an existing component
Using an existing component, the bottom sheet, could minimise development effort.
The final design
Mobile
Tablet
Desktop
Validating business impact with A/B testing
Although the new design achieved a 100% task completion rate, I would also run A/B testing between the original and new designs to compare engagement and conversion. Key metrics that I would evaluate include conversion rate, average order value, time on page, and drop-off rate, which help to validate the design's impact on measurable business outcomes.
Optimising recommendations through user data analysis
I would also recommend analysing user data to personalise the optimal number and prices of items displayed in the "Frequently Bought Together" section.
If the project scope were larger, I would have…
…collaborated with the back-end development team to further improve the algorithm for the frequently bought together items because the item relevance is also an important factor affecting user engagement, conversion and trust on the website.
I am curious to know…
…the impact of cross-sell sections on the shopping experience and conversion. The product page includes three sections: "Similar Items," "Customers Also Viewed," and "Frequently Bought Together." From a user experience perspective, do they distract users from evaluating the current product, or do they assist in decision-making? From a business perspective, do they boost conversion and add-to-cart rates, or lead to cart abandonment by overwhelming users? I would propose conducting moderated usability testing to gather user insights, and A/B testing to evaluate key metrics.
I have learned…
…the importance of using data-backed insights to balance user needs with business goals. Initially, the business requested 8 frequently bought together items, but research showed that irrelevant suggestions could erode user trust for the entire website. Prioritising relevance and credibility over quantity, we reduced the number of suggested items to 4. In future projects, I will continue to advocate for data-driven solutions that align with both technical and business constraints.
∗ ∗ ∗
Thanks for making it this far! I truly appreciate your time in exploring my work, and I hope you found it valuable. If you’re interested in diving deeper into the design process, Let's connect!
