Tim Hortons Checkout Optimization
Optimize the Checkout Process and Include Available Offers
Target Users
The target users are commuters aged between 16 and 55 who are looking for a quick and efficient way to order their food and beverages. This includes students who can open a Canadian bank account without a guardian, enabling them to use their cards for payments in the app, as well as workers who take public transportation (TTC) or drive.
Their Problems
A. The Homepage
• The cluttered layout lacks visual hierarchy, making it difficult for users to place an order. Additionally, users can only add offers from the homepage.
B. The Cart Page
• There is no option to add offers during the checkout process. If users forget to add them, they must return to the homepage to do so.
• This back-and-forth navigation during the checkout process can compromise the user experience, adding unnecessary steps that lead to frustration.
Year
2025 (4 Weeks)
Team
2 Product Designers • 2 UX Researchers • 1 PM
Deliverables
Interactive Prototypes and Iterations • Design System
UX Methods
Usability Testing • A/B Testing • User Interviews • Surveys • Data Analysis • Data Synthesis • Accessibility Guidelines (WCAG)
Role
I focused on the iterative design of the cart and offers pages, as well as creating reusable assets for the design system to maintain visual and team consistency. I also facilitated usability testing and analyzed the data to provide insights that inform and validate our design decisions within an agile and iterative development process.
The Solutions
01-1. Streamline the Checkout Process Based on Feedback from Usability Testing:
Key improvements have been made to the homepage, cart page, offers page, and interaction. Users’ screens will automatically return to the cart page after applying an offer, streamlining the checkout process by reducing the required taps from 5 to 2.
01-2. Usability Testing and Mixed Methods Research:
I conducted user testing with my team, involving 13 participants. We employed mixed methods research, incorporating the 5-second test, unscripted observations, and think-aloud techniques. We also performed two usability tests with interactive prototypes, A/B testing, and follow-up interviews. We analyzed quantitative and qualitative data and feedback to guide our design decisions and iterations.
01-3. Two Usability Tests with Interactive Prototypes
Key Improvements and Their Rationales from Design Iterations
02-1. Homepage Improvements:
(1) A CTA button for ordering that aligns with marketing and promotional content. (2) A more prominent ordering CTA button in the navigation bar. (3) Quick access to the cart and recent orders in the header.
02-2. Improvements to the Cart Page:
(1) A consistent layout ensures visual coherence. A clear cart feature enhances user control and helps prevent errors with incorrect orders. (2) An integrated system for adjusting quantities. (3) A visual cue that highlights available offers, ensuring users don’t miss them at checkout.
02-3. Improvements to the Offers Page:
(1) A prominent red label creates a visual hierarchy to guide users in selecting an offer when they first arrive on the offers page. (2) A green colour is used for positive feedback, indicating that the state has changed after applying an offer. (3) A vertical layout of offer cards enhances readability and scrolling for mobile users. Additionally, the thoughtful use of colours and the arrangement of information—specifically between the remaining time and the CTA button—improves the focal points and usability of the page.
02-4. Additional Improvements Based on Testing and User Feedback:
(1) A visual signifier informs users when an offer has been successfully applied. (2) An order cancellation feature has been implemented, allowing cancellations within a limited time frame if issues/mistakes arise. (3) A quick reorder option has been added on the recent orders page for user convenience, allowing users to easily reorder items after cancelling an order.
03. The Constraints and Prioritized Design Decisions:
We encountered two main constraints: a limited timeframe and a defined project scope. To tackle these challenges, we prioritized the product’s scale and made iterative adjustments based on usability testing. The typical purchasing process involves browsing and selecting items from the menu; however, we opted to skip this step and focus on the “happy path” in our design to streamline the experience. Our testing prototype begins with two items already in the cart, and we instructed participants to review and add offers during the checkout process.
