Iterating Billing Method: Enhancing Pay-as-you-go for Seamless Payments
407 ETR
The 407 ETR (Express Toll Route) is a private toll highway that allows drivers to bypass traffic in the Greater Toronto Area. The objective of the Pay-as-you-go initiative was to introduce a more convenient billing method, enabling users to manually add their credit card and automatically be charged after each trip, streamlining the payment process. As the Product Designer, my goal was to enhance the user experience by simplifying the payment flow while maintaining security and reliability. I led the design iteration, collaborated with developers, and ensured the final solution was user-friendly and efficient.
Background
Previously, 407 ETR users had no way to pay their toll bills directly through the app. They were required to either make payments over the phone, set up 407 as a payee through their bank, or opt for a monthly lump sum payment. These options were inconvenient and often led to missed payments and user frustration. The Pay-as-you-go enhancement was introduced to address these challenges by allowing users to manually add their credit card for automatic charges after each trip or choose to pay their bill as a lump sum at the end of the month, offering a more seamless, in-app solution and significantly improving the overall payment experience.
Problem
After several years of operating the 407 ETR toll payment system, it became clear that the existing payment methods were causing frustration among users. The lack of an in-app payment option forced users to either pay over the phone, set up 407 as a payee through their bank, or manage a monthly lump sum payment, leading to missed payments and an overall inconvenient experience. Recognizing these challenges, the client sought to introduce a streamlined Pay-as-you-go system, enabling users to add their credit card for automatic charges after each trip or opt for an end-of-month lump sum payment, significantly improving the user experience.
Role:
I assumed the following roles for this project:
- Product Designer
- User Experience (UX) Design
- User Interface (UI) Design
Deliverables:
UX Design:
- User Research
- Capture requirements
- Wireframes
UI Design:
- High-fidelity mockups
Project Specifications:
Duration:
2 months
Tools:
- Sketch
- LucidCharts
- Jira
The Research
Given a brief to update the billing payment system, I focused on understanding the core pain points experienced by users when paying their toll bills. Through feedback analysis and user insights provided by the client, it was clear that the absence of an in-app payment option, reliance on phone payments, and the need to set up 407 as a payee through their bank were major sources of frustration. This informed the direction of the Pay-as-you-go enhancement, which aimed to simplify the payment process by allowing users to manually add their credit card for automatic charges or choose an end-of-month lump sum payment option, addressing user needs for convenience and efficiency.
Pain Points
I identified several issues with the existing flow, including the following pain points:
-
Users were unable to pay their toll bills directly through the app, forcing them to use external methods, leading to inconvenience
-
Users had to either make payments over the phone or set up 407 as a payee through their bank, which was time-consuming and inefficient.
-
The manual nature of the existing payment methods often resulted in users forgetting to pay their bills on time, leading to missed payments.
-
Users could only opt for a monthly lump sum payment, which didn't cater to those who preferred paying per trip, limiting flexibility and causing frustration.
Proposed Solutions:
-
Enable a Pay-as-you-go feature within the app, allowing users to add their credit card and be automatically charged after each trip, removing the need for external payment methods.
-
Simplify the payment flow by incorporating an in-app solution, eliminating the need for users to call or set up 407 as a payee through their bank.
-
Reduce the risk of missed payments by introducing automated billing, where users are charged directly after each trip or at the end of the month, with reminders and auto-payment options.
-
Provide users with the flexibility to choose between automatic charges after each trip or a monthly lump sum payment, improving convenience and catering to diverse payment preferences.
To resolve the inefficiencies in the 407 ETR payment system, it was essential to focus on each identified pain point separately.
The primary features considered for improving the billing process include:
The high-fidelity mockups for the 407 ETR Pay-as-you-go feature showcase a streamlined user interface designed to simplify the payment process.
The mockups begin with an onboarding wizard, giving users the flexibility to choose between monthly lump sum payments or the Pay-as-you-go option. Each selection follows a tailored flow designed for clarity and ease of use. I also incorporated error states throughout the flow, ensuring users receive clear guidance in case of input mistakes. To support decision-making, the wizard includes an FAQ section explaining the benefits of each payment option. Tooltips were added to provide additional help, such as instructions on finding the CVV number on their card. After completing the process, users receive a confirmation email summarizing the payment type they have selected, reinforcing transparency and user confidence in their billing setup.
High-Fidelity Mockups
Reflecting on this project, the introduction of the Pay-as-you-go feature greatly improved the user experience by simplifying payment methods and reducing missed payments. A key takeaway was the importance of continuously iterating on user feedback. This led to a subsequent iteration where we introduced the 'Pay by Bank' feature, allowing users to streamline their payments by connecting their bank accounts directly to the app for even greater convenience.