rateGenius Closing Checklist

Closing Checklist Case Study


rateGenius Logo


  • User Interviews
  • Wireframes
  • Prototypes


  • Adobe XD
  • Vuetify (Front-end framework)


When a loan is funded, the loan officer needs to verify certain information while on the phone with the customer. The new feature will help loan officers verify information faster and more accurately.


In the old system, the verification screen was on a separate page in the application. It took too much time for the loan officer to open each screen in the application to verify the customer information. This caused frustration for the customer and loan officer.

User Interviews

Initial meetings were held with the Sales Manager and several users on the Sales team.

Key Findings
  • "Can we have the panel show on each page of the application so we don’t have to jump around?"
  • "The verification panel cannot cover up the application information."
  • "We are on the phone with the customer, so verification needs to be quick!"
  • "How will we know when an application needs to be verified?"
Checklist Legacy

Screen from the Legacy checklist.


Using Adobe Xd, I experimented with the panel user flow at each stage of the checklist task and presented the idea to the development team.


Allow the loan officer to complete the closing checklist task by presenting a panel on the right side of the application. This panel shows items and highlights the fields within the application that need to be verified.

The user is automatically taken to the appropriate screen that includes the fields being verified as they go through the checklist. This way the user does not need to hunt down the correct screen and field.

Checklist Wireframe
Checklist Wireframe

Adobe XD Wireframes

User Flow - Prototype Screens

Once the user flow was defined, I created an interactive prototype using HTML and CSS within our front-end framework.

The loan officer will click on the “double check mark” icon located on the navigation tool bar to open the beginning of the closing checklist.

The button will be white if there are no pending checklist items. If there are pending items, the icon will be yellow like above.

Checklist Ready

The checklist task will be displayed on the right side of the screen and will contain the information to be verified. The associated field(s) will be highlighted.

If the information needs to be modified, the loan officer will click on the pencil icon to edit the field. In edit view, the field to be modified should remain highlighted.

After these changes are saved, the loan officer will complete the task by clicking the Confirm(Verify) button.

The user will be automatically advanced to the next screen and field to be verified.

Checklist Leftnav

After some user feedback we updated the button from "Confirm" to "Verify" because it was a clearer message.

If there is no text in the notes text box, only the Verify button will appear. The user can confirm or skip to the next checklist item.

Checklist Confirm
Adding A Note

If the information is correct, the loan officer can add a note to the task, then click on the verify button, that will advance them to the next checklist task. The Save Note button will only appear if there is text inside the notes text box.

Checklist Note

The "completed by" section will now display the loan officer's name and the completed date and time. If the loan officer needs to change a completed task, they will click on the "Reset" link. The updated task information will replace the previous one and the form will be enabled.

Checklist Complete

A selection menu will allow the user to find a checklist item within the checklist task. The menu provides a filter so if the user wants to type the checklist item number or key words, the menu list will display those items.

Checklist Search


Here's a video of the functionality after the implementation of the feature.