Residential Payment System
Designed the payment system for a residential mobile app, enabling residents to manage rent payments, payment methods, AutoPay, and scheduled payments.
Product: Residential Mobile Application
Role: Product Designer
Focus: Payment System
Scope:
• Rent payment experience
• AutoPay setup and management
• Scheduled payments
• Payment methods management
• Payment history and balance tracking
Responsibilities:
• Participated in design system guideline creation with marketing and product teams
• Designed the payment feature from scratch
• Created payment architecture and user flows
• Designed UI and interaction patterns
• Designed high-fidelity product interfaces
Deliverables:
• Sitemap
• End-to-end payment flows
• Interaction flows
• High-fidelity UI
• Error and edge case states
Building an End-to-End Rent Payment Experience
Residents in residential communities need to make regular payments for their housing. These payments include not only rent, but also utilities, service fees, and other community-related charges that can change from month to month.
Because the total amount may vary depending on usage and additional services, residents need a simple and reliable way to understand their balance, choose how much to pay, and manage their payment methods.
The payment experience must support different behaviors such as paying the full balance, entering a custom amount, scheduling payments, or setting up automatic payments.
Challenge:
Payments in residential platforms involve multiple scenarios. Residents may need to pay the full balance, enter a custom amount, schedule a future payment, or enable AutoPay. At the same time, the total amount can vary each month depending on utilities and service charges.
The challenge was to design a payment experience that supports these different payment behaviors while keeping the process simple, transparent, and easy to understand.
Goal:
Design a flexible payment system that allows residents to manage rent and related charges through clear payment options, including full balance payments, custom payments, scheduled payments, and AutoPay, while providing transparency around balances and payment status.
Establishing the Design System Foundation
Before feature development began, I participated in establishing the product’s design system guidelines together with the marketing and product teams.
This work defined the visual and interaction foundations used across the application, including typography hierarchy, color usage, form patterns, and reusable UI components.
The design system helped maintain consistency across features and created a scalable foundation for building new product functionality.
Product Structure
To organize the experience and define how residents access payment features, we structured the product navigation and main functional areas as shown below.
Designing the Payment Architecture
The payment system needed to support multiple payment scenarios while keeping the experience simple for residents. Depending on their needs, residents may choose to pay the full balance, enter a custom amount, schedule a future payment, or enable AutoPay for recurring payments.
To support these different behaviors, the payment experience was structured into a set of connected flows that guide users through selecting a payment amount, choosing a payment method, and confirming the transaction.
This structure allows residents to clearly understand their balance, control how and when they pay, and manage their payment preferences.
End-to-end payment flow illustrating key payment scenarios including Pay Now, Scheduled Payment, AutoPay, and payment method management.
Explore the full flow: Link
Iteration After Usability Testing
After designing the core payment features in Figma, usability testing was conducted to evaluate how residents interact with the payment experience and identify areas for improvement.
The testing revealed two key issues that affected usability and navigation.
Insight 1 — Multiple Apartments
During testing, we discovered that some residents manage multiple apartments or units within the same property system.
The initial design did not clearly support switching between apartments, which caused confusion when users tried to review balances and payment history.
To solve this, a unit switcher was introduced, allowing residents to quickly switch between apartments while keeping balances and payment information separate for each unit.
Insight 2 — Payment Flow Simplification
Usability testing also showed that the one-time payment flow felt complex because multiple actions were presented on a single screen.
To improve clarity, the flow was redesigned by dividing the process into separate steps, allowing users to select the payment date, payment amount, and payment method in a more structured sequence.
This change made the payment process easier to understand and reduced cognitive load during payment completion.
Strategic Design Decisions
Several design decisions were made to ensure that the payment experience remains clear, flexible, and easy to manage for residents. These decisions focus on reducing confusion around balances, supporting different payment behaviors, and giving users full control over their payment preferences.
Clear Balance Visibility
Residents need to quickly understand their balance and payment status.
To support this, the interface highlights the total balance and due date at the top of the screen. The balance card adapts to different states — such as due soon, overdue, fully paid, or AutoPay enabled — helping residents immediately understand their payment situation and decide what action to take.
Key Screens
Flexible Payment Options
Residents may have different payment needs depending on their financial situation.
The system allows users to pay immediately or schedule a payment, choose to pay the full balance or enter a custom amount, and complete the transaction using either a credit card or a bank account.
Key Screens
Payment Method Management
Residents need the ability to manage how they pay.
The interface allows users to add, update, or remove payment methods, including credit cards and bank accounts, directly from the payment settings.
Key Screens
Multiple Leases and Balance Status
Some residents manage multiple leases or units.
The system allows users to switch between units while keeping balances and payment information separate, ensuring that payment history and financial status remain clear for each lease.
Key Screens
Final Payment Experience
The final payment experience brings together clear balance visibility, flexible payment options, and easy payment management. Residents can quickly review their balance, choose how they want to pay, and manage their payment preferences in one place.
Impact & Reflection
Impact
This project focused on transforming complex payment scenarios into a clear and flexible experience for residents. By combining clear balance visibility, flexible payment options, and automation through AutoPay, the final solution helps residents manage their payments with greater confidence and control.
What I Learned
Designing this payment system highlighted the importance of validating flows through usability testing and simplifying complex actions into clear steps. Iterating based on user feedback helped improve navigation clarity and better support residents managing multiple apartments.
Future Improvements
Potential next steps could include smarter payment reminders, deeper financial insights for residents, and enhanced automation for recurring payments.