Canadian Tire is a beloved Canadian brand. The company operates more than 1,700 retail and gasoline outlets and operates retail brands Sport Check, Party City, Marks, and Gas+. Triangle Rewards is Canadian Tire’s loyalty program that spans all of its brands and has over 11.3 million members (end of 2022).
I was brought into this project to improve the user interface of the Triangle.ca site as an individual contributor. To achieve this I had to use the Northern Light eComm Design System and create a Marketing UI style that aligns with the Canadian Tire Corporation and Triangle Brand guidelines.
There were few challenges along the design process. The main challenge was that Northern Light design system lacked marketing UI kit. Also, these components had to be integrated with Adobe Experience Manager (AEM) for content authoring. Finally, 60% of the old site failed accessibility.
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.
Even though my primary role was Interface design I was communicating with the team directly or indirectly to continuously understand the project better. Being part of research meetings, developer core hour meetings, and 1:1s with product owner and UX designer made the team be in sync. Furthermore, we had a graphic designer who helped with bilingual assets. Being able to understand the UX processes, Business goals, Graphic design, and Front-end development helped communicate / understand easier.
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 style that stood out compared to our eComm UI style. Constantly testing prototypes helped us validate ideas, which were useful during stakeholder presentations. Finally I was in touch with front end developers to make sure these designs were achievable with the strict timeline.
Main goal was of course the full site revamp. This revamp would focus on creating reusable Marketing components for Northern Light. Layout designs that were easy for use / edit. This will be achieved by create a holistic site pattern that will adjust to each page message / call to action.
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.
Understanding the target market was the key to creating a style that they like. Our primary users are millennials and family oriented Canadians. We continuously tested our ideas from a very early stage of the design process to understand how people would react. We used usertesting.com find Triangle Loyalty customers to validate certain flows like log-in / sign-up. Furthermore, these validation were presented to our stakeholder to assure that our designs were well received by customers.
Fail fast was the key principe at the this stage. I was able to start reviewing my design concepts within a week. I used peer feedback to evolve and fine tune the design to fit our Triangle brand and Northern light design system. Furthermore, this was a stage where I was looking for inspiration from competitors (using the what's working, what's not working, and HMW thinking). By using mood boards and layout the visual interaction I was able to define a site UI pattern.
Stakeholder presentation were key part of the site revamp. There were many departments invested in launching this right. With the validated prototypes and UI designs it went smoother than I thought. This was thanks to the weekly peer reviews with our UX/UI team and POD review with Triangle Associate Vice President, and Product Owners. They also helped during the bigger review meeting with stakeholders providing more context towards business / product goals.
I used the existing Triangle style guide from Northern Light design system to design the Triangle site. However since we did not have a marketing UI kit I documented the usage guide lines, patterns, specs for development, and responsive behaviour. This documentation assisted my communication with developers during the design implementation.
Prototyping was an essential part of the UI design process. It helped user test pages that were uncanny to the real site experience, communicate design intentions with developers, and win stakeholders.
We wanted to user test as much as we can. We used many forms of testing, whether it be a comprehension test to check if the design is not an information overload to a customer or benchmark test with Beymard, we did it all. Making decision by understanding the data helped us raise the bar and implement the design confidently.
The main lesson was the importance of communication when working with a large team. More specifically adjusting the language to communicating in each individuals role, for example when collaborating with a front end developer I used technical term to get the message across faster. Also being flexible with different timezone to accommodate developers and teammates was crucial to collaborate and deliver design on time. Lastly, being willing to adjust the designs based on user testing results or peer feedback improved the designs; it also opened my eyes to see different perspectives and understand design options better.
The site launch was a success! It was well received from all of our stakeholders. We also designed, developed and documented the full site revamp within a year. Which is pretty good given that there were many approval / review meetings for each page and component. Overall, the revamped site not only gave it a fresh look, the interface design also improved the site usability experience. The revamped site made it easier for customer to understand the product content easily and compare different loyalty cards. It was a pleasure making the site experience of 11.3 million customers enjoyable and easy.
