Canadian Tire introduced its Canadian Tire Money (CTM) in 1958, fast forward, it was digitized in 2018 through Triangle Rewards Loyalty. Now in 2023, it serves 4 products; Triangle Rewards Card, Mastercard, World Elite Mastercard, and Select. This case study will walkthrough how we helped customer pick the card help them get the most CTM based on their shopping behaviour.
I was an individual contributor who led the Product and UI Designer. This project took me 3 weeks to complete.
Potential customers on a product detail page do not understand which rewards program they can upgrade or apply. This is a problem because customers who are not aware of our rewards programs, cannot maximize the value of their purchases.
I was presented with the business goal of showing the right card to the right customer. In addition, I was tasked with promoting Triangle Select through this component. Another layer to this design challenge was dynamically showing the CT Money earned based on the card type and product cost on the PDP.
- Non-Rewards customers (guest and Triangle ID only)
- Rewards customer
- Triangle Mastercard customers without Select
- Select customers without Triangle Mastercard
I created a matrix in order to clearly communicate the design intentions with my project manager and make sure I understood the project at hand. During this I was able to discover new business needs based on Quebec law and made modification to CTM stacking with loyalty bonuses and offers. This matrix helped me ensure I had all the required information to being designing.
Since this component is living in an eComm sites I used our Northern Light eComm UI kit for typography & spacing. However, this is a marketing component so I used Triangle branding; colours & elements brand elements to give a Triangle look and feel.
Reviewing designs was an essential part of our design process. In this case I reviewed with the PDP design team to understand the possibilities of where to place this component. I also facilitated a dot voting session during a peer review to select the component style & usage.
I collaborated with our user research team to test this design on current Triangle Loyalty customers through usertesting.com. We tested if users noticed the component, it’s comprehension, and check if they would take action. The final validation of the component gave my PM and I the confidence to present the final solution to our stakeholders.
Once this component was stakeholder approved. I used our DSM documentation template to document the anatomy, usage & behaviour, patterns, sizing, and accessibility guidelines. This was then reviewed and approved by our design system lead and accessibility lead. This documentation helped me efficiently communicate with Front end developers.
Our researchers, experience designers and interface designers followed a double diamond process to understand what are our main problems and how to design create solutions for each issue. My involvement was more towards the second diamond where I helped the team ideate, prototype, and test design concepts. During this process I was provided with site performance test, personas to understand our target market from research team. Also the UX designer provided me with Information Architecture of the site and wire flows.
As the sole UI designer during the Triangle marketing site revamp. I had the opportunity to define what's working for us, what's not working, and how might we? This was useful when analyzing our competitors, and ideating stage. To make a consistent pattern across many pages with different content I defined a marketing UI framework that stood out compared to our eComm UI framework. Constantly testing prototypes helped us validate ideas, which were useful during stakeholder presentations. Finally I was constantly communicating with front end developers to make sure these designs were achievable with the strict timeline.
This design problem seemed like a tough challenge at first, but by trusting in the process and selecting the proper design methodologies helped me clearly understand the business goals. The personas helped me understand the user needs, reviewing the designs with my team helped me get a clear direction, and finally the user testing helped validate the final design. Key lesson is trust the design process.
Clear communication was crucial to the success of this project. The variant matrix painted a full picture of what is needed. The design concepts visually communicated the component placement, and dot voting gave the team a chance to quickly select the component style. Finally the user testing validated the design decision. And documentation helped efficiently communicate with developers.
