Role: UI / UX Designer - Growth designer
Team: Independent
Tools: Figma & Fonts Ninja
Duration: 1 week
The Hook
Canadian Tire’s login and account creation process was confusing and underperforming, with only 4% of users creating accounts. I redesigned it to make the process simple, clear, and engaging, while boosting loyalty program adoption.
Canadian Tire’s login and account creation process was confusing and underperforming, with only 4% of users creating accounts. I redesigned it to make the process simple, clear, and engaging, while boosting loyalty program adoption.
The Context
Canadian Tire is a major Canadian retailer that sells everything from automotive parts to home goods and uses a unified platform identifier called Triangle ID. This project followed an agile approach and was completed in just five days. The goal was to design a better solution than the existing experience, specifically improving account creation and login flows to increase sign-ups, retain customers, and strengthen loyalty program participation.
Canadian Tire is a major Canadian retailer that sells everything from automotive parts to home goods and uses a unified platform identifier called Triangle ID. This project followed an agile approach and was completed in just five days. The goal was to design a better solution than the existing experience, specifically improving account creation and login flows to increase sign-ups, retain customers, and strengthen loyalty program participation.
The Challenge
Users struggled to understand how Triangle ID worked, locate the account creation option, and navigate the various login methods. The connection between the store logos and the loyalty program was unclear, adding cognitive load. Account creation was buried below the fold, making it hard to find.
Multiple sign-in options created confusion, while the support button was nearly invisible and input fields lacked clear backgrounds or outlines, reducing readability. Users also faced dead-end navigation, unable to return to previous screens without signing in or creating an account. The redesign had to maintain brand consistency, avoid development complexity, and balance clarity with engagement.
Users struggled to understand how Triangle ID worked, locate the account creation option, and navigate the various login methods. The connection between the store logos and the loyalty program was unclear, adding cognitive load. Account creation was buried below the fold, making it hard to find.
Multiple sign-in options created confusion, while the support button was nearly invisible and input fields lacked clear backgrounds or outlines, reducing readability. Users also faced dead-end navigation, unable to return to previous screens without signing in or creating an account. The redesign had to maintain brand consistency, avoid development complexity, and balance clarity with engagement.
The Process
I began by analyzing the existing interface using Nielsen’s 10 heuristics, identifying pain points such as poor discoverability, dead ends, and violations of established conventions. From these findings, I sketched lo-fi concepts integrating key improvements: clear loyalty explanations, visible login options, support access, and back navigation.
I began by analyzing the existing interface using Nielsen’s 10 heuristics, identifying pain points such as poor discoverability, dead ends, and violations of established conventions. From these findings, I sketched lo-fi concepts integrating key improvements: clear loyalty explanations, visible login options, support access, and back navigation.
The mid-fi prototypes were developed using Material 3 and Tailwind CSS to accelerate the process through prebuilt components. I also used Font Ninja to match the brand’s typography.
The redesigned interface was structured in two main areas. The left side focused on login, featuring a prominent H1, clear input fields, a primary “Sign In” CTA, a “Remember Me” checkbox, a passkey shortcut labeled “Use Passkey,” and a back button for user control. The right side displayed a background image that reinforced emotional connection and loyalty, helping users project themselves into future shopping experiences. The support button was simplified to a question mark icon in line with common UI patterns, and microcopy such as “Join Triangle family” was introduced to foster a sense of belonging.
The mid-fi prototypes were developed using Material 3 and Tailwind CSS to accelerate the process through prebuilt components. I also used Font Ninja to match the brand’s typography.
The redesigned interface was structured in two main areas. The left side focused on login, featuring a prominent H1, clear input fields, a primary “Sign In” CTA, a “Remember Me” checkbox, a passkey shortcut labeled “Use Passkey,” and a back button for user control. The right side displayed a background image that reinforced emotional connection and loyalty, helping users project themselves into future shopping experiences. The support button was simplified to a question mark icon in line with common UI patterns, and microcopy such as “Join Triangle family” was introduced to foster a sense of belonging.
For the hi-fi prototype, I refined visual details to enhance clarity and emotional appeal. Button corners were softened for a less rigid look, and the main CTA color was preserved for brand consistency. The passkey button was differentiated using a subtle border instead of a bold color to avoid distracting users. On the right side, the image was darkened slightly to preserve hierarchy without losing visual richness.
For the hi-fi prototype, I refined visual details to enhance clarity and emotional appeal. Button corners were softened for a less rigid look, and the main CTA color was preserved for brand consistency. The passkey button was differentiated using a subtle border instead of a bold color to avoid distracting users. On the right side, the image was darkened slightly to preserve hierarchy without losing visual richness.
Finally, I conducted A/B testing with six users. Three started with the old interface before moving to the new one(AB), and three tested in the reverse order (BA). Tasks included creating an account, finding support, and signing in with a passkey. Both groups reported significantly higher effort and frustration with the old interface, while the new version felt more intuitive and visually engaging. Task completion was faster, navigation smoother, and users expressed greater confidence in the overall experience compared to the original interface, which felt cold and unfinished.
Finally, I conducted A/B testing with six users. Three started with the old interface before moving to the new one(AB), and three tested in the reverse order (BA). Tasks included creating an account, finding support, and signing in with a passkey. Both groups reported significantly higher effort and frustration with the old interface, while the new version felt more intuitive and visually engaging. Task completion was faster, navigation smoother, and users expressed greater confidence in the overall experience compared to the original interface, which felt cold and unfinished.
The Solution
The final design made the login and account creation process intuitive and emotionally engaging. Triangle ID and the loyalty program were clearly explained, input fields were accessible, and CTAs were simplified. Users could sign in quickly with a passkey, navigate back freely, and access support easily. The right-side imagery and wording reinforced a human connection and sense of community, while the overall hierarchy guided users naturally.
The final design made the login and account creation process intuitive and emotionally engaging. Triangle ID and the loyalty program were clearly explained, input fields were accessible, and CTAs were simplified. Users could sign in quickly with a passkey, navigate back freely, and access support easily. The right-side imagery and wording reinforced a human connection and sense of community, while the overall hierarchy guided users naturally.
The Impact
Users overwhelmingly preferred the new interface, reporting higher confidence and trust. Tasks were completed more efficiently, and users found the visual guidance clearer. Based on these improvements, the company expects a 25% increase in new sign-ups over the next three months, along with stronger engagement in the loyalty program.
The Refection
This project reinforced how critical onboarding and sign-up pages are for both user experience and business outcomes. Clear visual hierarchy, accessibility, and emotional engagement directly influence conversion and retention.
This project reinforced how critical onboarding and sign-up pages are for both user experience and business outcomes. Clear visual hierarchy, accessibility, and emotional engagement directly influence conversion and retention.
Users overwhelmingly preferred the new interface, reporting higher confidence and trust. Tasks were completed more efficiently, and users found the visual guidance clearer. Based on these improvements, the company expects a 25% increase in new sign-ups over the next three months, along with stronger engagement in the loyalty program.
Users overwhelmingly preferred the new interface, reporting higher confidence and trust. Tasks were completed more efficiently, and users found the visual guidance clearer. Based on these improvements, the company expects a 25% increase in new sign-ups over the next three months, along with stronger engagement in the loyalty program.