Upgrading Canadian Tire's customer loyalty program.
Triangle Rewards is Canadian Tire Corporation’s customer loyalty program. It was launched in the spring of 2018 with the goal to allow customers to collect Canadian Tire Money online and in-store through its family of companies: Canadian Tire, Sport Check, Mark’s, Atmosphere, and Gas+.
With the help of a large-scale advertising campaign and in-store awareness, customers were encouraged to sign up for the Triangle Rewards program (with a loyalty card membership or credit card membership) and then shop online or in-store to collect CT Money which they could put towards future purchases.
I was brought onto the Triangle Rewards team in October 2018 as a UX/UI Designer. The team was facing the monumental task of improving the functionality and usability of their website and app by implementing Customer Identity and Access Management (CIAM) technology to streamline logins and registrations across all their digital platforms.
From my end, this would involve:
Redesigning and adding several pages to triangle.com in order to be more on-brand and communicative to the customer.
Redesigning the design and flow of the Triangle App to accommodate CIAM technology.
In addition to wanting consistent branding and messaging throughout all digital platforms, the Triangle Rewards team hoped implementing CIAM technology and upgrading the site and app would result in several specific ROIs for the business:
I was tasked with designing new pages for triangle.com that would enhance the customer experience and clearly describe the scope and benefits of joining the Triangle Rewards program.
Key responsibilities included:
Designing a "rewards" page that more explicitly described how the Triangle Rewards program worked.
Designing an "offers" page that gave specific information on bonus earning days and offers.
Designing a "partners" page that clearly showed customers what partners they could shop with to collect CT money.
Ensuring all pages were responsive and on-brand.
Concepting additional ways to engage customers through the web experience.
From left to right: The “partners” page that allows customers to check which brands are part of the Triangle Rewards program, and where they can redeem and earn CT Money; the “offers” page that explains how personalization works in the rewards program, and gives an introduction to bonus earning events and the Triangle App; the “rewards” page that gives a broad overview of the program, calling out partners, offers, and credit cards.
All of these pages had to be designed in accordance with the Triangle Rewards brand guidelines, incorporating Triangle colours, logos, fonts, photography, and language in order to present the web experience as one succinct brand.
An enhanced desktop homepage experience was designed by myself to be considered for future development if the website technology ever allowed such a thing. Unfortunately this idea was shelved shortly after conception, but still remains an interesting example of what can be done to engage users.
All pages were optimized for mobile, as over 50% of triangle.com's traffic was mobile-based.
For the Triangle App, I was tasked with designing and prototyping all registration, login, and user authentication scenarios. This involved taking wireframes from our product designer and producing high-fidelity, functional prototypes for our product managers to review.
Regular meetings and mock user testing sessions were held to ensure the most logical and user-friendly scenarios were being implemented. Since we were using CIAM technology from Gigya Corporation, the app development involved a fair amount of back-and-forth between developers to ensure the Triangle brand and messaging was reflected accurately in-system.
When I joined the app project, the team was in the process of implementing dual sign in system, which would allow the user to switch between a loyalty or credit card sign in, based on what membership they registered with. I worked closely with the product manager to develop the interface, while he simultaneously used my designs to improve the logic and flow of the app. The development team was also involved during this stage to make recommendations on what we could or could not due based on the available technology.
Below: customers can also access their loyalty barcode without logging into the app if they are a return user. This reduces friction when the customer is shopping in-store and needs to quickly scan their barcode to collect points.
The Triangle App registration flow was built utilizing Gigya Corporation’s screen set & technology, which allowed for 2-factor authentication and enhanced security when creating a Triangle ID.
Even though our team was using Gigya’s template, we still had to customize it in order to make it feel part of the Triangle App experience. I had the ability to alter colours and add icons, but the buttons and entry fields had to remain in the Gigya style. As a designer, it was hard to not have complete control over the look and feel of this part of the app, but the trade-off was the user getting far better security and protection.
The project was completed and the update launched in September 2019, resulting in immediate increases in sign-in success rates, digital card creations, and an overall improved app rating.
This year-long project had its ups, downs, and late nights as any software release would, but our dedicated team kept the ball rolling to the end. As my first app/digital product release as a UX/UI designer, it was a significant educational journey. Not only did I learn to compromise my personal design sensibilities to meet business goals, but I also had to become flexible and adaptive to incoming changes and requests from stakeholders across multiple teams.
Being the sole designer responsible for prototyping the final look of the app and web experience meant business managers, product owners, and developers relied on my ability to effectively communicate and showcase my designs. I became skilled at rapidly prototyping new scenarios and explaining the logic behind every design decision I made.