Making payment and account history clear on mobile

A desktop table was leaving mobile residents without the full picture.

Domuso’s resident app lets people pay rent and review their financial history. Account data came from property-management systems such as Yardi and AIM. Once detailed account history became available on the web, I was responsible for bringing it to mobile.

The existing mobile view showed payment history only. It truncated IDs and omitted balances to fit the screen. Residents also struggled to understand the descriptions and breakdown of their charges.

Keep the overview readable and the details within reach.

I first explored separate pages with nested navigation, but the account-history table still required horizontal scrolling. Moving the same table to another page did not solve the underlying space problem.

I moved to Payment and Account tabs with stacked rows. Payment methods, amounts, and status became easier to scan. Tapping a row opened a bottom drawer for additional details, giving future integrations room for more fields.

A category system that could survive the next integration.

Category icons initially looked promising. They worked for Yardi, but AIM supplied more than 64 categories, including long, specialized names that were difficult to represent visually.

I simplified the top-level transaction types and kept the provider’s detailed description in the drawer. This avoided maintaining a growing icon library for categories outside Domuso’s control.

Use the words residents understand.

“Credit” confused residents and internal teams. I changed the label to “Payment” and added a minus sign to payments in the ledger to clarify their effect on the resident’s balance.

The final interface preserved transaction details while making charges and payments easier to distinguish. It could accommodate different backend integrations, including AIM and ResMan.

Comprehension improved from 3/10 to 7/10.

During user testing, comprehension of payment and charge types increased from 3 to 7 on a 10-point scale. The redesigned experience was in production by June 2021.

The shipped payment history displayed payment methods and transaction states, including returns and voids. Residents could review account details without relying on a compressed desktop table.

Design for the inputs you do not control.

The important trade-off was keeping the interface understandable as partner data changed. A simpler transaction model and flexible detail view could accommodate more variation than a custom visual treatment for every category.