2022-2023
UX, UI, Product Design
UX/UI Lead
Canadian Tire Company, an enduring Canadian icon, oversees a sprawling network of more than 1,700 retail establishments, encompassing several 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 incorporation of new user personas, and the launch of Triangle Select within the Triangle Rewards ecosystem.
UX research
UI/UX design
User testing
Project Management
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 is in need of a redesign?
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 scaleable is the current design? Are there elements that need to be made from scratch?
The existing design underwent a comprehensive design audit, bringing together the expertise of both the design and business teams. This collaborative effort was undertaken with the primary objective of aligning design goals with overarching business objectives.
There are no clear CTA's on the landing screen to get the attention of, or guide the user through their journey.
Landing screen is credit card biased; Screen real estate must be shared between rewards and credit cards and marketing materials.
Marketing Material lacks cohesiveness and consistency; existing material look like ads from third party brands/companies.
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.
Wireframes were thoroughly reviewed in a multi-checkpoint process involving both the development team and stakeholders. This rigorous evaluation ensured that feasibility considerations were integrated into every stage of the process.
Collaboration with the UI team allowed for the creation and integration of new components on top of the existing design system.
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.
The existing design underwent a comprehensive design audit, bringing together the expertise of both the design and business teams. This collaborative effort was undertaken with the primary objective of aligning design goals with overarching business objectives.
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. It was not clear to all participants that they could tap to reorder the cards and a few participants expected that tapping on the cards would bring them to a new screen with more information, which is not the case.
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 because it was visually appealing, the information was clear and easy to understand, and more participants were satisfied with the information presented.
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.Some participants said they would like to see a bit more credit card information included in this design.
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.
We implemented a modular card design that prominently showcases both the rewards and banking sections of the app on the homepage, with clear CTAs in each area for easy navigation.
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.
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 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.
