Overview

After successfully delivering a number of high-end client projects at IBM, I was solicited by the head of user experience at IBM to join an agile team dedicated solely to Canadian Tire projects. They were looking for someone creative with a background in UX design best practices. A person that could deliver quality work in a very short amount of time due to the short deadline. Quality over quantity was the keyword as they were making their final proposal to the client.

4M

My design reached an estimated audience of 4 Million

Canadian Tire Triangle Mastercard cardmembers.

My Role

Senior UI/UX Design Lead

Team: IBM Canadian Tire Agile Team

Software: Figma

About the project

The project included a large agile team solely dedicated to work only on Canadian Tire projects and comprises of many key elements such as developers, business managers, product designers but I was the only one with UI/UX capabilities and a creative flair. Canadian Tire wanted to have users share links directly in their message box to their friends which would then connect them automatically to the Mobile app where they would be subject to register for the Triangle Mastercard, plan monthly payments and get a rewards calculator. These functionalities needed to be inserted within the main mobile app making it intuitive and engaging to use.

High-Fidelity prototyping in Figma

Research and Iteration Process

My research consisted of learning about the company, learning about the brand, knowing the users and looking what was already out there on mobile devices. I then collected all the requirements that the BA's "business administrators" were looking to add within the app. Using an 8 grid pixel for sharp and clean responsive layout and Canadian Tire color palettes, I started to work on several iterations which were reviewed and scrutinized by the team for approval. All the wireframes and prototyping were developed in Figma which was then sent straight to developers for final integration and deployment. The agile team kept a steady pace delivering the project by having several meetings during the day ensuring that all project scope was covered and on track.

Direct link to Canadian Tire website from chat message

I suggested, proposed and designed the sleek sliders below which was a quick and easy way for users to input the amount they wanted eliminating the chances of mistakes and hassle of typing numbers. Being very detailed oriented I worked closely with developers to get the final scale, spacing and color branding right. Also ran accessibility WCAG Web accessibility test to make sure people with color blindness was able to see the colors and typography right as it was meant to be seen.

Company branded sliders

Account Balance and Monthly installment

Sign-In and Card application

Verified.me screen flow processes

Design Highlights

Worked with Verified me to input a step by step verification for the users. Designed and prototyped the flow in Figma for the whole process and worked with developers to implement it within the app. After much trial & errors the flow worked perfectly and was seamless. Users could easily in a matter of minutes get verified and sign in securely and fast. I turned a boring common process into a delightful experience for the users. Based from feedback collected, it was really well received by Canadian Tire customers.

I was also tasked to work on a design for a digital receipt which the actual mobile app was lacking. This requirement was important as many end users requested this functionality. Using UX best practices and Google Design System I devised this sliding receipt that would popup after any purchase. This popup has drawers that the users can dismiss quickly and clearly show all the information about the purchased product. Its purpose was to give a quick purchase confirmation to the user and could be retrieved anytime within the app.

Digital receipt with drawer functionality

Saving Goals and Communication preferences

Rewards Calculator and Reference code

Monthly Plan details

Sign-In

Links from Text messages to Canadian Tire Website

Add to Cart

Verified.Me screen flow

Final Results

The whole project was delivered on time and had a very good review with 4 star ratings on Google Play and the App Store. Based from feedback received, users loved the added functionality of a digital receipt and the quick process flow of obtaining a Canadian Tire Triangle Mastercard. The Verified me features added another layer of trust for the app and was a delightful experience for users to quickly get verified.