top of page

Canadian Tire Corporation

App QR Code Component

Role

UX/UI Designer

Tools

Figma, Baymard, User Testing

Duration

3 Weeks

Team

Natasha Grossi – Product Manager

Meghan Bennett – UX Researcher

Siddharth Singh – Accessibility Lead

Background

The project aimed to optimize the acquisition of mobile app downloads for Canadian Tire by implementing organic tactics on their website.

When app is downloaded: the incremental customer spending increased $360+ yearly.

Conversion rate using the mobile app is 47% higher than mobile web visitors.

Challenge

The challenge was to modernize and improve the customer experience of the already existing app acquisition component found in the footer of all Canadian Tire East & West retail brands.

Previous Design

Desktop users were led to a dead-end which hindered their ability to seamlessly get access to the mobile app.

1. Desktop user clicks on app store badge

Previous Design (2).png

2. Cannot download the app – needs to be on mobile or tablet.

Design Process: Double Diamond

The process I followed was heavily influenced by the double diamond design process. Below are the four distinct phases I followed when designing for this project.

01. Discover

I kicked things off by broadly researching the problem space. My focus here was to get an understanding and discover ways on how to drive mobile app downloads.

Competitor  Analysis

In which ways were competitors promoting their mobile apps on their websites and how were they directing the traffic of interested users?

Method 1

From the footer, re-direct users via CTA to a mobile app landing page with a QR code.

Method 2

Have the the QR code component directly in the footer for users to scan.

Method 3

Create an individual banner section in the homepage that provides a QR code.

Best Practices:
App QR Code

Manage Expectations: Explain to customers why scanning the QR code would be valuable to them.

Mobile Responsiveness: Users on mobile web cannot scan the QR code, using a button is more practical.

Deeplinking: Be able to identify the type of device and direct them to their respective App Store.

QR Code Visibility: Make sure the code is scannable by having enough contrast and do not invert the colours.

02. Define

Now it was time to sense of the information gathered and deciding on the direction of the solution. What was the best approach we could find from a business and technical standpoint?

How Might We

Design a modernized and seamless solution that effectively increases app downloads on the Canadian Tire website?

After sharing my insights and research with the team, we agreed to create a new QR code component in the footer.

Constraints & Considerations

To reduce the risk of making late-stage changes to the design, it is always important to consider the constraints and potential challenges.

I) Introducing a New Component

When introducing a new component to the design system, it is vital to consult and coordinate with the design system team to ensure alignment with branding guidelines.

II) Scenarios & Edge Cases

  • Have the design responsive, accounting for all devices.

  • Cover all logic and pitfalls found in the customer journey.

  • Ensure the design matches user expectations.

  • Consider visual hierarchy and cognitive load.

III) U.I Considerations

  • Recognize the limited vertical space to work with.

  • Blend the new component with surroundings

  • French copy normally increases character count by 1.5x

IV) Tech Feasibility

The design was highly dependant on whether or not deep link technology was available. I needed to verify this with before diving into a solution.

03. Develop

After identifying the problem it was time to brainstorm and ideate potential solutions. This involved collaboration with peers, collecting feedback and making iterations.

Collaboration & Pre-Checks

Initial Concepts

I started creating early concepts and bounced ideas back-and-forth with my peers until we had a solution to test.

Initial Concepts (1).png
Initial Concepts (2).png

Feedback & Suggestions

01

The team liked the illustrative approach but felt it was not consistent with the design system.

02

Make use of subheading copy to add more value and insight for the user.

03

For the "Learn More" CTA use link-styling rather than secondary button styling.

04

Re-introduce badges to allow users to recognize that the QR Code is related to the mobile app.

Initial Concepts (3).png

04. Deliver

It was time to validate and finalize the solution. Once we felt the design met user needs and business objectives, I handed it off to our engineering team for implementation.

Usability Testing

With the research team, I set up a round of usability testing via UserTesting.com

Objective

The goal was to see if users we're able to successfully download the app using the QR code and to iterate based on feedback received.

Target Audience

  • Frequent CT shoppers who don’t have the app.

  • Mix of both millenials and boomers.

Testing Inquiries:

  • Where would users look to download the mobile app?

  • Will users be able to successfully download the app?

  • Will users know to scan using their phone camera?

  • Are the appstore badges useful or a hinderance?

App QR Code Prototype

Testing Results

All participants were able to successfully scan and download the mobile app.

When prompted to download the app, 7/10 participants initially looked in the top navigation of the website but ultimately scrolled down to the footer as the second logical place.

5/10 participants rated the clarity a 7 out 7 (with 7 being very clear). The others rated the clariity a 5 or 6 stating that the QR code and text was too small.

Most participants stated the App Store badges helped add credibility and clarity that the QR code was related to the mobile app.

Iterations

Much of the feedback received were related to small visual improvements rather than any major experience change. These are the iterations made based on feedback:

01

Increased contrast for subheading copy

02

Increased QR code and subheading font size

03

Re-arranged elements to balance visual hierarchy

04

Re-worded heading copy to be more instructional

Iterations (1).png
Iterations (2).png

Design Handoff

Final Design (1).png

Dark Mode

Light Mode

Iteraction(2).png

Anatomy

App QR Code

1. Heading

2. Subheading

3. Call to Action (Link)

4. QR Code

5. iOS Store Badge

6. Google Play Store Badge

Interaction

Link

Selecting the "Learn More" link will direct users to the Canadian Tire mobile app landing page.

Default

Hover

Focused

Store Badges

Selecting a store badge will direct desktop users to the mobile app landing page, while mobile web users will be directed to the selected App store.

Default

Focused

Sizing & Spacing

Sizing

The QR code is fixed to 112px by 112px
The app badges are fixed to 112px by 36px

Sizing and Spacing (2).png

Spacing

Follow a 4px increment rule according to the design system.

Other Devices

bottom of page