top of page

Canadian Tire Corporation

Store Locator
Enhancements

Role

UX/UI Designer

Tools

Figma, Baymard, User Testing

Duration

6 Weeks

Team

Natasha Grossi – Product Manager

Kelsi Barkway – UX Researcher

Siddharth Singh – Accessibility Lead

Hero Image.png

Challenge

The Store Locator, available across all Canadian Tire Corporation banners, utilizes geolocation technology to enable users to discover nearby stores of interest.

The primary objective was to improve user experience by providing seamless access to nearby stores, allowing users to set a preferred store, and offering visibility into store inventory.

Outcome

— Improved store information readability and reduction in cognitive load

— Increased click-through rate in main call to action which led to higher conversion

— introduced an accessible solution for the list/map view toggle feature

Previous Design

Design Process

By embracing the Double Diamond methodology, we as a team fostered a collaborative environment throughout the design process. This approach enabled me to validate design solutions through iterative testing and refinement.

Mobile-First Design

For this project, there were a number of reasons wanted to go with a mobile-first design approach:

  • About 50% of Canadian Tire’s user base are on mobile

  • Optimizing the experience on smaller breakpoints and adapting the design progressively to larger devices is much easier versus the other way around.

  • Accounting for all instances, the worst case scenario for the store locator would likely exist within the mobile breakpoint

Research and Discovery

During the initial phase, user research was conducted to gain insights on the best practices for the online shopping store locator feature.

Key findings indicated that users desired the ability to find nearby stores easily, access store information and check product availability before visiting a store.

Geolocation Integration: Automatically detect user location for accurate results.

Map Visualization: Display store locations on an interactive map for better visualization.

Store Information: Include address, contact details, opening hours, and directions.

Mobile Responsiveness: Many users access Ecommerce websites through their smartphones.

Recognizing Existing Problems

Before modifying the existing design, I wanted to focus on identifying what wasn’t working from an interaction and usability standpoint based on Medallia feedback provided by business.

Exisiting Problems (1).png

01

The toggle is styled as a link. If it acts like a toggle, it should look like a toggle.

02

The store information extended too far before wrapping into the second line.

03

Users were overlooking the “Set as preferred store” call to action button

Ideation and Prototyping

The ideation phase followed an iterative design approach, allowing me to continuously refine and evolve our ideas based on feedback and insights gathered from team members and stakeholders.

1. Introducing Toggle Buttons

Ideation (1).png

2. Improving Store Information Readability

3. Increasing Call to Action Visibility

Ideation (3).png

User Testing Pt.1

Comprehensive user testing was conducted to ensure the effectiveness of the enhancements made to the store locator feature. The goal was to gather feedback directly from users and evaluate the impact of the design changes on their overall experience.

Participants

A total of 12 participants were recruited for the user testing sessions. The participants selected included age groups ranging from 24 to 58, who had prior experience shopping online using the Canadian Tire website.

Key Takeaways

Participants were able to successfully set a new preferred store without any trouble.

The new design for displaying store information was highly preferred by users.

When prompted to switch to map view, participants initially selected the geolocation button.

Participants stated that the map view icon wasn’t clear – some confusing it for a pamphlet

Participants successfully toggled between the two views upon locating the map view icon.

Iterations

The user testing results indicated a potential usability issue, as participants were associating the geolocation button with the concept of switching to the map view.

This finding highlighted the need to improve the clarity and differentiation of the list/map view interaction and the geolocation functionality.

Solution: Explore new concepts for the both geolocation and map view icon

1. Geolocation Icon Exploration

2. Map View Icon Exploration

User Testing Pt.2

After visual iterations were applied to the map view icon and geolocation icon to address the usability issue identified in the previous round, a second second round of user testing was conducted.

Key Takeaways

Participants were able to locate and utilize the geolocation button without encountering any confusion or difficulties.

Despite the visual improvements, participants were still having trouble locating the map view icon when prompted to switch to map view.

Icons vs. Labels

Icons can be open to interpretation and may not always convey the intended meaning effectively. Labels, on the other hand, provide explicit and descriptive text that leaves no room for ambiguity.

Design Handoff

Interaction

List View

When landing on the store locator page, display list view by default. 

Map View

When user presses the map view button display map view. 

Anatomy

Store Locator Header

1. Search Bar

2. Geolocation Button

3. Inventory Toggle

4. List View Button

5. Map View Button

6. Label

Store Locator Details Card

1. Store Name

2. Store Hours

3. Inventory Count

4. Store Information

5. View Store Details

6. Set Preferred Store CTA

Sizing & Spacing

Button States

All Breakpoints

bottom of page