Integrating Canadian Tire’s Component into Sportchek:

Integrating Canadian Tire’s Component into Sportchek:

Streamlining Bulk Apparel Purchase from 8 to 3 Clicks

Brand

sportchek

Timeline

4 Weeks (2024)

Project type

product revamp

platform

responsive web

Overview

Overview

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

Background

Background

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.

The one-click-add-all feature of Canadian Tire's "Frequently Bought Togetehr" component.

Design Challenge

Design Challenge

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?"

Initial Design

Initial Design

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.

Exploration

Exploration

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.

Iterations

Iterations

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

🎖️ After iteration 2

🎖️After iteration 2

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.

Final Design

Final Design

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).

Impact

Impact

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.

Next Steps

Next Steps

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.

Reflections

Reflections

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!

Let's connect

I'd like to listen to your story too!

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

© 2024 Shandi Leung

Let's connect

I'd like to listen to your story too!

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

© 2024 Shandi Leung

Let's connect

I'd like to listen to your story too!

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

© 2024 Shandi Leung

Let's connect

I'd like to listen to your story too!

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

  • ❋ Look forward to meeting you ❋

© 2024 Shandi Leung