Our development team recently created a tenant management system for one of our clients, using Laravel, Livewire, Bootstrap, and MySQL. During an internal meeting with our UI/UX lead, we redefined the payment screen and process (for this tenant portal in Laravel) to provide a clear and transparent view. Now, app operators and admins can easily see how payments are distributed across different invoices, eliminating the hassle of manual mapping.
Elevating User Experience: Advancing Rental Payment Solutions for Tenant Portal in Laravel
We have recently been developing this Tenant Management System (TMS), which includes several modules, among others:
- Landlord management
- Property/unit management
- Each property encompasses various units (e.g. office, shop, flat)
- Each property may have one or multiple owners/landlords (e.g. Landlord A and Landlord B are partner for an X property)
- One unit will be under one landlord
- Each property will belong to a specific region
- Expense management
- Property expenses
- Staff salaries
- Agent management
- Agents will manage their corresponding regions and properties under those regions
- Invoicing and payments
Tenant Portal in Laravel – Understanding User Requirements for the Payments Module
We will focus on the last module, which is invoicing and payments, rather than discussing all the previous modules and sub-modules. This module is crucial for the system, and the client emphasized the need for transparency for both tenants and agents/admins.
Let’s explore the client’s requirements with an example. Consider a tenant whose invoices for January 2025, February 2025, March 2025, and April 2025 are due. The rent is $500 each month (unless it’s the end of the year and the lease is renewed). The tenant visits their local agent and pays $1,500 in cash. The agent is responsible for recording this payment in the system.
To do this, the agent opens the tenant’s account, reviews the invoices, and navigates to the payment tab. There, the agent will enter the payment date (which defaults to the current date and time) and input the payment amount (in this case, $1,500).
The client requested that this payment be allocated to the most recent unpaid invoice. Since the last unpaid invoice is for January 2025, the application will apply $1,000 of the $1,500 payment to that invoice. The remaining $500 will then be allocated to the February 2025 invoice, leaving it due. The invoices for March and April 2025 will remain fully unpaid.
While entering the payment, the agent will have a clear view of how the payment is distributed. For example, as they input $1,500 into the system, it will display a breakdown of that amount against the pending invoices.
In the video, you can see two invoices:
- The first invoice is for September 2024, totaling 270,156.
- The second invoice is for October 2024, also totaling 270,156.
When you navigate to the payment tab and enter a payment of 250,000, the application will allocate this amount to the September 2024 invoice as a partial payment since the full invoice amount is 270,156.
If you try to pay 280,000, the application will apply 270,156 to the September 2024 invoice, and the remaining 9,844 will be allocated to the October 2024 invoice, indicating that the payment for October is incomplete.
Finally, if you pay 560,000, the application will fully settle both invoices and leave a credit balance of 19,688, which will be applied to future invoices.
Designing a Seamless Payment Experience Through Thoughtful UI/UX
One of the core principles we followed during the design and development of this Tenant Management System was clarity through design. The payment distribution logic may seem simple on the surface, but without a user-friendly interface, it can easily become overwhelming for agents and admins handling multiple transactions daily.
Our UI/UX lead worked closely with the development team to ensure that every interaction on the payment screen feels intuitive from reviewing outstanding invoices to allocating payment amounts dynamically. The system’s ability to automatically apply payments to the oldest unpaid invoice not only simplifies the process but also removes the possibility of manual errors.
This focus on transparent, efficient user flows is a philosophy we apply across all our real estate-related projects. If you’re interested in exploring more on how we elevate user experience in real estate platforms, check out some of our related blogs:
- Chat UI/UX for Real Estate Buyer and Seller
- UI/UX Design Approach for Crafting an Engaging Real Estate Dashboard in Figma
- Property Details Screen UI/UX in Figma
- Property Listing Website UI/UX Redesigning
Explore Our UI/UX Work
We believe in sharing our design journey and showcasing our projects across various platforms. You can explore our latest work, get inspired, or connect with us through the following links:
- Behance: Browse our portfolio for in-depth project showcases.
- Instagram: Stay updated with our latest designs and creative processes.
- LinkedIn: Connect with us professionally and discover our industry expertise.
- Website: Visit our website for more about our services and offerings.
Feel free to reach out and engage with us on any platform, or comment below here on the blog! We’d love to hear from you!
Get your next UI project done, contact us at info@theuistudio.com.
