Collections CRM

Collections CRM

A redesigned app for collections follow-up and payment

Design system, Design thinking, UI design | Timeline: 2022 |

Design system, Design thinking, UI design

Timeline: 2022


The app was built for agents (collectors) who work in the bank to follow up with cardholders (debtors) about their outstanding balance.


The user interface of their product when it was initially designed is not intuitive. It also fails to establish clear information and visual hierarchy.


Re-design the app for better UX, the new design also needs to meet WCAG criteria.




  • 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.


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


User Flow




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.

Let’s make something amazing together.

Feel free to reach out to me for any work collaborations.




Anh Huynh 2024

Let’s make something amazing together.

Feel free to reach out to me for any work collaborations.




Anh Huynh 2024

Let’s make something amazing together.

Feel free to reach out to me for any work collaborations.




Anh Huynh 2024