TD Bank

Self-Serve Banking

A payment assistance portal to help customers self-serve their delinquent accounts.
Scope
Create wireframes and hi-fi screens for 4 breakpoints.

‍
‍

‍
‍
Role on team
Information Architecture
Wireframes
Visual Design
‍
‍
Design Team
1 Design Lead
1 UX Designer (Me)
‍
‍
Duration
6 months
‍
‍
Tools
‍Sketch
Zeplin
Miro
Abstract
‍
‍
Background

When customers get behind on their debit or credit payments their account becomes delinquent until they set up a payment plan.

Users

TD customers who are struggling to manage payments on their delinquent accounts.

Problem

How can the number of customer service calls be reduced for customers with delinquent accounts?

Solution

Allow customers to self-serve their accounts through the Payment Assistance Portal to set up a payment plan.

Final Designs
Debit Account

Users are prompted with simple questions that mirrors the way a customer service representative gathers information on a call.

Depending on the user’s answers and eligibility there next steps appear below until they have set up a payment plan.

Final Designs
Credit Account
Account Details

Once the user selects their credit account, they are taken to the Account Details page.
‍
The top section tells them the most important information: Total amount due, Number of days past due, Last payment, Next payment date

Payment Options

The payment options are framed around how much the user can pay that month.
‍
Depending on what they select they will be prompted to pay that amount or are taken to additional steps to set up a payment plan: reage, long-term forbearance, short-term forbearance, or settlement.
‍
To learn more about what that payment option means the user can select the “details” button.

Hardship Questionnaire

Users who are eligible for a payment program are prompted to complete a 3-step assessment of their hardships, income and debt.

A tailored payment program is formulated based on their answers.

Payment Program

Based on their questionnaire answers, users are presented with a payment program.
‍
First, the plan is shown in an easy-to-scan format using human language.
‍
Then the user needs to agree to the legal disclosure and accept the program to be enrolled.
‍
Lastly, as a reminder, they are shown their program summary and are prompted to make their first payment.

Final Designs
Every Use Case & Edge Case

Modals, banners and error messages were created to guide customers through the process of choosing a payment plan that works for them.

Each scenario was accounted for based on the options they selected and what they were currently qualified for.

Project Process
Information Architecture
Building a Site Map

Working with a group of SME’s with different backgrounds, we created a detailed Site Map. The flow of screens was determined by which options the user selects and whether they are qualified for various payment plans.

Biggest Challenge

Getting detailed information from a range of sources was difficult. Each section of the flow went through many iterations as we helped the SME’s come to a common understanding and agreement.

Client Management
Approvals Process

The screens for each of the 7 Epics were presented and approved through 5 levels. Between each level, the screens would be refined based on the given feedback.

Learning Moment

My confidence in presenting grew a lot during this process. Having different audiences for each review helped me learn how to frame my presentation in a clear way for that particular group.

Wireframes to Hi-fi Screens
Refining the screens

For Epics 1-4, we created wireframes to define the UX flow & screen layouts. To make the review process quicker, we began building screens with our Hi-Fi components without the need for the wireframes since the visual design is very simple.

Epic 4: Deposit Account - Partial Payment Wireframe & Hi-Fi Design

Epic 5: Credit Account - Short Term Forbearance Offer Wireframe & Hi-Fi Design

Responsive Design

For this project, each page is designed for 4 breakpoints to ensure a great experience across various devices.

Design Hand-Off
Delivering the product

Once the designs were completed and approved for each of the 7 Epics, I uploaded the screens to Zeplin and created screen flow diagrams to handoff to the developers on the team. At the beginning of each development sprint I would walk the developers through each screen in the Epic and answer any questions.

Epic 3: Promise to Pay Screen Flow Diagram

Epic 6: Settlement Screen Flow Diagram

Workflow Musing

Using Figma for this project would have made the design hand-off process smoother. At the time, I created the designs in Sketch and synced it with Zeplin with every update. Using Miro I imported pngs of the screens and created the screen flows.

Keep exploring

Accenture (Proof of Concept)

Wildfire Tool

A tool that utilizes satellite imaging, IoT sensor data, and AI to detect and monitor the spread of wildfires.
View project

Jackie Koon   --   Product Designer    --   Résumé