TD Bill Manager Hero

TD Bill Manager

UX/Product Design

TD Bill Pay is a digital payment solution that allows users to pay bills conveniently and securely from their TD Bank account. Designed for ease of use, it enables customers to pay virtually anyone in the U.S., set up electronic billing, and manage payments efficiently. The platform provides both ACH electronic transfers and paper check options, catering to a wide range of billers. As part of ongoing enhancements, the project introduced improvements to the biller enrollment process. TD Bank partnered with a vendor that allows users to find all their billers automatically by simply entering the name and mailing address. This feature streamlines the setup process, reducing manual entry and ensuring greater accuracy when adding new billers. This case study highlights the user experience of TD Bill Pay, outlining its key features, payment processing methods, and best practices for seamless financial management.

Client

TD Canada Trust US Banking

Role

UI Designer

Duration

4 months

My role
My primary role on the project was to create all the new UI elements this experience needed. It challenged me to introduce a new visual language that can play nice with the existing styling and look & feel of the app.
Image 1
Onboarding Flow
Onboarding onto the new experience
TD US Banking app users already had the ability to pay for bills. Since this was an improvement, we needed a way to promote and let users enroll in the new experience. The onboarding would entice users to learn about what they can get by enrolling, and there was not much else to it. They only had to press the "Let's Go" button and then the system would start to automatically search for the users bills.
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Onboarding Experience - A
Testing onboarding experience
We tested two sets of onboarding flows with users. The above required users to first enroll and accept terms and conditions, and at that point the would get to see what the feature was about. The B experience below front loaded the terms and conditions and then the user would learn about the features.
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Onboarding Experience - B
Adding new Billers
Search for billers not found by the system can be added manually by searching the biller name. The improvement allows for easier identification of billers by introducing the merchant logo. This was part of the purchased vendor solution.
Image 1
Image 2
Image 3
Adding billers
Responsive experience
The bill list, and the pay bill page illustrated on the tablet.
Image 1
Image 2