VeloBank Highway Payments

Designing a toll payment feature for 1.7 million mobile banking customers.

1.7M

mobile users affected

0

critical bugs at launch

6 mo.

design to launch

mobilebankingpaymentsfintech

Context

VeloBank is one of Poland's largest retail banks with 1.7 million mobile app customers. The product team wanted to expand the app's service offering by integrating highway toll payments directly into the banking experience. The feature connects VeloBank accounts to AutoPay, Poland's automated toll payment system, letting users register vehicles and pay for highway access automatically, without stopping at toll booths.

Problem

Paying for Polish highways meant either stopping at a toll booth, using a dedicated AutoPay account, or managing a separate app. None of these felt native to a banking app that already handled daily payments. The opportunity was clear: bring toll payments where money already lives. But integrating an external payment system into an existing banking app, without disrupting the design system or the user experience, required precision.

Toll payment historyReal-time statusRetry for failed charges

Toll payment history: real-time status and retry for failed charges.

Constraints

Working inside someone else's design system was the primary design constraint. Every component I created had to align with VeloBank's existing patterns and pass approval from their team. No room for visual experimentation. AutoPay handled the entire backend. VeloBank acted as an intermediary, which meant product logic was partly defined by AutoPay's specifications, not by us. I was the only designer on the project, coordinating with both the Ailleron team and VeloBank stakeholders simultaneously.

Service activation flowAutoPay consent and vehicle onboarding

Service activation: AutoPay consent flow and vehicle onboarding.

Approach

I started by mapping the full service flow: activation, vehicle registration, trip history, and settings. Each step had to feel like a natural extension of the VeloBank app, not a bolted-on integration. Defining scope early was critical. With two external parties involved, unclear boundaries would have cost weeks. I worked with both teams to lock down what the feature would and would not do before touching Figma. For each new UI pattern I needed, I worked within the existing component library first, adapting what was already there before proposing anything new. When new components were unavoidable, I documented rationale clearly to streamline bank approval.

Vehicle managementVehicle registration details

Vehicle management: registration details, category, and status.

Dashboard entry pointQuick shortcut

Dashboard entry point: banner discovery and quick shortcut.

Collaboration

The project ran across three parties: Ailleron, VeloBank, and AutoPay. Regular syncs with AutoPay were essential during implementation. Their specs defined the data model, which directly shaped how I structured vehicle management and trip history views. Getting alignment on feature scope and new component approvals required structured, consistent communication at every stage. This was the most demanding part of the project.

Solution

The feature covers the full user journey across four areas. Activation connects the user's VeloBank account to AutoPay with a clear consent and terms flow. Vehicle management lets users add, edit, and remove vehicles with registration details, category selection, and real-time status visibility. Trip history shows all highway passages with payment status and lets users retry failed charges directly from the app. Settings give control over the linked account, service activation, invoice requests, and complaint handling. Entry points were designed at three levels: a dashboard banner for discovery, a quick shortcut for repeat users, and a dedicated section under Services for full navigation.

Activation failure stateVehicle removalEdge case states

Activation failure and vehicle removal: edge case states handled in the flow.

Impact

1.7 million VeloBank customers can now pay for highways automatically, without a separate app or a toll booth stop. The feature launched with no critical bugs across the full user base, shipped in approximately 6 months as the sole designer coordinating across two external organizations.

Service settingsLinked accountInvoice requests

Service settings: linked account, activation toggle, and invoice requests.

Reflection

This project reinforced that defining scope before starting design is not a process step, it is the design itself. With three parties involved, misaligned expectations would have been costly. Getting VeloBank, AutoPay, and Ailleron to agree on what the feature does, and what it does not do, was the most valuable work I did on this project. Working inside a strict existing design system also sharpened my approach. Constraints are easier to work with when you respect them early rather than fight them later.