A redesigned app for collections follow-up and payment
Overview
The app was built for agents (collectors) who work in the bank to follow up with cardholders (debtors) about their outstanding balance.
Challenge
The user interface of their product when it was initially designed is not intuitive. It also fails to establish clear information and visual hierarchy.
Goal
Re-design the app for better UX, the new design also needs to meet WCAG criteria.
01
Discover
Users
Users are collectors working in financial institutions. Their daily task is following up with debtors to collect money or take notes in case the debtor refuses to pay for any reason.
90% of collectors follow up with debtors via working queues that automatically navigates them to debtor account. The call will also be triggered in its workspace.
Devices used: desktop, tablet
Pain points
They had to use Command Line to navigate or take actions
The debtors' account main page layout didn't seem to have an information hierarchy
When users wanted to navigate to the next account, they had to go back to the home page. This increased cognitive load
They didn't have any statistics to know their work progress
The UI was not intuitive and hard to see for those with visual impairment
There can be hundreds of queues, users currently have to find it through the search function which is not user-friendly because they can barely type to search.
Users found it hard to take actions on the Queue List. This is exemplified by how the filters were designed as well as the CTA of this screen.
The Queue List was challenging for users to navigate and perform tasks. This was particularly manifested in the filter design and the call-to-action on this display.
Users need to note down how they follow up with cardholders in the Memo section. One of the pain points here is that it's difficult to find a specific memo as there are no search of filters.
02
Main Features
Building work queues that contain the list of debtors:
Re-designing the debtor's account main page
Building collections form for agents to enter information after each time following up
Providing an approach to navigate to the next account in the queue
03
User Flow
04
Design
———
Home page
The dashboard on the home page provides data for the collections follow-up. In 99% of cases, they will start an account by working on a queue.
Result List
Agents can also search for a specific cardholder's account.
Account Page
The page contains basic information about the cardholder including their outstanding balance and the delinquent day.
Collections Form
In this mockup, I illustrated one of the call results called Settlements.
Make Payment
The agent can encourage the cardholder to make a payment right away
Call Result
After making payment, the agent will be navigated back to the account page. Here, they can see the call result on the right section. Agent can work on the next account in the queue by clicking Next at the bottom of the page.
Lesson Learned
This project was required to meet WCAG AA standards, which was very challenging in terms of building the design system. I have learned that accessibility is crucial because visual impairment is quite common nowadays. We had to consider the sizes, colors, and layout of each UI element so that what was displayed on the interface would be clear and intuitive enough to facilitate their daily tasks.