Loan Payment Tracking System

Problems

The research department’s previous Loan Payment Tracking System was technically functional but extremely cumbersome — it took too many clicks just to start tracking customer payments. The system was rigid and could not keep up with the department’s frequently updated SOPs, making it hard for staff to follow their current workflow. Users struggled with poor experience: the interface was not mobile-friendly, and actions had no clear success or error feedback. This left staff unsure whether their work was completed correctly. On the development side, the original system focused on backend logic, with frontend templates pulled from the internet to save time. The result was a visually inconsistent, non-intuitive interface that slowed adoption.

In short: Old system was slow, inflexible, and difficult for users to trust.

Process

I started by meeting with the research team to understand their workflow and pain points. We created interactive Figma mockups for quick feedback and iteration. While I contributed to the design, my teammate implemented the frontend components and UI layout.

On the frontend, React reusable components were used for buttons, forms, and layouts. Editing and input forms were standardized, ensuring consistency and simplifying content entry while keeping the interface user-friendly and mobile-responsive.

My main focus was the backend. I implemented a Laravel RESTful API with clean, modular, and well-commented code. Routes were structured by module, validations and automation ensured data integrity, and database relationships supported frequent SOP updates. Every endpoint was tested in Postman, with seeders and factories used for reliable testing.

Users were involved in acceptance testing, and features were iterated based on feedback. This approach reduced manual work, ensured real-world alignment, and followed Agile cycles.

In short: I planned with the research team, built robust Laravel RESTful APIs, tested incrementally, and iterated based on user feedback — all following Agile cycles. Frontend components were implemented by teammates using React reusable components for forms, buttons, and layouts.

SDLC

Solution

The new Loan Payment Tracking System simplified the workflow for the research team. Staff could now record payments instantly, and balances updated automatically. Management dashboards displayed real-time repayment data across branches.

On the backend, I implemented robust Laravel RESTful APIs that handled validations, automation, and audit logs. Database relationships were designed to adapt to frequent SOP updates, ensuring data accuracy and alignment with user workflows. The system is scalable and future-ready, supporting potential mobile input for customers.

Frontend components were implemented by teammates using React reusable components for forms, buttons, and layouts. Forms were standardized, ensuring consistency and a mobile-responsive interface.

In short: I built a robust backend with Laravel RESTful APIs, ensured validations and automation, and tested incrementally. Frontend components were implemented by teammates using React reusable elements. The system simplified staff workflow, provided real-time dashboards, and is ready for future mobile integration.

Preview of dashboard screens — automatically scrolling showcase

Impact

The new system addressed the previous frustrations: it simplified tracking of customer inflows and outflows, reducing the number of clicks needed to perform tasks. It adapted to frequently changing SOPs, ensuring staff could work efficiently without manual workarounds. Staff now receive real-time feedback and success/error messages, and the interface is fully mobile-responsive.

Operationally, this translated into faster reconciliation and more accurate repayment records across branches.

In short: Staff can track payments efficiently, the system adapts to SOP changes, provides feedback on actions, and ensures data is accurate and mobile-friendly.