Canadian Tire Finder Tool

A filtering feature that allows the user to quickly find their desired Christmas Tree.

Background

Canadian Tire prides themselves as “Canada’s Christmas Store”. The CTR site had a long overdue makeover and launched its new Design System in April 2022. I started shortly after in May 2022.

The new design removed all colour buttons, added more whitespace and showed off a cleaner more “modern” look. One of the old features that was removed were Finder Tools, even though there was data to suggest that sales of Christmas Trees and Toys went up by 23% when the Finder Tool was introduced.

Problem

The Finder Tool was located on a category page in the old design. The new website no longer directed users to category pages but directly to search results pages. That meant that the finder tool would never be seen even if it wasn’t removed.

In addition, the old design used photography and the new design used iconography.

Old Christmas Tree Finder Tool

Screenshot of old Canadian Tire's Christmas category page with arrow pointing at christmas tree finder

The old design also had filters that weren’t important to users (from user testing) like Realism. This idea was copied from the Balsam Hill website which the Business was a big fan of.

We didn’t want to blindly copy the competition and instead asked what was the problem we were solving for our customers. We settled on: How might we help customers narrow down their search quickly for products that had very specific differentiating qualities?

Google Design Sprint

A Designer (before I was hired) had attempted to design this tool leveraging what she saw other competitors were doing when it came to selling Christmas Trees. The VP didn’t like her solution and wanted our team to provide a better solution.

That would be challenging in and of itself. Add in the fact that the Delivery Manager wanted the design the next day because the next Sprint was going to start next week. I had just been briefed a day ago on the project.

I negotiated with the Squad and the Delivery Manager that the fastest way to get a “final design” is through a Design Sprint.

HMWs

We started with a How Might We session where we discussed the Sprint Goals and asked for ideas on how we might achieve those goals.

There was an issue of most of the development and QA team being offshore and our mornings were their dinner time. I agreed to exclude the offshore team due to the time difference.

User Flow

We took the HMWS and organized them into a User Flow. After voting, we removed all the activities that didn’t have any votes and we were able to find our focused user journey.

Lightning Demos

Everyone demoed a different Christmas Tree and Toy website (speaking about what they liked and what they didn’t) and showed the flow from the navigation to the search results and any filtering and finder tool features.

Sketches

We all came up with sketches asyncronously through Crazy 8s and sending the hand sketches through Teams chat and Email. I took the ideas and made wireframes for each of the drawings.

We presented our sketches and we all voted for the design(s) we’d like to prototype. There was a clear winner which was proposed by one of the Ecommerce Managers.

Image of sketch of finder tool with arrow leading to a digital version of the sketch

Rapid Prototyping

Wireframes of the screens were presented to the offshore Squad a day before the start of the Sprint. The BA and PO started writing the User Stories while I stitched the prototype together to do testing.

User Testing

An A/B Test was done comparing the current CTR website experience with the proposed Finder Tool. Here’s the script that was used for the testing:

You have been brought to the Christmas Tree landing page. In this scenario you are looking to find a Christmas tree that is suitable for your home. To begin, please let us know roughly the height of your ceilings.
Now please show us how you would narrow down this list of Christmas Trees that will fit your space, based on the height of your ceilings that you just told us.
From this list now show us how you would narrow down to only trees that are green.
Now show us how you would find a tree that is full (as compared to being slim).
You’re indifferent between coloured lights and white lights, so you want to compare the prices between the two.

2 screenshots of live user interview sessions

Epic Win

All participants preferred the new Finder Tool over the current site. They provided some valuable feedback with was incorporated into the design.

6 user's quotes of their positive experience with the prototype

Design Critique

At Canadian Tire, the process was to always show your designs to the Designers before showing them to the squad. I scheduled to show my designs at the next Design Jam and incorporated the feedback from the Designers into the designs.

What About Mobile?

We had decided due to the limited time we had, that we would only prototype the chosen Desktop design.

We as a group decided to test multiple Mobile designs to find the right design.

User Research

Working closely with the Research team, we A/B tested 6 times to finally get to a definitive winning design. We didn’t like the experience of the front running mobile design, as I felt that it no longer had what made the desktop version so easy to use. Results were never definitive until the last test (which coincided with the end of the 1st Sprint).

The winning mobile design was essentially the responsive version of the Desktop design which therefore required very little code.

This was example of not settling with a slightly positive result and persisting to test until we had a more definitive winner. The Research Manager followed the full story and said it was a great example of why we need to continue to iterate and test. He told us it was truly one of the "great stories" he's seen.
‍

Powerpoint Slide showing 9 out 10 preferred the new mobile experience