ICS-Collection UI/UX Resolutions

Login Page

This is the first page users see when they access the CRM URL. The Don't have an account? Create One link will be removed because there is no option for registration on the CRM. Registration is invite-only and done through the backend.

There are two types of users who can log in to the system: collectors and clients. The login page will be the same for both, but their portals will be rendered differently based on internal server-side logic.

The [1] Login as Client checkbox will be removed since it was just a test component.

Collector Portal

Dashboard Layout

This is the first page that a collector sees when logging into the system. The marked components are the common components for the collector portal.

[1] Sidebar: We will remove the Report and Documentation from this list as they were just placeholders. Additionally, we need to eliminate the sidebar component and move the items to the top navigation wherever possible.

[2] Breadcrumbs: Breadcrumbs are a much-needed component in our portal, as we have many nested routes. However, we currently face issues with messy breadcrumbs when the list is long in mobile view. We need a good solution for displaying breadcrumbs in mobile view when the list is lengthy.

[3] Search bar: This is one of the most important components in our portal. It's a general search bar that allows users to search for available debtors and clients. The component is located in the header and works as a button. Once clicked, it opens a modal that displays search results.

[4] User Menu: The earnings option will be removed from the user menu. Instead, we will only provide a settings option. By clicking on settings, a page will appear allowing users to update their password, email, name, image, and other settings. Currently, this page does not exist.

These are the existing components on our layout. You have full freedom to redesign them to ensure the best user experience. Our only requirement is to remove the side navigation. There is one other component in the header called Lookup and we'll come back to this section later.

Overview Section

This is the overview section of the collector portals which appears right after logging in. There are two tabs in this section: Overview and Notes. On the overview page, there are two tables: Today's Route and All Tasks.

The Today's Route table contains the follow-ups on debtors that are scheduled for the current day. The Account Number column contains the account numbers of the debtors, and these account numbers are hyperlinked to the debtors' details page.

The All Tasks table contains tasks assigned to the debtors.

All the tables in ICS portals should be paginated, and have filtering and sorting options.

Notes Section

This is the notes section. Its a grid view. Each notes are clickable to expand to view the full text and edit the note.

Debtors Page

[1] Debtor Lookup:This component is temporary. It will be removed.

[2] Status: This is a filter, that filter outs the debtors according to their debt_status

[3] Debtor Search: This search bar enables searching by different column of the table. We need a better flow and UI for that. When filtering date_listed a Date Range Picker should appear. When searching Date of Birth a date picker should appear.

[4] Magic Upload: It is an action button that opens an i-frame. So there is no design scope when the button is clicked.

[5] Create New Debtor: This button will redirect to another page for creating new debtors. See here.

[6] Send SMS: To use this button, we need to check the debtors account to send SMS

Now click on the send SMS button a modal will appear to select SMS template.

[7] Sort By

[8] Show only assigned debtors: This is a switch that is enabled by default. It filter outs assigned debtors and all debtors.

When you click and account number the debtor section appears.

There are three pages in the debtor account section: Details, Payment History and SMS History.

Debtor Details

we need a very good layout for this page. It is the most important page of the collector portal.

It consists the following sections:

• Debtor Information (Currently this is divided into three different blocks. It would be good if we have all these three blocks into one section)
  • Account Details
  • Contact Details (Debtor)
  • Contact Details (Responsible Person)

• Followups

• Related Accounts

• Insurance Report

• Notes

Lets breakdown the action components and discuss their functionality.

[1] Add Payment: Is an action menu that has 3 options.

• Collect Payment: This button redirects to an external link.

• Add Manual Payment: This button opens a form in a modal.

• Send Payment Link: It doesn’t have any functionality yet. So leave it for now.

[2] Send Text; [3] More: This action buttons don’t have functionality yet.

[4] Debt Status: You can see a badge here saying Priority 1 This is the debt status of a debtor. There is an icon button to update the debt status. A modal opens when click on the update icon button.

[5] Followup Add: These are the follow-ups attached to a debtor account. A modal opens when the "add" button is clicked. Follow-ups are shown in a timeline (we need a timeline for that). Each follow-up has an "update status" button [6] to update the follow-up status. Both the "add" and "update" buttons open a modal for action.

[7] Contact Details Update: This button opens a modal to update the basic details for Debtor.

[8] Subscribe SMS: This component will be removed.

[9] Related Accounts: A debtor has multiple related accounts. This section is a list with all the related accounts with infinity scroll.

[10] Insurance Report: This is essentially a data display block, similar to account details or contact details. When there is no report, the button will say "Add", and if there is a report, the button will say "Update". Clicking the button will open a form in a modal, with a different title depending on whether the action is to add or update.

[11] Add Notes: The functionality of this section is the same as we discussed previously here. The only difference is the addition of an "Add new note" action that opens a simple form for adding new notes.

Payment History

It is just a paginated table with filtering and sorting.

SMS History

We need a timeline to display the SMS history with the following data:

• Incoming/Outgoing

• SMS text

• Date and time

Please keep in mind that the timeline may contain a large amount of data.

Clients Section

All Clients

This is a page containing a paginated table with filtering and sorting capabilities. Each client's ID or name is clickable and leads to the same URL, which displays the client's details.

Client Details

This section consists of three pages:

• Details

• Payment History (same as this)

• Debtors (same as this)

This page displays some analytics and client details. An action button is available to update the client's information.

Lookup

This page is used by debtors or other users. It is a public page, so anyone on the internet can access it. By submitting the form, all related debtor accounts will appear, and users can navigate to view the details. However, the flow of this page can be improved.

Now if you click on the view details

• There are three screens on a single page:

• Clicking "back" will take you to the lookup result screen.

• "Pay your balance" refers to an external link.

• Clicking "Prev" or "Next" will render the previous or next account details from the lookup result.

Therefore, we need to establish a clear flow between these screens.

Create New Debtor

This is a multistep form and we need to improve its flow. When submitting the form, we can show the progress in a modal that displays the progress of each step.

Here are some notes from the team lead:

The following priorities should be considered:

1. Increase the amount of information displayed, and make the most common actions easily accessible with a single click.

2. Enable data discovery, filtering, and drilling with the ability to bulk apply actions.