Optimizing a loan evaluation and processing workflow

New American Funding | 2021 | 5 weeks

Product Design

Overview

The following outlines a 5 week-long design project to speed up and simplify a home loan evaluation and processing workflow. This workflow was a key piece to the launch of Cosmos, a new Saas CRM product to replace a clunky and outdated legacy app.

Team

UX/UI Designers - Me, Elise Munoz
Product Manager - Jessica Chen
Business Analyst - JaQuisha Harris
UX Researcher - Joshua Han

Problem

The Product Manager, Business Analyst, and UX Researcher had one-on-one conversations with lenders about their experience with. Based on the feedback, they assembled a general diagram to demonstrate the workflow, and presented two major findings:

Lenders have trouble understanding loan activity to decide their next action.

Lenders need to see the latest activity and what status the loan is in so they can quickly
take action and process more loans. Many lenders reported tracking activity on paper and in word documents.

New lenders feel overwhelmed and frustrated when assessing loans.

Lenders felt that the app was overly complex and made a fairly simple process daunting and time consuming. Some seasoned lenders felt that it took them upwards of a year to be fully adept at using the app.

Customer borrower journey map from lead to loan
So how might we...
  • Assist lenders in quickly identifying loan statuses in order to inform what actions to take next to progress applications?
  • Help new lenders achieve a higher level of productivity in order to push out more loans?

Let's get into the design process ✍️

Led by user research and guided by LEAN UX framework, the team came together frequently to collaborate, quickly iterate, and repeatedly touch base with our users throughout 2, week-long design sprints. In the 3 weeks following, I worked with one other UX/UI designer to develop high-fidelity mock-ups ready for handoff.

Empathize
1 on 1 interviews

Define
HMW statements

Ideate
Lightning demos Brainstorming
Sketching

Prototype
Wireframing
Rapid prototyping
High-fidelity mock-ups

Test
Usability testing

Lightning demos

We kicked off the design process with collecting and sharing inspiration. Reoccurring ideas include using pizza trackers and colorful graphics to indicate progress.

Ideas and inspiration from other companies that have solved similar problems

Sketches

Working off of our inspiration we separately sketched solutions. We then voted for ideas and collectively selected two ideas to move forward with: 


  • Linear progress tracker both lead and opportunity details
  • Prominent call to action buttons to complete next step
Purple dots heat-map intriguing ideas while orange dots act as votes for specific ideas

Rapid prototyping

Working off of the top-voted sketches, we developed preliminary prototypes in preparation for usability tests in the following days. In between usability tests, we continued to develop the prototype in direct response to user feedback.

Tracking + making progress

Referring to the customer journey map, lightning demos, and sketches, we created separate cards for opportunities and leads denoting their progress. The pizza tracker design captures and conveys completed steps, current step, and next steps. Buttons with clear call to action messages direct and allow the user to complete the next step straight from the card.

Lead Progress Tracker
Opportunity Progress Tracker
Converting a lead to an opportunity within the progress card

Usability testing

We planned for 4, 15-minute long moderated usability tests with lenders, but by the second interview, we found that our design failed to meet both of our testers' needs. Given that, we cancelled the remaining two test sessions.

Insights

Both testers reported that the progress tracker did not accurately represent progress and statuses in these key ways:

  • More than one status can pertain to a lead or opportunity
  • Lenders skip around in steps and statuses
  • Lenders manually update statuses when progress is made over phone or email

User research

JaQuisha Harris (Business Analyst), Jessica Chen (Product Manager), and Joshua Han (UX Designer), revisited their conversations with lenders regarding lead and opportunity statuses.

Revised statuses diagram based on research findings

The research team revisited their conversations with lenders regarding their workflow and adjusted the diagram to demonstrate these two things:

  • Primary statuses follow a linear order
  • Lenders manually update statuses when progress is made over phone or email
Revised Lead and Opportunity Diagrams

With confidence in our understanding of the workflow's requirements, we planned for another week-long design sprint. With a firm timeline, myself and the other UX/UI designer assured the team that we would be able to deliver fidelity mock-ups in three weeks as opposed to our allotted four.

On to design sprint number 2!

Lightning demos

