BILL PAYMENT HISTORY
Organizing payment history for easier searching and review.
ROLE
UI/UX Designer
TOOLS
Figma
WHAT I DESIGNED
-
Interaction Design
-
Data/Table Design
-
Filtering & Sorting
-
Responsive Design
THE CHALLENGE
Making payment history easier to work with
The requirement was to create a Bill History screen where users could view their payment history and easily find the information they needed.
The experience needed to support:
• Viewing payment history by Date Created, Loan Number, Amount, and Status
• Sorting the list by each column
• Filtering by Loan Number, Status, and Date Range
• Printing the bill history
• Returning to the PML landing page
• Accessing the NRRS public site
Rather than treating this as simply a data table, I focused on the different ways users might need to interact with the information.
Browse → Sort → Filter → Review → Print
THE DESIGN
A table designed around the way users find information
The Bill History screen provides the primary view of payment activity, with the required information organized into four columns:
Date Created · Loan Number · Amount · Status
The default view displays the most recent bills first, allowing users to see recent activity immediately.
Each column can also be sorted to help users reorganize the information based on what they are looking for.
Making sorting predictable
Let users reorganize the information without adding another control
I used the table headers as the sorting controls rather than introducing a separate sorting interface.
Clicking a sortable column cycles through the sorting states:
Ascending → Descending → Ascending
This keeps the interaction directly connected to the information being sorted and follows the established USWDS table behavior.
Making filtering manageable
Progressive disclosure keeps the primary view clean
Because filtering is an occasional task rather than something users need to see constantly, I designed the Filter control as a toggle.
First click → Filter options appear
Second click → Filter options collapse
The available filters are: Loan Number · Status · Date From · Date To
The Apply button remains disabled until at least one filter value has been entered. Once a filter is applied, Clear Filters becomes available so users can easily return to the complete history.
Designing for smaller screens
Keeping a data-heavy table usable on smaller screens
The Bill History table contains several columns, making it difficult to display the complete dataset comfortably on smaller screens.
Rather than removing information or restructuring the table, I used a horizontally scrollable table on tablet and mobile so users can access all of the information while maintaining the table structure.
Printing the history
Supporting users who need a physical or saved record
Selecting Print opens the browser's print experience, allowing users to preview and customize the output before printing or saving it.
OUTCOME
The final experience gives users several ways to interact with their payment history without overwhelming the primary view.
They can:
Scan recent activity → Sort the information → Narrow the results → Review the history → Print when needed
The result is a Bill History experience designed not just to display data, but to help users find and work with the information they need.