Advanced search for a payment management system
A simple and efficient way to narrow down a list of results for a payment management system I designed to be used by client-side representatives for the purpose of payment reconciliation and reporting.
The payments page was built so that users could keep track of claim payments payments issued at an insurance organization. For NDA reasons I cannot disclose the full context of this project since we were designing for one of biggest insurance companies in United States.
How does it work?
A right-side panel displays all available parameters with each one represented by the most appropriate controls; For example: users can select values on parameters with known options (e.g Payment status) or input against a parameter with no defined values. (e.g custom date range) This pattern works well due to the number of parameters and requirements that needed to be met:
-
- Knowing that users would almost always be on desktop, I decided to go with a sidebar (vertical side-panel) in order to accommodate the large number of search parameters. This panel partially covers the screen to provide some context on what is being filtered.
- Adjusting the filtering parameters in a separate view (side panel) prevents the interface from getting too crammed with content so that even smaller mobile devices can easily display all the content.
Key Features
-
- Quick access to the most commonly used parameter (Date Range) which is preset to the last 30 days due it being the most often requested time range for reports.
- A multi-select tag input allows users to define multiple values within a parameter without having to separate them with a comma (as is common in many filtering input parameters)
How the search parameters are ordered
By specificity: knowing that advanced search was going to be used to find a list of payments with similar attributes; I listed the parameters starting with those who’s properties could be shared across multiple payments. For example; many payments can fall under any date range, but fewer would share a policy number, and only 1 would have a claim ID: due to this, parameters shared by multiple payments are listed first.
Designing for Efficiency
A list of removable tags (or chips) reflecting the exact values that produce the results are displayed above the list helping users quickly identify the current/active search criteria.
-
- A Clear-button is featured at the end of the list of tags to help users quickly start over or reset the search parameters.
