DESKTOP WEB UX/UI | PROTOTYPE | DESIGN SYSTEMS
My client aimed to build a solution to automate and simplify the process of ensuring compliance with a complex set of loan rules.
Consumers would upload documents through an external facing app I designed. Then internal users processed the documents. Users were following manual procedures that were inefficient, inconsistent, and error-prone.
These improvements were essential to reducing risk and decreasing the process time for consumers acquiring loans for home purchases.
As the lead product designer for this application, I worked closely with the product owner to establish a UX strategy. The goal was to give users awareness into the process, confidence in the automation, and control to use their expert judgment where needed. Throughout iterative design sprints, I collaborated with other designers to evolve the design system created for the product suite. I designed:
Rule management UI to enter and update ever-changing rules in a master database.
A validation UI to monitor status, review automated evaluations, and drill down to resolve issues. (focus of this case study)
Note: elements of this case study have been recreated or obscured as needed.
Analysis of the Current Procedure
I began the process by analyzing the current procedure. Users visually inspected documents (pictured) and manually compared their data fields to fields in other documents. They also compared the document fields to data previously entered in the system according to rules in a spreadsheet.
I assessed the original documents to determine the content and organized the data according to users' evaluation and comparison tasks. This led the information architecture that drove the design concept.
Compliance Screen Design Concept in Excel
I worked with the product manager to define the layout of rules and summarize results in Excel. This allowed us to refine the conceptual model and perform sample calculations before committing to the visual details. Using Excel rather than immediately jumping to a design tool allowed me to collaborate on the design with the product manager.
Compliance Screen Refined
I then designed the screen (a worksheet) in Axure RP as part of a larger clickable prototype.
I used a template for the appropriate page type, which helped ensure consistency across similar pages. This was just one of several worksheet pages.
I collaborated with the product manager to include additional details and refine the design over the course of several Agile sprints. We also resolved implementation challenges developers uncovered without compromising the design goals.
Validation Overview Screen
I then designed an overview screen to provide a high-level summary of all work assignments (jobs). Each job includes several worksheets like the one in the previous screen. Jobs have comments and conditions, which are like to-do items.