Tim Hortons Digital
Tim Hortons Digital
Tim Hortons Digital
Transforming the current loyalty and ordering app with an 8M+ user base into a digital ecosystem that provides compelling value to users in order to drive daily touch points to 5+ times a day.
Transforming the current loyalty and ordering app with an 8M+ user base into a digital ecosystem that provides compelling value to users in order to drive daily touch points to 5+ times a day.
Transforming the current loyalty and ordering app with an 8M+ user base into a digital ecosystem that provides compelling value to users in order to drive daily touch points to 5+ times a day.
Client
Client
Client
Restaurants Brand International (RBI)
Restaurants Brand International (RBI)
Restaurants Brand International (RBI)
Year
Year
Year
2022-23
2022-23
2022-23
Role
Role
Role
Design Lead
Design Lead
Design Lead
The Task
The Task
Design, test, and develop the complete redesign of Tim Hortons core app experience for the 4.5+ million monthly users. The design team focussed on 6 key areas to build a new ecosystem.
Design, test, and develop the complete redesign of Tim Hortons core app experience for the 4.5+ million monthly users. The design team focussed on 6 key areas to build a new ecosystem.
Design, test, and develop the complete redesign of Tim Hortons core app experience for the 4.5+ million monthly users. The design team focussed on 6 key areas to build a new ecosystem.
Design System
Design System
Establishing a design system that aligns to the digital experiences new branding & visual guidelines.
Establishing a design system that aligns to the digital experiences new branding & visual guidelines.
Homepage
Homepage
Redesign the homepage experience & information architecture to improve the navigation of the app.
Redesign the homepage experience & information architecture to improve the navigation of the app.
Performance
Performance
Improving the performance of offers & gamification of challenges to increase sales.
Improving the performance of offers & gamification of challenges to increase sales.
Onboarding
Onboarding
Lower barrier for entry with a seamless account creation & onboarding process.
Lower barrier for entry with a seamless account creation & onboarding process.
Scan & Pay
Scan & Pay
Optimize the scan and pay feature that allows users to seamlessly utilize the app.
Optimize the scan and pay feature that allows users to seamlessly utilize the app.
Features
Features
Establish the foundation for fast-follow features: financial service, games centre, community page, & eCommerce shop.
Establish the foundation for fast-follow features including: financial services, games centre, community page, and eCommerce shop
Key Results
Key Results
Increase in performance of offers (activation & use)
Increase in performance of offers (activation & use)
Increase in performance of offers (activation & use)
Increase in purchases within 6 months of launch
Increase in eCommerce sales - 650k more orders
Increase in eCommerce sales - 650k more orders
Successful sign-ups within 1 month of launching
Successful sign-ups within 1 month of launching
Successful sign-ups within 1 month of launching
Increase in performance of offers (activation & use)
Increase in purchases within 6 months of launch
Successful sign-ups within 1 month of launching
The Approach
The Approach
My design approach involved understanding the problem through researching, defining personas, iterating and prototyping designs with usability testing and collaborating with cross functional teams to deliver a redesign of the mobile ecosystem.
My design approach involved understanding the problem through researching, defining personas, iterating and prototyping designs with usability testing and collaborating with cross functional teams to deliver a redesign of the mobile ecosystem.
My design approach involved understanding the problem through researching, defining personas, iterating and prototyping designs with usability testing and collaborating with cross functional teams to deliver a redesign of the mobile ecosystem.
Discover
Tasks
20+ client co-creation sessions
30+ user research sessions & analysis
2 team members onboarded
Outputs
Define business goals & product vision
Current state heuristic evaluation
Landscape research findings & opportunities deck
Define
Tasks
Feature prioritization session; business + user benefits, technical feasibility
Define roadmap & scope
Outputs
4 customer mindsets created
5 design principles identified
7+ current state user flows & journey maps
5 features prioritized for MVP
Design + Test
Tasks
2 Week sprints
35+ usability testing sessions
Deploying DesignOps across pods
Outputs
100+high-fidelity mockups & prototypes
5 future state user flows
1 site-wide information architecture map
Design doc templates, testing protocol, insights synthesis, & minutes template.
Deliver + Measure
Tasks
Weekly QA sessions with 1:1 design & dev
Tagging UI assets to measure performance on Amplitude.
Outputs
226 design bugs resolved pre-launch
Streamlined enterprise design & delivery process
New design system
Backlog of fast-follow features.
Discover
Tasks
20+ client co-creation sessions
30+ user research sessions
2 team members onboarded
Outputs
Define business goals & product vision
Current state heuristic evaluation
Landscape research findings & opportunities deck
Define
Tasks
Feature prioritization session; business + user benefits, technical feasibility
Define roadmap & scope
Outputs
4 customer mindsets created
5 design principles identified
7+ current state user flows & journey maps
5 features prioritized for MVP
Design + Test
Tasks
2 Week sprints
35+ usability testing sessions
Deploying DesignOps across pods
Outputs
100+high-fidelity mockups & prototypes
5 future state user flows
1 site-wide information architecture map
Design doc templates, testing protocol, insights synthesis, & minutes template.
Deliver + Measure
Tasks
Weekly QA sessions with 1:1 design & dev
Tagging UI assets to measure performance on Amplitude.
Outputs
226 design bugs resolved pre-launch
Streamlined enterprise design & delivery process
New design system
Backlog of fast-follow features.
The Design System
The Design System
The design team & I applied the atomic design methodology to create scalable, accessible, and visually appealing components for the design system. The library is utilized in high-fidelity designs ensuring visual cohesion across all the digital experiences.
The design team & I applied the atomic design methodology to create scalable, accessible, and visually appealing components for the design system. The library is utilized in high-fidelity designs ensuring visual cohesion across all the digital experiences.
The design team & I applied the atomic design methodology to create scalable, accessible, and visually appealing components for the design system. The library is utilized in high-fidelity designs ensuring visual cohesion across all the digital experiences.
Component Composition
Component Composition
Component Composition
Figma's component system empowered our designers through features like master components, variants, tokens, spacing and boolean properties.
Creating well-structured components with thoughtful variant sets and boolean switches allows for flexible, consistent design implementation.
This approach reduces redundancy and enables rapid prototyping while maintaining design cohesion across the project.
Figma's component system empowered our designers through features like master components, variants, tokens, spacing and boolean properties.
Creating well-structured components with thoughtful variant sets and boolean switches allows for flexible, consistent design implementation.
This approach reduces redundancy and enables rapid prototyping while maintaining design cohesion across the project.
Figma's component system empowered our designers through features like master components, variants, tokens, spacing and boolean properties.
Creating well-structured components with thoughtful variant sets and boolean switches allows for flexible, consistent design implementation.
This approach reduces redundancy and enables rapid prototyping while maintaining design cohesion across the project.
Interaction Documentation
Interaction Documentation
Interaction Documentation
Comprehensive documentation is the backbone of any effective design system.
Well-crafted documentation serves as a single source of truth that aligns team members and accelerates onboarding.
Include detailed component specifications, usage guidelines, and implementation notes that bridge design and development. Documented component behaviours, responsive considerations, and state changes to ensure consistent implementation.
Comprehensive documentation is the backbone of any effective design system.
Well-crafted documentation serves as a single source of truth that aligns team members and accelerates onboarding.
Include detailed component specifications, usage guidelines, and implementation notes that bridge design and development. Documented component behaviours, responsive considerations, and state changes to ensure consistent implementation.
Comprehensive documentation is the backbone of any effective design system.
Well-crafted documentation serves as a single source of truth that aligns team members and accelerates onboarding.
Include detailed component specifications, usage guidelines, and implementation notes that bridge design and development. Documented component behaviours, responsive considerations, and state changes to ensure consistent implementation.
Accessibility
Accessibility
Accessibility
WCAG compliance requires meticulous attention to accessibility details in component design.
This includes maintaining color contrast ratios of at least 7:1 for normal text, ensuring keyboard navigability for all interactive elements, and providing multiple ways to access content.
Components should include proper semantic structures, sufficient focus indicators, and text alternatives for non-text content to create truly inclusive experiences.
WCAG compliance requires meticulous attention to accessibility details in component design.
This includes maintaining color contrast ratios of at least 7:1 for normal text, ensuring keyboard navigability for all interactive elements, and providing multiple ways to access content.
Components should include proper semantic structures, sufficient focus indicators, and text alternatives for non-text content to create truly inclusive experiences.
WCAG compliance requires meticulous attention to accessibility details in component design.
This includes maintaining color contrast ratios of at least 7:1 for normal text, ensuring keyboard navigability for all interactive elements, and providing multiple ways to access content.
Components should include proper semantic structures, sufficient focus indicators, and text alternatives for non-text content to create truly inclusive experiences.
Design System Foundations
Design System Foundations
Homepage
Homepage
Our redesign prioritized the homepage as both the entry point and navigational hub for mobile app users. User interviews revealed the need for a clean interface that clearly communicates value upfront, avoiding the endless scrolling caused by oversized media cards in the current design.
Our redesign prioritized the homepage as both the entry point and navigational hub for mobile app users. User interviews revealed the need for a clean interface that clearly communicates value upfront, avoiding the endless scrolling caused by oversized media cards in the current design.
Our redesign prioritized the homepage as both the entry point and navigational hub for mobile app users. User interviews revealed the need for a clean interface that clearly communicates value upfront, avoiding the endless scrolling caused by oversized media cards in the current design.
Participants engaged in research studies
Participants engaged in research studies
Collaborative sessions were held with stakeholders
Collaborative sessions were held with stakeholders
Low fidelity wireframes were developed to experiment
Low fidelity wireframes were developed to experiment
High fidelity concepts were created to finalize vision
High fidelity concepts were created to finalize vision
The Problem
The Problem
The current state experience navigation is restrictive in that there is no room to add new destinations, forcing an over-reliance on homepage tiles that compete for user attention.
The current state experience navigation is restrictive in that there is no room to add new destinations, forcing an over-reliance on homepage tiles that compete for user attention.
The current state experience navigation is restrictive in that there is no room to add new destinations, forcing an over-reliance on homepage tiles that compete for user attention.
Best Practices
Best Practices
Best practices dictate the bottom navigation is king. It is the most ergonomic and exists as a known pattern for navigating primary destinations across both iOS & Android. It is best used to help users quickly “understand the functionality an app provides” (Apple HIG).
Best practices dictate the bottom navigation is king. It is the most ergonomic and exists as a known pattern for navigating primary destinations across both iOS & Android. It is best used to help users quickly “understand the functionality an app provides” (Apple HIG).
Best practices dictate the bottom navigation is king. It is the most ergonomic and exists as a known pattern for navigating primary destinations across both iOS & Android. It is best used to help users quickly “understand the functionality an app provides” (Apple HIG).
Risks to Consider
Risks to Consider
Feature Demotion
Feature Demotion
Bottom navigation might force the demotion of certain function and features that are bulk grouped into the "more" tab.
Bottom navigation might force the demotion of certain function and features that are bulk grouped into the "more" tab.
User Engagement
User Engagement
Need to monitor decrease in user engagement for core features that will be affected by homepage redesign (e.g., Offers and challenges, mobile order & pay, loyalty). Decrease of more than 2% will be considered 'at-risk' and alternate solutions will need to be considered.
Need to monitor decrease in user engagement for core features that will be affected by homepage redesign (e.g., Offers and challenges, mobile order & pay, loyalty). Decrease of more than 2% will be considered 'at-risk' and alternate solutions will need to be considered.
Research & Usability Testing
Research & Usability Testing
A large overhaul of the app navigation will require user research and usability testing to validate our decisions since we are moving core functionality without user consent (e.g., removing offers from the bottom navigation).
A large overhaul of the app navigation will require user research and usability testing to validate our decisions since we are moving core functionality without user consent (e.g., removing offers from the bottom navigation).
Exploration
Exploration
Benchmarks and problem statements considered during co-creation sessions
Benchmarks and problem statements considered during co-creation sessions
Benchmarks and problem statements considered during co-creation sessions
Personalization
How Might We:
Personalize an experience for users and make their time in-app more convenient?
Recommendation:
Create an initial personalized navigation model leveraging onboarding + mindsets. Further refine the experience for the user through their behaviour + leveraging value drivers.
Engagement
How Might We:
Drive users to new experiences and increase engagement?
Recommendation:
Shift users’ mental models to adapt to this new navigation pattern, layering in additional functionality over time.
Navigation
How Might We:
Modify our current navigation patterns to create an immersive experience some moments and provide firm navigational clues at others?
Recommendation:
Define a set of rules that allow for the bottom navigation to appear or disappear and rely on top bar navigational elements to enable navigation through a series of hierarchical screens.
Personalization
How Might We:
Personalize an experience for users and make their time in-app more convenient?
Recommendation:
Create an initial personalized navigation model leveraging onboarding + mindsets. Further refine the experience for the user through their behaviour + leveraging value drivers.
Engagement
How Might We:
Drive users to new experiences and increase engagement?
Recommendation:
Shift users’ mental models to adapt to this new navigation pattern, layering in additional functionality over time.
Navigation
How Might We:
Modify our current navigation patterns to create an immersive experience some moments and provide firm navigational clues at others?
Recommendation:
Define a set of rules that allow for the bottom navigation to appear or disappear and rely on top bar navigational elements to enable navigation through a series of hierarchical screens.
Initial Wireframes
Initial Wireframes
Following multiple co-creation workshops and focused ideation sessions, we produced and refined our initial wireframes for the homepage.
Following multiple co-creation workshops and focused ideation sessions, we produced and refined our initial wireframes for the homepage.
Following multiple co-creation workshops and focused ideation sessions, we produced and refined our initial wireframes for the homepage.
High Fidelity Mockups
High Fidelity Mockups
To develop the high fidelity designs for our app, we followed a thorough process of testing and improvement over 4 months. We conducted multiple rounds of user testing and gathering feedback from client stakeholders to simply processes, clean up the UI, and account for possible edge cases. This helped us create a user-friendly experience and fix any issues that users may encounter prior to release. Finally, with the improved designs in place, we successfully launched the app, providing users with an intuitive and enjoyable experience of their favourite that led to a 16.4% increase in purchases since 6 months of launch.
To develop the high fidelity designs for our app, we followed a thorough process of testing and improvement over 4 months. We conducted multiple rounds of user testing and gathering feedback from client stakeholders to simply processes, clean up the UI, and account for possible edge cases. This helped us create a user-friendly experience and fix any issues that users may encounter prior to release. Finally, with the improved designs in place, we successfully launched the app, providing users with an intuitive and enjoyable experience of their favourite that led to a 16.4% increase in purchases since 6 months of launch.
To develop the high fidelity designs for our app, we followed a thorough process of testing and improvement over 4 months. We conducted multiple rounds of user testing and gathering feedback from client stakeholders to simply processes, clean up the UI, and account for possible edge cases. This helped us create a user-friendly experience and fix any issues that users may encounter prior to release. Finally, with the improved designs in place, we successfully launched the app, providing users with an intuitive and enjoyable experience of their favourite that led to a 16.4% increase in purchases since 6 months of launch.
Design Research and Validation
Design Research and Validation
Moderated and unmoderated research via Usertesting.com conducted over 2 months validated that customers understood the purpose of the new homepage, how to navigate to the core features, and how to seek help if needed.
Moderated and unmoderated research via Usertesting.com conducted over 2 months validated that customers understood the purpose of the new homepage, how to navigate to the core features, and how to seek help if needed.
Moderated and unmoderated research via Usertesting.com conducted over 2 months validated that customers understood the purpose of the new homepage, how to navigate to the core features, and how to seek help if needed.
Moderated usability testing:
Moderated usability testing:
Participants completed 4 tasks from the home page and answered follow-up questions.
Task completion: could users still perform key tasks effectively?
User perception: how did users react to the new navigation structure?
Participants completed 4 tasks from the home page and answered follow-up questions.
Task completion: could users still perform key tasks effectively?
User perception: how did users react to the new navigation structure?
Unmoderated usability testing:
Unmoderated usability testing:
Participants interacted with 4 versions of the home page with pre-determined and AI-generated prompts.
Home page preference: which version of the home page do participants prefer?
Tims+ interaction: does the swipe-up drawer design feel intuitive and useful to users?
Participants interacted with 4 versions of the home page with pre-determined and AI-generated prompts.
Home page preference: which version of the home page do participants prefer?
Tims+ interaction: does the swipe-up drawer design feel intuitive and useful to users?
Synthesizing Insights
Synthesizing Insights
To distill key findings, we leveraged data-driven synthesis techniques:
To distill key findings, we leveraged data-driven synthesis techniques:
To distill key findings, we leveraged data-driven synthesis techniques:
Task difficulty assessment:
Task difficulty assessment:
Participants rated tasks on a 1-7 scale, revealing usability friction points and areas for improvement
Participants rated tasks on a 1-7 scale, revealing usability friction points and areas for improvement
AI-powered analysis:
AI-powered analysis:
Testing sessions were transcribed and tagged in Dovetail, allowing us to extract key pain points, user behaviors, and recurring feedback
Testing sessions were transcribed and tagged in Dovetail, allowing us to extract key pain points, user behaviors, and recurring feedback
Pattern recognition:
Pattern recognition:
Through affinity mapping, we categorized insights into themes, enabling a clear roadmap for design iteration.
Through affinity mapping, we categorized insights into themes, enabling a clear roadmap for design iteration.
This structured approach transformed raw user data into actionable design decisions, ensuring a research-backed evolution of the app experience.
This structured approach transformed raw user data into actionable design decisions, ensuring a research-backed evolution of the app experience.
This structured approach transformed raw user data into actionable design decisions, ensuring a research-backed evolution of the app experience.
Rethinking interaction: when swiping didn’t work
Rethinking interaction: when swiping didn’t work
During testing, we anticipated that users would intuitively swipe up to access the Tims+ drawer, but the reality was different. Instead of swiping, most users instinctively tapped, treating it as a standard button interaction. Some missed the feature entirely, reducing engagement with Tims+ offers.
This unexpected insight challenged our design assumptions and led to a key redesign (see concept B below on the right): introducing a visible tap to open "Tims+" CTA on the bottom navigation bar, making the feature more discoverable and significantly improving user interaction.
During testing, we anticipated that users would intuitively swipe up to access the Tims+ drawer, but the reality was different. Instead of swiping, most users instinctively tapped, treating it as a standard button interaction. Some missed the feature entirely, reducing engagement with Tims+ offers.
This unexpected insight challenged our design assumptions and led to a key redesign (see concept B below on the right): introducing a visible tap to open "Tims+" CTA on the bottom navigation bar, making the feature more discoverable and significantly improving user interaction.
During testing, we anticipated that users would intuitively swipe up to access the Tims+ drawer, but the reality was different. Instead of swiping, most users instinctively tapped, treating it as a standard button interaction. Some missed the feature entirely, reducing engagement with Tims+ offers.
This unexpected insight challenged our design assumptions and led to a key redesign (see concept B below on the right): introducing a visible tap to open "Tims+" CTA on the bottom navigation bar, making the feature more discoverable and significantly improving user interaction.
Additional Insights
Additional Insights
So overall, I feel like the homepage is very straightforward, not complicated, even for a first time user, I feel like it can easily navigate it. It offers a really good experience.
So overall, I feel like the homepage is very straightforward, not complicated, even for a first time user, I feel like it can easily navigate it. It offers a really good experience.
Usability testing participant — 2023
Usability testing participant — 2023
My favorites could be kind of interesting. I can save my favorite offers or my favorite orders. Which is neat, you know, if I'm always a double, double and everything bagel kind of morning, I can just have that in there and press it. And it's a fast checkout.
My favorites could be kind of interesting. I can save my favorite offers or my favorite orders. Which is neat, you know, if I'm always a double, double and everything bagel kind of morning, I can just have that in there and press it. And it's a fast checkout.
Usability testing participant — 2023
Usability testing participant — 2023
I really like seeing the rewards being kept track of, I like seeing the specials and I also like the personalization of [the app] addressing me personally and having a for you section makes me feel like it's more of a personal type of experience. I also like the offers [card]. Anything with images, the icons, I like that.
I really like seeing the rewards being kept track of, I like seeing the specials and I also like the personalization of [the app] addressing me personally and having a for you section makes me feel like it's more of a personal type of experience. I also like the offers [card]. Anything with images, the icons, I like that.
Usability testing participant — 2023
Usability testing participant — 2023
Participants valued the navigational structure of the homepage and the segmented controls
Participants valued the navigational structure of the homepage and the segmented controls
Participants valued the navigational structure of the homepage and the segmented controls
Participants liked the segmented controls for “For You”, “Your Favourites” and even the “Offers tile”. They were able to easily locate entry points based on flow prompts and enjoyed the balance of visual vs. copy shown to them.
There were some slight confusion regarding whether “For You” and/or “Your Favourites” represented personalized offers or personalized orders based on order history. We iterated on this feedback to make the tabs more intuitive especially for new users who don't have their purchasing habits stored on the app to see past orders or favourites. To make it clearer for what would appear in that tab if they'd never used the app before, we changed the "Your favourites" tab to "Order Again" and included an empty state tile with microcopy "No Recent orders. Place an order to see it here!".
Participants liked the segmented controls for “For You”, “Your Favourites” and even the “Offers tile”. They were able to easily locate entry points based on flow prompts and enjoyed the balance of visual vs. copy shown to them.
There were some slight confusion regarding whether “For You” and/or “Your Favourites” represented personalized offers or personalized orders based on order history. We iterated on this feedback to make the tabs more intuitive especially for new users who don't have their purchasing habits stored on the app to see past orders or favourites. To make it clearer for what would appear in that tab if they'd never used the app before, we changed the "Your favourites" tab to "Order Again" and included an empty state tile with microcopy "No Recent orders. Place an order to see it here!".
Participants liked the segmented controls for “For You”, “Your Favourites” and even the “Offers tile”. They were able to easily locate entry points based on flow prompts and enjoyed the balance of visual vs. copy shown to them.
There were some slight confusion regarding whether “For You” and/or “Your Favourites” represented personalized offers or personalized orders based on order history. We iterated on this feedback to make the tabs more intuitive especially for new users who don't have their purchasing habits stored on the app to see past orders or favourites. To make it clearer for what would appear in that tab if they'd never used the app before, we changed the "Your favourites" tab to "Order Again" and included an empty state tile with microcopy "No Recent orders. Place an order to see it here!".
Personalization was a key theme appreciated by all participants for why they would want to come back to the app
Personalization was a key theme appreciated by all participants for why they would want to come back to the app
Personalization was a key theme appreciated by all participants for why they would want to come back to the app
In general, participants liked seeing unique offers being presented to them in the quick action tray under the "For you" section, which has a permanent spot front-and-centre in the tray for easy access since offer usage and performance is a huge driver and KPI for the digital experience. All participants mentioned that seeing 5-7 offers at a time, and having them rotate weekly was critical to knowing the backend system is personalizing and catering the offers to the individual of the account, which ultimately makes them feel a sense of joy and delightfulness. Participants noticing the weather and commenting on the use cases of it being helpful to formulate offers without being prompted was extremely helpful to identify value as this is a fast-follow feature the team is currently ideating on.
A big goal of this project and Tim Hortons in general is ensuring we deliver on our principles of "Share Canada" and "Consistently deliver everyday value", which we are able to do by making all customers feel like they own a part of Tims and that they're integrated into the fabric of this brand which is wholly based on Canadians and communities.
In general, participants liked seeing unique offers being presented to them in the quick action tray under the "For you" section, which has a permanent spot front-and-centre in the tray for easy access since offer usage and performance is a huge driver and KPI for the digital experience. All participants mentioned that seeing 5-7 offers at a time, and having them rotate weekly was critical to knowing the backend system is personalizing and catering the offers to the individual of the account, which ultimately makes them feel a sense of joy and delightfulness. Participants noticing the weather and commenting on the use cases of it being helpful to formulate offers without being prompted was extremely helpful to identify value as this is a fast-follow feature the team is currently ideating on.
A big goal of this project and Tim Hortons in general is ensuring we deliver on our principles of "Share Canada" and "Consistently deliver everyday value", which we are able to do by making all customers feel like they own a part of Tims and that they're integrated into the fabric of this brand which is wholly based on Canadians and communities.
In general, participants liked seeing unique offers being presented to them in the quick action tray under the "For you" section, which has a permanent spot front-and-centre in the tray for easy access since offer usage and performance is a huge driver and KPI for the digital experience. All participants mentioned that seeing 5-7 offers at a time, and having them rotate weekly was critical to knowing the backend system is personalizing and catering the offers to the individual of the account, which ultimately makes them feel a sense of joy and delightfulness. Participants noticing the weather and commenting on the use cases of it being helpful to formulate offers without being prompted was extremely helpful to identify value as this is a fast-follow feature the team is currently ideating on.
A big goal of this project and Tim Hortons in general is ensuring we deliver on our principles of "Share Canada" and "Consistently deliver everyday value", which we are able to do by making all customers feel like they own a part of Tims and that they're integrated into the fabric of this brand which is wholly based on Canadians and communities.
Payment Methods
Payment Methods
Redesigning scan and payment methods for seamless transactions
Redesigning scan and payment methods for seamless transactions
Majority of Tim Hortons app users used the in-app 'Scan' feature to redeem activated offers and earn rewards points, while a very low percentage used the payment methods feature that allows them to load a credit/debit card for mobile order purchases, opting to pay at the store with cash or card.
Our goal was for users to spend less time at checkout in-store by using our new scan & pay feature that allows users to add a credit/debit card to the app and then scan their QR code once to earn reward points and pay at the same time.
Majority of Tim Hortons app users used the in-app 'Scan' feature to redeem activated offers and earn rewards points, while a very low percentage used the payment methods feature that allows them to load a credit/debit card for mobile order purchases, opting to pay at the store with cash or card.
Our goal was for users to spend less time at checkout in-store by using our new scan & pay feature that allows users to add a credit/debit card to the app and then scan their QR code once to earn reward points and pay at the same time.
Majority of Tim Hortons app users used the in-app 'Scan' feature to redeem activated offers and earn rewards points, while a very low percentage used the payment methods feature that allows them to load a credit/debit card for mobile order purchases, opting to pay at the store with cash or card.
Our goal was for users to spend less time at checkout in-store by using our new scan & pay feature that allows users to add a credit/debit card to the app and then scan their QR code once to earn reward points and pay at the same time.
Cleaning up the current state and rolling out a new feature
Cleaning up the current state and rolling out a new feature
While brainstorming what the Scan page should look like for users to easily understand how and why they should use the new 'Scan & Pay' feature, it was clear that the payment methods page, where customers add and manage credit/debit cards and gift cards, would need overhauling.
The push to launch the Scan & Pay feature and redesign the current payment methods page came from a desire to increase mobile order & pay by 7% in the next year. We knew that to make this happen, we needed to make adding and using payment methods intuitive and accessible on the app.
Our first challenge was to map out all the places in the app that related to payments, designing universal components for payment methods that could be used across the app, and designing a new UX/UI for the payment methods page specifically.
In addition to rigorous ideation and iterations, my team underwent usability testing of a few Scan & Pay options to understand:
Do users see the benefit of Scan & Pay and will they use it themselves on a daily basis?
Are users able to easily navigate and activate Scan & Pay?
Are users able to efficiently add a new credit/debit card to the account to use the Scan & Pay feature?
While brainstorming what the Scan page should look like for users to easily understand how and why they should use the new 'Scan & Pay' feature, it was clear that the payment methods page, where customers add and manage credit/debit cards and gift cards, would need overhauling.
The push to launch the Scan & Pay feature and redesign the current payment methods page came from a desire to increase mobile order & pay by 7% in the next year. We knew that to make this happen, we needed to make adding and using payment methods intuitive and accessible on the app.
Our first challenge was to map out all the places in the app that related to payments, designing universal components for payment methods that could be used across the app, and designing a new UX/UI for the payment methods page specifically.
In addition to rigorous ideation and iterations, my team underwent usability testing of a few Scan & Pay options to understand:
Do users see the benefit of Scan & Pay and will they use it themselves on a daily basis?
Are users able to easily navigate and activate Scan & Pay?
Are users able to efficiently add a new credit/debit card to the account to use the Scan & Pay feature?
While brainstorming what the Scan page should look like for users to easily understand how and why they should use the new 'Scan & Pay' feature, it was clear that the payment methods page, where customers add and manage credit/debit cards and gift cards, would need overhauling.
The push to launch the Scan & Pay feature and redesign the current payment methods page came from a desire to increase mobile order & pay by 7% in the next year. We knew that to make this happen, we needed to make adding and using payment methods intuitive and accessible on the app.
Our first challenge was to map out all the places in the app that related to payments, designing universal components for payment methods that could be used across the app, and designing a new UX/UI for the payment methods page specifically.
In addition to rigorous ideation and iterations, my team underwent usability testing of a few Scan & Pay options to understand:
Do users see the benefit of Scan & Pay and will they use it themselves on a daily basis?
Are users able to easily navigate and activate Scan & Pay?
Are users able to efficiently add a new credit/debit card to the account to use the Scan & Pay feature?
Design validation
Design validation
After many iterations and perusing benchmarks in our market scan, we had 2 final concepts ready for unmoderated A/B testing to validate that we were making the right changes. Six user groups were identified for our round of testing to understand the behaviour of customers who make routine purchases and how we can increase the mobile app usage based on patterns we identify.
It was confirmed in all test groups that current Tims app users will add a credit card to use the new Scan & Pay feature. Also, surprisingly, majority of Tim Card users, chose to prefer using this function over adding a payment method. This helped us get closer to our end goal of wanting to introduce a new feature with minimal mental model shifts for our guest with added convenience.
After many iterations and perusing benchmarks in our market scan, we had 2 final concepts ready for unmoderated A/B testing to validate that we were making the right changes. Six user groups were identified for our round of testing to understand the behaviour of customers who make routine purchases and how we can increase the mobile app usage based on patterns we identify.
It was confirmed in all test groups that current Tims app users will add a credit card to use the new Scan & Pay feature. Also, surprisingly, majority of Tim Card users, chose to prefer using this function over adding a payment method. This helped us get closer to our end goal of wanting to introduce a new feature with minimal mental model shifts for our guest with added convenience.
After many iterations and perusing benchmarks in our market scan, we had 2 final concepts ready for unmoderated A/B testing to validate that we were making the right changes. Six user groups were identified for our round of testing to understand the behaviour of customers who make routine purchases and how we can increase the mobile app usage based on patterns we identify.
It was confirmed in all test groups that current Tims app users will add a credit card to use the new Scan & Pay feature. Also, surprisingly, majority of Tim Card users, chose to prefer using this function over adding a payment method. This helped us get closer to our end goal of wanting to introduce a new feature with minimal mental model shifts for our guest with added convenience.
Key insights from user testing
Key insights from user testing
After many iterations and perusing benchmarks in our market scan, we had 2 final concepts ready for unmoderated A/B testing to validate that we were making the right changes. Six user groups were identified for our round of testing to understand the behaviour of customers who make routine purchases and how we can increase the mobile app usage based on patterns we identify.
It was confirmed in all test groups that current Tims app users will add a credit card to use the new Scan & Pay feature. Also, surprisingly, majority of Tim Card users, chose to prefer using this function over adding a payment method. This helped us get closer to our end goal of wanting to introduce a new feature with minimal mental model shifts for our guest with added convenience.
After many iterations and perusing benchmarks in our market scan, we had 2 final concepts ready for unmoderated A/B testing to validate that we were making the right changes. Six user groups were identified for our round of testing to understand the behaviour of customers who make routine purchases and how we can increase the mobile app usage based on patterns we identify.
It was confirmed in all test groups that current Tims app users will add a credit card to use the new Scan & Pay feature. Also, surprisingly, majority of Tim Card users, chose to prefer using this function over adding a payment method. This helped us get closer to our end goal of wanting to introduce a new feature with minimal mental model shifts for our guest with added convenience.
After many iterations and perusing benchmarks in our market scan, we had 2 final concepts ready for unmoderated A/B testing to validate that we were making the right changes. Six user groups were identified for our round of testing to understand the behaviour of customers who make routine purchases and how we can increase the mobile app usage based on patterns we identify.
It was confirmed in all test groups that current Tims app users will add a credit card to use the new Scan & Pay feature. Also, surprisingly, majority of Tim Card users, chose to prefer using this function over adding a payment method. This helped us get closer to our end goal of wanting to introduce a new feature with minimal mental model shifts for our guest with added convenience.
/
Participants were very likely to use their mobile app with Scan & Pay toggled on
/
Participants successfully activated the scan & pay feature in prototype B whereas all users successfully completed it in prototype A
/
Tim Card only users prefer to continue using Tim Card as their payment method of choice in-store and for mobile purchases
/
Participants prefer prototype A with a separate tab for Tim Card, equally preferred regardless of current payment preference (in-store or mobile)
Participant Feedback
Frictionless
I wont forget to earn points when paying with a card from now on
Known Behaviour
QR usage has become more familiar during the pandemic, i don't see an issue with this approach
Ease
Taking a 2 - step process into a single-step process is going to make my day better
Save Time
" It's just faster, that's a no-brainer. I don't know why Tim Hortons hasn't done it already "
Prioritizing for Impact
Prioritizing for Impact
Redesigning the payment methods page and UX flow was a secondary outcome of introducing the new Scan & Pay feature. With little time to deliver on our MVP vision, we had to determine what would have the greatest impact on helping users manage their stored cards more efficiently, add cards faster, and provide a new UI that aligns with the new Tims branding.
Redesigning the payment methods page and UX flow was a secondary outcome of introducing the new Scan & Pay feature. With little time to deliver on our MVP vision, we had to determine what would have the greatest impact on helping users manage their stored cards more efficiently, add cards faster, and provide a new UI that aligns with the new Tims branding.
Redesigning the payment methods page and UX flow was a secondary outcome of introducing the new Scan & Pay feature. With little time to deliver on our MVP vision, we had to determine what would have the greatest impact on helping users manage their stored cards more efficiently, add cards faster, and provide a new UI that aligns with the new Tims branding.
High-level goal this iteration:
High-level goal this iteration:
Simplify the user experience of adding and managing payment methods on the Tims app using new DS components with minor UX upgrades.
Simplify the user experience of adding and managing payment methods on the Tims app using new DS components with minor UX upgrades.
Notable Changes:
Notable Changes:
Remove editing defaults on the payment methods page as there is low traction of users coming to this page to set their default card (approx. 0.9% of users perform this action in the current state). Instead, keep last used payment method as the user's default card for scanning and mobile orders. Most users (less than 5%) are actively known to change default settings, and if they were to change defaults, they would most likely be changing it during a transaction flow such as in the checkout or scan page. Adding smart defaults such as defaulting to Apple/Google pay during checkout will reduce cognitive load on users.
Remove editing defaults on the payment methods page as there is low traction of users coming to this page to set their default card (approx. 0.9% of users perform this action in the current state). Instead, keep last used payment method as the user's default card for scanning and mobile orders. Most users (less than 5%) are actively known to change default settings, and if they were to change defaults, they would most likely be changing it during a transaction flow such as in the checkout or scan page. Adding smart defaults such as defaulting to Apple/Google pay during checkout will reduce cognitive load on users.
Post-launch considerations
Post-launch considerations
Measure user satisfaction on setting defaults through transactions (scan or mobile order) vs. on payment method settings. Revisit design of not showing defaults on payment method settings if >2% of users are reporting confusion via feedback.
Measure user satisfaction on setting defaults through transactions (scan or mobile order) vs. on payment method settings. Revisit design of not showing defaults on payment method settings if >2% of users are reporting confusion via feedback.
New payment methods prototype
New payment methods prototype
For the new UI and UX, our goal was to keep it simple and introduce interactions with expandable bottom sheets. The bottom sheets were used to focus the action of adding or managing a payment method while also giving the user flexibility to close out of a flow if desired. The sheets were designed to support expanding content with defined medium and full detents, and be ergonomic by allowing easy single-finger navigation.
For the new UI and UX, our goal was to keep it simple and introduce interactions with expandable bottom sheets. The bottom sheets were used to focus the action of adding or managing a payment method while also giving the user flexibility to close out of a flow if desired. The sheets were designed to support expanding content with defined medium and full detents, and be ergonomic by allowing easy single-finger navigation.
For the new UI and UX, our goal was to keep it simple and introduce interactions with expandable bottom sheets. The bottom sheets were used to focus the action of adding or managing a payment method while also giving the user flexibility to close out of a flow if desired. The sheets were designed to support expanding content with defined medium and full detents, and be ergonomic by allowing easy single-finger navigation.
Key Reflections
Key Reflections
This engagement with a beloved Canadian brand has been a transformative journey. I have learned the impact of shipping a product to millions of user, the importance of striking a balance between user needs and business goals, and the art of storytelling to communicate design concepts effectively. These lessons have not only strengthened my skills as a designer but also enriched my understanding of leadership and collaboration in the design process. The most memorable aspects of this project that taught me about team-building and identifying user behaviour to improve business metrics includes:
This engagement with a beloved Canadian brand has been a transformative journey. I have learned the impact of shipping a product to millions of user, the importance of striking a balance between user needs and business goals, and the art of storytelling to communicate design concepts effectively. These lessons have not only strengthened my skills as a designer but also enriched my understanding of leadership and collaboration in the design process. The most memorable aspects of this project that taught me about team-building and identifying user behaviour to improve business metrics includes:
This engagement with a beloved Canadian brand has been a transformative journey. I have learned the impact of shipping a product to millions of user, the importance of striking a balance between user needs and business goals, and the art of storytelling to communicate design concepts effectively. These lessons have not only strengthened my skills as a designer but also enriched my understanding of leadership and collaboration in the design process. The most memorable aspects of this project that taught me about team-building and identifying user behaviour to improve business metrics includes:
Operational Transparency
Operational Transparency
We helped Tims step up their game by allowing customers to see a live status and real-time updates of pickup or delivery mobile orders. Delightful animations were also included to keep users engaged during the wait-times which were well received during testing. The impact of this feature led to less customer service calls regarding order wait-times and increased user understanding of what's happening in the backend to process their order.
We helped Tims step up their game by allowing customers to see a live status and real-time updates of pickup or delivery mobile orders. Delightful animations were also included to keep users engaged during the wait-times which were well received during testing. The impact of this feature led to less customer service calls regarding order wait-times and increased user understanding of what's happening in the backend to process their order.
Known Behaviour
Known Behaviour
People tend to work harder and faster when they're given artificial advancements for an incentive, think of it as a promise of a future reward. To gamify the old school challenges present on the app, we used this behaviour tool to design a progress tracker on the challenge card to motivate users to work harder and faster to finish a challenge and earn points. This design change led to users being able to see a jump start towards achieving their goal, easily track their progress, and understand how much commitment is required. Overall, the holistic changes made to offers & challenges in the app contributed to the 2% increase in offer performance.
People tend to work harder and faster when they're given artificial advancements for an incentive, think of it as a promise of a future reward. To gamify the old school challenges present on the app, we used this behaviour tool to design a progress tracker on the challenge card to motivate users to work harder and faster to finish a challenge and earn points. This design change led to users being able to see a jump start towards achieving their goal, easily track their progress, and understand how much commitment is required. Overall, the holistic changes made to offers & challenges in the app contributed to the 2% increase in offer performance.
DesignOps
DesignOps
Shipping a product that is easily scrutinized by wide demographics due to the immense love customers have for a specific brand is tough. I learned early on that regardless of what you push out, there will always be customers who love it, and ones who are quick to find fault. However, this does not limit your creativity and instead it drives you to always iterate with the best intentions. I could not have been successful in my role on this project if it wasn't for my wonderful team and the practices we set in place. Starting with just an idea and 1 figma file, I slowly introduced DesignOps approaches to integrate design into the larger product management pods within the client team. Design developed a voice at the table and we not only built a product but we built a functioning ecosystem to successfully continue launching products in the future.
Shipping a product that is easily scrutinized by wide demographics due to the immense love customers have for a specific brand is tough. I learned early on that regardless of what you push out, there will always be customers who love it, and ones who are quick to find fault. However, this does not limit your creativity and instead it drives you to always iterate with the best intentions. I could not have been successful in my role on this project if it wasn't for my wonderful team and the practices we set in place. Starting with just an idea and 1 figma file, I slowly introduced DesignOps approaches to integrate design into the larger product management pods within the client team. Design developed a voice at the table and we not only built a product but we built a functioning ecosystem to successfully continue launching products in the future.
©2025 - Jon Kerr
Back to top
©2025 - Jon Kerr
Back to top
©2025 - Jon Kerr
Back to top
©2025 - Jon Kerr
Back to top