407 ETR
Bringing Pay-as-you-go Billing Into the 407 ETR App
Role: Product Designer, User Experience (UX) Design, User Interface (UI)
Scope: UX strategy and interaction design, Payment flow design, Information architecture, Onboarding experience, Error and edge-state design, UI design, Prototyping, Stakeholder collaboration, Developer collaboration
Duration: 2 months
Tools: Figma, LucidCharts, and Jira
407 ETR is a private toll highway serving the Greater Toronto Area. I worked on the evolution of its mobile billing experience, introducing a Pay-as-you-go option that allowed customers to add a credit card and be automatically charged after each trip.
The project focused on making toll payments more convenient and flexible while giving customers a clear way to understand and choose how they wanted to pay.
The Challenge
Before Pay-as-you-go, customers could not pay their tolls directly through the app. They had to call 407 ETR, set up the company as a payee through their bank, or wait to pay their balance as a monthly lump sum.
This created a payment experience that was disconnected from the app and required customers to take additional steps outside the product.
The opportunity was to bring payment directly into the app while supporting different billing preferences and making the setup process simple enough for customers to complete confidently.
My Approach
Introducing Pay-as-you-go
I designed an onboarding experience that introduced customers to the available billing options and allowed them to choose between monthly billing and Pay-as-you-go.
For customers choosing Pay-as-you-go, the flow guided them through securely adding their credit card and setting up automatic payments after each trip.
Designing for Decision-Making
Because customers were choosing between different billing models, the experience needed to make the differences easy to understand.
I incorporated contextual explanations and an FAQ within the setup flow, allowing customers to understand how each option worked without leaving the experience.
Tooltips were also introduced at points where customers might need additional guidance, such as locating their card's CVV.
Designing for Errors and Confirmation
Payment setup required careful handling of input and error states. I designed the flow to provide clear feedback when information was missing or incorrect, helping customers recover without losing progress.
Once setup was complete, customers received confirmation of their selected billing method, reinforcing that their payment preferences had been successfully configured.
The Outcome
The Pay-as-you-go experience brought toll payment directly into the 407 ETR app, replacing several offline payment steps with a simpler, automated billing experience.
Customers gained greater flexibility in how they paid, while automatic post-trip billing reduced the need to remember and manually manage payments.
The work also established a foundation for continued iteration of the billing experience, with subsequent improvements expanding the ways customers could pay directly through the app.