the situation
CU Business Group utilized basic MS Doc files that credit union reps were to fill out for loan applications and submit for underwriting and consultation. These files comprised:
• Underwriting Request Form — when a loan application was submitted for review.
• Documentation Request Form — when documents were required for other products.
• Annual Review Form — to have CUBG perform an annual review on the credit union's books.
• Modification Request Form — to track modifications, changes, and additions to original loan documents.
• And other important forms.
My team consisted of CEO, COO, CTO, Front / Backend Developer, Business Analyst, and myself (Senior User Experience Designer / Product Designer).
These MS Docs were dated, inconsistent, disorganized, and provided no way to capture choice dependencies and no real-time user validations - which resulted in wasted time and error-prone inputs.
In addition to these problems, CUBG acquired Member Business Lending LLC (MBL) as an outward-facing portal (developed in 2011) for credit union reps to use when submitting forms. This platform, however, had a number of issues:
1. Contained an old AJAX Library and needed to move to either C# or Angular to improve usability.
2. Had become outdated with significant irrelevancy and depreciation to the source code.
3. Lacked sort/filter/category features in the interface, and
4. Lacked a unified solution.
The Portal Login and SQL Query database needed to be restructured and organized with new functionality to display New and Active loan pipelines in a simple, easy-to-navigate, and streamlined format.
This Collateral Details page is an example of the old MS Doc files my team and I had to restructure into smarter input field formats. These forms could not track decision dependency branching, and lacked user guidance / user validations on correct/incorrect field entries, nor could it calculate principle / interest disbursements to safe guard against over draws.
the tasks
Once the scope and budget of the project were established I compiled a summary of UX Work:
• Portal Login screen
• Main Navigation header Dashboard design
• Subnav Tab Layout pages: Service Request Form (determines which type of Underwriting checklist is implemented)
• Upload Documents feature
• “Finalize” button so submission is non-editable when the underwriter begins their processes
• Document Request Form pages, connected to loan
• Annual Review pages
• Modification Request pages
• Other form submitting pages
• File Storage System / Versioning History: Chain of Custody Initials, date, status change tracking
• Load Status Field feature: Pending, Approved, Closed, Canceled
• Create interactive forms, streamline time-to-tasks, determine dependency fields
• Implement sidebar Search/Sorting/Filter/Category features in tables
• Complete Lo-to-Hi-Fi wireframes
• Map Relational Logic for mutually exclusive radio buttons / inclusive checkboxes, and input field dependencies
Optimize Underwriting Request Form - 118 fields for spacing, layout, identify "Required" vs "Optional" fields, etc.
Optimize Document Request Form - 237 fields for spacing, layout, identify "Required" vs "Optional" fields, etc.
Optimize Modification Request Form - 198 fields for spacing, layout, identify "Required" vs "Optional" fields, etc.
Optimize Annual Review Form - 29 fields for spacing, layout, identify "Required" vs "Optional" fields, etc.
Optimize 3rd Party Form - 16 fields for spacing, layout, identify "Required" vs "Optional" fields, etc.
Ensure permission/view rights per CU login is segregated
MBL Optimization:
• Optimize old MBL Main Nav: Dashboard, Account Activity, Admin (employee side of the pipeline), & Help
• Optimize MBL Account Activity SubNav: Loans, Search Loans, Pending Transactions, & Import Files
• Implement file upload, versioning history, file storage
• Allow for split payment into principle/interest amounts
• Implement Transaction History sorting table data
• Implement a Payoff Quote feature
• Contact Info and Address Change features
• Add Mailing (business logic involved here - a request form, included in the Statement of Controls (SOC) Audit), Address for additional Guarantors
• Optimize “Payment Reporting Template” file for CUs (can’t change a lot on this, but the ability to batch A Number of (500+) loan payments as frequently as necessary from the CU - implement the ability to upload when CUs receive the transaction in their general ledgers - they have an export that matches CUBG’s template: i.e. "here are all the transactions you are importing."
discovery & design phase
The Discovery phase continued with outlining critical decision branching dependencies that influenced my user interface design solutions:
UX User Research:
CUBG's internal underwriting team and selected CU client reps were asked to participate in user contextual inquiries and field studies. The results and analysis of this research revealed several organizational issues within their current forms: unnecessary redundancies, as well as areas where new regulatory detail was required.
Ux/ui wireframing
Component Library:
My next step included compiling a streamlined component library of assets to utilize throughout the redesigned forms. These components included:
• Advanced organizer process steps with variant states to visually guide users between Current step, Successfully Completed, and Alert states to notify users of areas requiring attention.
• Navigation header bars
• Subnavigation menus
• and a comprehensive list of all Materials UI input fields along with their validation states:
Active Service Requests page:
This page was the first hierarchy of information, the login dashboard, was limited by permission rights to a listing of a CU Manager or CU Rep's personal service requests - sorting features helped isolate certain requests:
Credit Union Profile and User Settings pages:
These made proper attribution to the Service Requests simple:
Underwriting Request Form: Step 1: Credit Services page:
This page illustrates the correct implementation of several UX Best Practice Guidelines:
• Logo placement and home link in the top left area - this is an established user expectation behavior.
• Optimized main navigation with clear visual distinctions (color, bold, underlined) to show selection state and sub-navigation menu carrot.
• Breadcrumbs clearly anchor users within the sitemap.
• Clear ADA Compliant H1, H2, etc. headers for the form are established.
• Advanced Organizer steps clearly show users where they are in the process.
• Radio button interactions determine the dependencies below the prior selection.
• Inactive states are still shown - and become active if the appropriate dependency above is selected:
Purpose / Terms page:
This page illustrates many of the layout organization, Material UI components, and their validation states, designed to clearly assist CU reps through the necessary input fields required for this part of the form:
Collateral page problem:
This section was a bit complex because different forms required various types and subtypes of collateral information. Below is a capture of the MS Doc collateral lists from just two of the forms: Document Request Form and the Modification Request Form. As you can see the collateral types/subtypes varies considerably, and these all needed to be optimized and consolidated under one UI:
Collateral page solution:
I created a top / down UI hierarchy starting with the Collateral Type (i.e. "Instruments/Securities") > which determined the menu field for subtypes (i.e. "Life Insurance") > which determined the specific collateral section to capture information for that subtype. In the case of Life insurance, the most complex collateral type required, it was also necessary to be able to add multiple policies as necessary.
Infinite adding of Collateral types was also possible:
Upload Documents page:
For the scope of this project a batch upload documents section was provided to make the form submission more streamlined for CU reps. They could compile all the related documents for the form and upload these to the database in one action. It was then the burden of work for the underwriting team to make sense of the batch upload.
My initial solution was to require CU reps to separate the required documents for upload based on a checklist of dynamically generated required documents. This solution would have been more work on the CU Reps side, however, it also would have confirmed that every document was included before submitting the form - and made it easier for underwriters to do their work.
Development budget and scope constraints made this solution not possible at this time:
Summary page:
This final step was a read-only summary of all the prior steps. Validation and Alert icons indicated success or required attention to each section and edit links to add or correct information before submitting the form.
final thoughts
The team at CUBG was great to work with. Our weekly sprint meetings empowered us to efficiently keep within scope and timelines. The dev team was very receptive to the UX/UI work, making their jobs more efficient as well.
The rapport we developed over this project was complimented by CUBG making additional budget approvals to keep me and my team engaged through later phases and the completion of this project thru 2024.