2022-2023
UX, UI, Product Design
UX/UI Lead
Canadian Tire Company, a century-old Canadian institution, operates a vast network of over 1,700 retail locations across the country, encompassing multiple subsidiary brands.
Launched in late 2018, The Triangle app offers Triangle Rewards members a convenient hub to access personalized offers, manage loyalty accounts, and handle credit cards remotely. This empowers members to seamlessly monitor both credit card and loyalty transactions while accessing and activating offers in one place.
The current app required an overhaul due to declining product usage, the targetting of a younger audience, and the launch of Triangle Select within the Triangle Rewards ecosystem.
A redesign of the Triangle App landing page served as the first step in a broader initiative to revamp the entire app—aimed at enhancing user trust, driving engagement, and boosting conversion.
UX design
UX Research
User testing
The personas were first refreshed based on evolving requirements and feedback from UXR, Marketing, and Sales, ensuring that product development remains aligned with the target audience.
A UX competitive analysis was completed to gain insights into the user experience strategies and practices of key competitors in the industry. This analysis involved a comprehensive examination of various aspects of competitors' products and services, with the goal of identifying strengths, weaknesses, and opportunities for improvement in your own product development efforts.
Which areas can remain as is? Which areas should be of priority?
Where are the current friction points of the user journey?
How can we put the Canadian Tire brand ahead and above competitors through design?
How do current Triangle users use the app? What features do they value the most?
A comprehensive design audit was conducted in close collaboration with both design and business teams. This initiative aimed to ensure the product experience was strategically aligned with broader business objectives and priorities.
Inconsistent focus: The page tries to serve multiple purposes - account management, offers, and promotions - without clear prioritization of what's most important to users.
Actionability gaps: Users have to mentally calculate their actual spending room, theres a due date but users have to hunt for payment options elsewhere.
Aesthetic Cohesion: The marketing materials beneath the fold lack visual consistency, appearing disjointed or resembling third-party advertisements.
At this stage of the process, "fail fast" was the mentality. Design concepts were created and iterated on based on both internal and external feedback and testing. Multiple rounds of divergence and convergence were completed to reach the final design.
I worked with both developers and stakeholders to review wireframes at multiple checkpoints. This helped us catch technical constraints early and make sure what we were designing was realistic and aligned with everyone's goals.
Close collaboration with the UI team enabled the creation of new components layered onto the existing design system. This ensured visual consistency while allowing flexibility to meet evolving product needs.
The design team explored multiple iterations of the landing page before narrowing it down to two distinct options for testing. Each design aimed to present key credit card and rewards information effectively while balancing visual appeal and usability.
The first design featured stacked cards that switch positions when tapping on the card underneath. This approach leaned into skeuomorphic design, mimicking the real-life action of shuffling through cards in a wallet.
The second design took an Occam’s Razor approach, displaying information vertically in a straightforward, card-based layout with clear actions and a hierarchy of information derived from existing research.
The third design attempted to strike a balance between skeuomorphism of the first design and the practicality of the second design.
After narrowing it down to two options, we used Attention Insights test to visualize what captures users’ focus within the first five seconds of landing on the screen. This method was chosen as it allowed us to quickly validate which design elements drew the most immediate attention. It was particularly useful for identifying whether key messaging and calls-to-action were effectively prioritized at a glance.
Most participants said the ‘Moveable Cards’ design did not meet or only partially met their expectations because there was not enough credit card information provided.
Although the ‘Side by Side Cards’ design only had one additional data point (available credit) compared to the ‘Moveable Cards’ design, most participants said this design met their expectations.
Most participants said their Triangle Mastercard and Rewards information was clearest and easiest to understand in the ‘Side by Side Cards’ design and all participants said they would prefer to see this design again in the future.
We implemented a modular card design that highlights both the rewards and banking sections on the app’s homepage, providing users with a clear and organized overview of key information. Each section features prominent CTAs, making it easy for users to navigate and take action quickly.
Given the content- and feature-rich nature of the Triangle app, we introduced a shortcut carousel at the top of the screen to provide users with quick access to key content. These shortcuts are fully customizable, allowing users to swap out quick actions for a more personalized experience.
A new card component was developed to unify the style of all marketing materials. It includes sections for offers, flyers, and a newly added “What’s Happening” section, which features upcoming events, company news, product launches, and other noteworthy announcements.
Bounce Rate
Before: 48%
After: 29%
Scroll Depth
Before: Only 41% of users reached mid-page
After: 67% reached mid-page, 39% reached the bottom
Retention
15% more users returned within 7 days after landing
Signups for new Triangle accounts increased
A/B Testing
The redesign consistently outperformed control across all core metrics, especially in CTA interaction, and trust perception scores.
Balancing the requests and business requirements from three distinct divisions of Canadian Tire—Canadian Tire Bank, Canadian Tire Rewards, and the newly established Triangle Select—presented numerous challenges during the Triangle App design refresh project.
One of the biggest constraints we faced was time and budget, which limited our ability to fully explore and refine the designs through multiple iterations. Despite our efforts, we were only able to complete one round of testing, which still provided valuable insights but left room for further optimization. Given more time and resources, I would have preferred to spend more efforts into the iterative and testing process to ensure a higher degree of user validation. Moving forward, monitoring user traffic to identify abandonments and bottlenecks will inform future design improvements.
