Streamlining Bulk Apparel Purchase from 8 to 3 Clicks
Brand
sportchek
Timeline
4 Weeks (2024)
Project type
product revamp
platform
responsive web
Objective
SportChek, a sports apparel retailer under Canadian Tire, shares the same design system but did not implement the “Frequently Bought Together” one-click bulk purchase feature due to the need for selecting sizes and colours with multiple clicks. This project aimed to solve the issue and implement this component into SportChek to boost the conversion rate, aligning with the brand’s basket-building strategy.
My role and impact
As a UI/UX Designer in the project, I streamlined the shopping experience in the Frequently Bought Together section from 8 to 3 clicks, optimised screen space usage by 57% on mobile web, reduced development effort, and applied the use case for 2 other apparel brands under Canadian Tire.
My team
Through 3 design iterations, I collaborated closely with the Product Owner, Developer, Accessibility Team and the UX Designer to deliver a solution that meets user experience, accessibility, technical and business requirements.
Before: 8 clicks
🎖️ After: 3 clicks
Canadian Tire’s “Frequently Bought Together” component allows users to add multiple items with one click. This seamless experience generated over 3.4% of online revenue from July to December 2023. Therefore, this project aimed to integrate this component into SportChek to boost the conversion rate.
For Sportchek, as there are size and colour options for apparel items, it was a challenge to allow users to add multiple items to their carts with just one click.
"How might we integrate the 'Frequently Bought Together' component to Sportchek so that users are encouraged to add more items to their carts and the conversion rate is boosted?"
The issue:
8 clicks to add one item to cart
The initial user flow
Although the initial design kept the “one-click-add-all” feature, the “Add to Cart” button would not activate until all options were selected or unwanted items removed, with multiple points leading to the unhappy path.
This cumbersome flow discouraged users from adding items to their cart.
Since most error messages were triggered by the “Select All Options” button, I considered revising the copy or replacing it with a deactivated “Add to Cart” button to reduce confusion. However, due to cross-brand design system constraints, this button could not be altered.
With the goal of minimising clicks and simplifying the user flow, I began exploring other design possibilities.
Design A and B
Design A: 3 clicks
Selecting options of all items on the same page (see screen 2)
Removing the “one-click-add-all” feature (same as Design B)
🎖️ Design B: 4 clicks
Selecting options of an individual item on a separate page (see screen 3)
Removing the “one-click-add-all” feature (same as Design A)
Improvement
As the “one-click-add-all” feature in the initial design was the major cause for the cumbersome user flow, it was removed in the exploration phase.
Evaluating the designs
Design A reduced the clicks from 8 to 3 and eliminated errors, but the inclusion of multiple product details on one page raised concerns about slow loading speeds that required users to wait.
Design B cut the number of clicks from 8 to 4 to add an item to the cart. While it retained the “Select All Options” button that could trigger errors, it featured larger product images, providing more engaging online shopping experience for users.
Weighing the pros and cons, I selected Design B for further iterations with the goal of streamlining the user flow and minimising development effort.
Iteration 1:
- Removing a duplicated page
Before
🎖️ After iteration 1
Improvement
As the “Select Options” page repeated information from the first page, the “View All Items” entry point was removed. Instead, the integration of the “Add” button from the design system allowed users to reach the product page with 1 click instead of 2. It minimised development effort as well.
Evaluation
Despite the streamlined user flow, the “Frequently Bought Together” component occupied the entire mobile screen, potentially limiting user discovery of other apparel items and reducing promotional opportunities. With the goal of optimising screen space, I initiated a second iteration.
Iteration 2:
- Reusing an existing carousel component
Before
Improvement
The “Add” button was integrated into the existing carousel component for the “Frequently Bought Together” section, which optimised 57% of space usage on Mobile Web. Besides improving user discovery of other items and promotional opportunities, development effort was also further minimised by leveraging existing components.
Evaluation
Since optimised screen space usage and minimal development effort were key business goals, along with streamlined shopping experience for the users with simplified user flow from 8 to 3 clicks, the team concluded that this design was the optimal solution within the timeframe for Sportchek.
Before
🎖️ Final Design
The final design was the optimal solution because:
User perspective
It could simplify shopping flow (from 8 to 3 clicks).
Business perspective
The simplified shopping flow could potentially boost the conversion rate, aligning with the brand’s basket-building strategy.
Technical perspective
It could minimise development effort (reusing existing components).
Expected increase in conversion with simplified user flow
The simplified user flow reduced the number of steps from 8 to 3, making the purchase process more intuitive and user-friendly. By addressing key user pain points, such as having to select sizes and colors through multiple clicks, this design reduced friction and encouraged quicker decision-making. As a result, the new flow is projected to increase user engagement and drive a 3% boost in conversion rates.
Scalability for other brands and cross-sell sections
Besides Sportchek, this enhanced “Frequently Bought Together” component will be used across other apparel brands, such as Mark’s and Atmosphere. The use of "Add" button could also be applied to other cross-sell sections within the product ecosystem, such as the "Customers Also Viewed" and "Related Items To What You've Viewed" carousels. This scalability could ensure the improvements made here can drive more engagement and conversion across multiple product categories and brands.
Impact on the design workflow
This project allowed the team to collaborate and build upon each other’s ideas. This experience made us appreciate the benefits of collaboration and led to more discussions on subsequent designs, which has greatly enhanced our work efficiency.
Data analysis
To ensure the effectiveness of the new design, I would focus on tracking key metrics such as conversion rate, click-through rate on the “Frequently Bought Together” section, and cart abandonment rates after launch. Additionally, I would analyse user behaviour to see the average number of items that users add to their cart through the cross-sell component, helping refine optimal product recommendations.
If there were a longer timeline, I could have…
…conducted A/B testing to compare the final carousel design and the full-width design from earlier iterations before launch. This would have revealed which design drove higher conversion rates. For instance, would users scroll through the carousel to view all items? Or would the full-screen section cause users to stop scrolling and drop off? This data would help optimise the feature further, ensuring it met both user and business goals effectively.
I have learned…
…the importance of balancing business goals with user experience, and adding a little twist to existing components can deliver both a better user experience and lower development effort.
∗ ∗ ∗
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, I’d love to share my passion with you!
