From 8 to 3 Clicks
Brand
sportchek
Timeline
4 Weeks (2024)
Project type
product revamp
platform
responsive web
Overview
Context
SportChek, a sports apparel retailer under Canadian Tire, shares its parent brand's design system. However, it did not adopt the "Frequently Bought Together" (FBT) one-click-add-all feature due to the need for selecting sizes and colours for each apparel item. This project aimed to address this challenge and implement the FBT section to support SportChek's basket-building strategy.
My role and impact
As a UI Designer, I stepped into a UX role to streamline the FBT shopping flow from 8 to 3 clicks. By optimising mobile web space by 57%, minimising development effort, and fostering cross-functional collaboration, I delivered a scalable solution applicable to 2 additional apparel brands.
My team
During design explorations, I collaborated with the Product Manager, Development Team, and Accessibility Team to deliver a solution that balanced user experience, accessibility, technical feasibility, and business goals.
This project reinforced the value of persistence and open communication. By fostering transparency and collaboration, I navigated constraints to deliver a streamlined solution that aligned with both user and business goals.
Importance of the Frequently Bought Together (FBT) Section
User perspective
It simplifies decision-making by offering curated complementary items, inspiring users to complete the fashion look with ease.
Business Value
It boosts basket (cart) size and drives conversions, aligning with SportChek's basket-building strategy.
The Design Challenge
8 clicks to add 1 item from the bundle to cart
Integrating the one-click-add-all design into SportChek’s FBT would have caused user frustration by requiring manual removal of unwanted items. This misaligned with the design principle of simplifying the shopping experience and risked higher drop-off rates.
The following is the cumbersome flow to add 1 item from the bundle to cart:
This inefficiency highlighted the need for a streamlined solution.
When I joined the project midway as a UI designer, my task was to finalise the UI handoff file under tight timelines and without usability testing, but I quickly recognised that the cumbersome flow conflicted with the design principle of simplifying the shopping process.
It would have been easier to follow the existing plan.
However, as a user advocate, I leveraged prior research and invested extra time to explore alternative user flows, while ensuring the original design was ready for handoff.
Design Explorations
Exploration 1: Removing the one-click-add-all feature
While cross-brand design consistency is important, enabling users to easily add items to the cart aligns with the design principle, user needs, and business goals. Therefore, the one-click-add-all feature was replaced with an existing "Add" button for each item, allowing users to add items individually from the first page and reducing the flow from 8 clicks to 3. This approach supported the basket-building strategy and minimised development effort.
Exploration 2: Reusing an existing carousel component
Prior research revealed that users often stop scrolling at full-width cross-sell sections, assuming they are the end of product information. This behaviour limited product exploration and cross-sell opportunities, risking conversions. To improve product discoverability and support a long-term design direction to reduce section lengths, an existing carousel component was adopted, optimising space usage by 57% for a mobile-first experience while minimising development effort.
Exploration 1
🎖️ Exploration 2
Recognising the importance of alignment, I initiated collaborative discussions with the PM and development team to evaluate alternatives. By weighing options against user engagement and technical feasibility, we crafted a solution that balanced user needs, business goals, and efficient implementation.
Final Design
Integrating another work-in-progress component
Prior research revealed that users prefer quick access to larger images without navigating away from the page. To address this, the "Quick Look" button was introduced across product cards, allowing users to view a flyout on the same page. To ensure design consistency across cross-sell sections, the "Add" button in the FBT section was replaced with the "Quick Look" button, enhancing product discoverability and engagement.
Evaluating the design
The final design was the optimal solution because:
User perspective
The simplified flow could reduce clicks from 8 to 3, creating a more seamless shopping experience.
The "Quick Look" feature could allow users to make faster decisions.
Business value
The redesigned flow could boost conversions and support the basket-building strategy.
The scalable design framework could be adopted in across other apparel brands, such as Mark's.
Accessibility
The streamlined process could lower cognitive load and ensures smoother navigation for keyboard and screen reader users.
Content clarity improved with a 57% reduction in space usage, benefiting users with visual impairments.
Technical perspective
The reuse of existing design system components could minimise development effort and costs.
The solution could ensure a consistent and scalable foundation for future enhancements.
Design Impact
I planned to measure the outcomes of the solution by focusing on user behaviour and business performance through key metrics. Based on the design improvements, I would expect:
User behaviour
A 10-15% improvement in task completion rates, as the simplified process reduces user friction.
Increased cart engagement rates as the "Quick Look" feature enabled faster decision-making.
Business performance
A 5-10% boost in conversion rates, aligning with the basket-building strategy.
Higher average basket rates as the FBT section encourages adding complementary items.
Reflections
Re-approaching the design challenge
Given a broader scope, I would have explored the following questions to validate the FBT section’s need and ensure its seamless integration into the cross-sell section and the broader shopping journey:
Best Items for FBT
Which items work best for the FBT section focusing on complementary items: those with option selections or those without?
Impact on Decision-Making and Conversions
Would the FBT section enhance decision-making and boost conversions, or overwhelm users, causing drop-off?
Optimal Number of Items
What is the optimal number of items to display in FBT to maximise engagement?
Cross-Sell Section Arrangement
How should the cross-sell sections be arranged to create a cohesive shopping experience?
Key Learnings
Embracing open communication
This experience taught me the value of transparent communication and collaboration in achieving better outcomes. In my future projects, I will continue prioritising transparent communication to achieve better outcomes.
Designing with interconnected systems in mind
This project taught me to consider how components interact across sections. In future projects, I will prioritise user-focused, efficient, and scalable designs aligned with broader system goals.
Leveraging prior research to drive decisions
I learned to make use of prior research to guide decisions and ensure designs align with user needs even under 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, I’d love to share my passion with you!