We kicked off the second sprint with creating and sharing lightning demos. New ideas include nesting statuses in drop-downs, and checklists of complete, incomplete, and suggested action items.

Ideas and inspiration from other companies that have solved similar problems

Sketches

Working off of our inspiration we separately sketched solutions. We then voted for ideas and collectively selected three ideas to move forward with: 


  • Status card with editable status fields
  • Interactions card showing to provide more context to selected statuses
  • Checklist with action items
Purple dots heat-map intriguing ideas while orange dots act as votes for specific ideas

Rapid prototyping

Working off of the top-voted sketches, we developed preliminary prototypes in preparation for usability tests in the following days. In between usability tests, we continued to develop the prototype in direct response to user feedback. We focused our effort on three key experiences: 

  • Comprehending and updating loan statuses
  • Converting a lead to an opportunity (first step in starting a loan application)
  • Completing action items within a checklist

Comprehending and updating loan statuses

We redesigned the status card to accurately represent how lenders use loan statuses.

  • Main statuses are housed in a drop down allowing the lender to quickly scan for the status and update it as needed
  • Sub-statuses have active and inactive states and multiple can be selected at once
  • Likelihood can be set to cold, medium, and hot to quickly record and convey general activity on the loan
Lead Status
Opportunity Status
Converting a lead to an opportunity

Converting a lead to an opportunity is required before starting the application process with prospective home buyers. As moving applications is a primary objective for lenders, we placed a convert button at the top right the page for optimal CTA placement. The bright orange hue commands the attention of users and remains static while scrolling as to never leave frame of view. Once an opportunity, a banner flies that prompts the user to start the application process.

Converting a lead to an opportunity on desktop
Converting a lead to an opportunity on mobile

Completing action items within a checklist

The opportunity checklist was a result of a user need found that most lenders quickly want to see next steps and take action. During usability testing, we found that more seasoned lenders found the checklist more so distracting than helpful. We implemented a hide option which collapses the checklist and moves to the very bottom of the content scroll.

Expanded View
Hidden View
Interacting with a banner to complete a checklist item on desktop
Viewing opportunity checklist items on mobile

Usability testing

We conducted five moderated usability tests with lenders and found that the testers navigated through the flows with ease and minor frustration. With all five testers succeeding in the completion of various tasks, it is likely that the solution as a whole is both viable and user-friendly.

Modifications based on tester feedback
  • Option to hide the opportunity checklist as a couple of more experienced lenders expressed that they did not want nor need the guidance
  • Removal of transaction and property details from the overview as our testers found this to be extraneous information and preferred having to scroll less
  • Details of the last two contact attempts in the engagements card as we observed our testers actively looking for that information to determine their next actions
Insights
  • The usability tests suggested that the design most likely meets usability standards as all five testers were able to navigate through the tests with ease and minor frustrations
  • The usability tests suggested that the design provides value to the user as testers were able to distinguish a difference between a lead and an opportunity, succeeded at vetting an opportunity, and found the statuses concise and useful
  • Develop designs and explore solutions for specific lenders to ensure that we have landed on the best solution that will work for all of our users
  • Moving forward, there is room for improvement in communication across the team and opportunities to ask clarifying questions an involve Product Managers and Business Analysts in prototyping and user testing

Outcome

Despite the initial setback and a shorter timeline for high-fidelity mock-ups, we met our goal of delivering final designs to stakeholders on time. It was a challenge, but myself and the other UX/UI designer were able to complete hi-fidelity mock-ups over the course of three weeks instead of four.
The design received approval from all stakeholders and was then developed, but due to leadership changes, Cosmos was never launched and the focus changed to making improvements to the existing legacy app.

Thanks to the expedited creation of high-fidelity mock-ups, the final designs were delivered to developers on schedule.

Despite the initial setback and a shorter timeline for high-fidelity mock-ups, we met our goal of delivering final designs to the development team on time. It was a challenge, but myself and the other UX/UI designer were able to complete hi-fidelity mock-ups over the course of three weeks instead of four.


The Cosmos MVP was fully built out and was ready for launch, but due to leadership changes, Cosmos was never released as the focus changed to making improvements to the existing legacy app.

I'd love to connect!

Reach me on Linkedin or shoot me an email at kristenfalk19@gmail.com

Website designed by me 👩‍🎨