Enterprise consumer portal discovery and MVP

🕑 20 minute read

Enterprise Consumer Portal

For the past 20+ years, CU Direct’s main revenue generator was bridging credit unions with auto dealerships to facilitate auto loans through direct and indirect lending. We’ve been one of the leaders in the number of funded loans in the automotive space. In mid-2018, CU Direct decided to shift business strategy and expand their product offerings outside of just automotive. The new initiative would enter the company into the mortgage and personal finance spaces and open up these lending products outside of credit unions to other lenders like banks, mortgage banks, etc.. These tools and services would be encompassed as an enterprise consumer POS and data management system for both consumers and staff.

Problem

This monumental project would lead to the creation of a lender-configurable site for loan-shoppers. It would allow them to price and compare loans that made sense for their financial situation, apply for them, and ultimately manage the process through document submission and management. Because the new front-end POS would be leveraging existing LOS (Loan Origination System) technology, we had to implement features and updates in parallel to ensure both ends would be talking to each other.

Design/Discovery Process

We began to carve out initial discovery items by conducting research to find our audience and understand what segments we would be building for. Numerous interviews were scheduled with both new and experienced home shoppers to gauge their wants and fears in this operation. Our three primary segments consisted of consumers (borrowers), back-office staff (loan officers, processors, funders, etc) and decision makers (CEO’s, Chief Lending Officers, Mortgage Operations Leaders).

Our shiny new personas:

The decision was made early on to focus on our borrower segment first for MVP since features from a requirements standpoint would be less prohibitive than the staff who managed these loans. For our borrower personas, we ultimately settled on 2, but addressed these 4:

  1. First Time Buyer: 30’s & 40’s, tech savvy, needs process education and guidance
  2. Seasoned Buyer: 40+, less tech savvy, knows more of process, second home, rental or investment
  3. Refinancer: 40+, done this before, more likely to go with major bank, might be getting cash out or consolidating debt
  4. Home Equity Line: (HELOC) although different use case, same demographics as seasoned buyer and refinancer. Lower priority to CU Direct.

Our staff segment focused on member service representatives, loan officers and loan officer managers who oversee loan processing and reviewing documentation. To further understand what touch-points they had across the loan process we bucketed them into this chart.

Journey maps:

Solution

As we began to understand the motivations and intentions of prospective mortgage shoppers and back-office staff we began to pull out feature themes based both on persona and phase types. We did this as a collaborative effort with designers, product managers, and various stakeholders over the course of multiple sessions. Small groups were tasked to brainstorm any feature that were table-stakes or they felt were innovative in the market. Once everything was compiled we used a bit of a card-sort exercise to group them all into the logical groupings listed below.

0*RCIoB6g_IQtKrV47

Feature themes by persona

Borrower:

  • Status,
  • Timeline
  • Tasks
  • Documents
  • E-Sign
  • Communication
  • Advise Me
  • Educate Me
  • Examples
  • Explain Fees
  • Mobile Friendly
  • Activity
  • Pre- Approval
  • Data Security

Loan Officer:

  • Pipeline
  • Status
  • Notifications
  • CRM
  • Automation

Manager:

  • Dashboard
  • Pipeline
  • Reports
  • KPIs
  • Audit Trail

Admin:

  • Customize Flow
  • White Label
  • Enable Fax/Mail
  • Integrations
  • Choose Nomenclature

 

Feature themes by phase

Membership eligibility (credit union specific):

  • Eligibility
  • Benefits
  • Services
  • Save My State

Loan Shopping:

  • Compare Rates
  • Calculate Payments
  • Scenarios
  • Rate Trend
  • Print/Send Pre-Approval
  • Advise Me on What I Can Afford

House Hunting:

  • Pricing Scenario
  • Reminders
  • CRM

Loan Application:

  • Help Content
  • Examples
  • Autofill
  • Integration/automation

Post Application:

  • Status
  • Timeline
  • Tasks
  • Communication
  • Documents
  • E-Sign
  • Activity
  • Automation
  • Validation

Loan Servicing:

  • Payments
  • Payoff
  • Principal vs Interest
  • History

Resulting sitemap and user flows:

Journey Phase 1: Pricing

Since we had a clearer idea of who we were designing for and what features we’d focus on for MVP, we were able to start building out the various phases for our borrowers. The initial phase in the journey of a borrower is ofter to explore their options in the market and begin pricing products for various lenders. Shoppers want a way to explore their options in a non-intrusive and non-committal way. They didn’t want to go through the hassle of signing up and registering with a product just to look at rates and options. One of the pillars of our enterprise POS was to allow shoppers to easily explore, and only gate them at registration once they knew they were committed with applying.

Our mortgage experts helped in giving us an understanding of what information was required to produce a priced product to somebody searching. It really didn’t require too much on the user’s behalf which was a relief.

Breaking down pricing requirements:

 

I wanted to make the experience feel light and quick. Since it was a quick process for the user, I didn’t want to let the user down with seeing a standard form. There were essentially only 9 questions that we needed to ask the user that were quick and usually what they would have at hand. I wanted to serve up one question at a time and go through the series of questions as they went down the decision tree. Based on our design system’s component library, we used our card based UI and asked each question in a thoughtful and personal manner that helped the user focus easily. Initial user testing found this screen to be pretty straightforward and that it was very clear what to do. We dubbed this pricing flow as “Quick Quote.”

<gallery of quick quote 9-questions>

Pricing “Quick Quote” interaction:

 

Once they went through the series of questions they arrive at the pricing page where they would be able to compare mortgage products by rate, term and also give them a helpful list of any fees associated with the product type. Something unique to our mortgage pricing page would be the ability to compare the products in a comparison page. There weren’t any competitors who gave the ability to compare mortgage products and in an effort to really help the user and offer full transparency to the products, we felt like this was a great feature to incorporate.

Desktop & mobile screens of pricing results and comparison:

Journey Phase 2: Application

Upon making it through to the application phase, we consider the user to be highly motivated yet still nervous by this time in their journey. We’ve crafted the application to be a hybrid of both linear and non-linear flows. There are sections within the application deemed by the 1003 URLA form as requirements for mortgage application. The manual form had not been updated from the industry in a number of years (although it is due for a refresh in 2020), so the requirement sections had to be grouped in a logical flow that not only added more clarity for digestion, but also ordered in a flow that progressively disclosed the more difficult questions towards the end. Product and I worked to pull all the data fields from the URLA form on to a spreadsheet and we used to to perform a gap analysis and ensure we were accounting for all required fields. The end result for the standard mortgage application flow resulted in the following order:

  1. Personal info -information about the applicant and any other co-borrowers
  2. Residential history – where they’ve lived for the past 2 years
  3. Subject property – information about the property they’d like to finance
  4. Loan details – their loan choice and down payment information
  5. Employment & income – stated income for the past 2 years
  6. Assets – assets used for down payment, closing costs or reserves for the loan
  7. Liabilities – any existing obligations like credit card debt, student loans, etc
  8. Demographic info – optional information about the user’s identity
  9. Declaration – government regulated questions about the applicant

<URLA Gap Excel to resort (in Figma)>

You can read in-depth about my approach for the enterprise application case study here.

Journey Phase 3: Post-application

For borrowers, this phase is the most nerve-wracking time. The application has been submitted and now they play the waiting game to see if they’ve been approved and are anticipating anything that can happen during the closing period. In the meantime we try to comfort the applicant by informing them about next steps, and set up a list of needed documents in the form of a task list; for both them and the processors handling their loan.

<insert picture of “what’s next modal”>

When landing on the post-application page, customer interviews revealed that it was important to inform what steps the borrower needed to take next to make sure the loan would process smoothly. In a standard mortgage application, this consisted of standard stipulations ranging from W-2’s, licenses/ID’s, and miscellaneous bank, asset and liability statements. The approach here was to prompt them with these tasks as a “to-do” list so they could take inventory of all the documents they would need to collect, and submit them upon request. Since some of the documents may be a bit nebulous to a first-time borrower, the language and experience focused on each task singularly. When entering the upload screen, the document requested is broken down in human-speak and provided with additional tooltips if anything else remained unclear. I also wanted to reinforce the singular focus of the task by presenting it in a slide-out panel from our design system. This removed all the visual noise on the page to present a clearer visual of the request and how to complete the task.

<pic of to-do list & upload screens>

Lastly, we felt the inclusion of a timeline/progress bar was needed for such a complicated process. By marking where the user was at in the lending process helped them to understand how completing their document tasks brought them closer to completion, and also helped to motivate them by seeing how much they’ve completed by that point. In testing, users said it was “satisfying to see the timeline progressing.”

<images of timeline in various stages>

This was one of the first pieces that got fleshed out in design and is in the process of a rework. The current timeline design is looking a bit long-in-the-tooth and does not abide by our design system guidelines. Worse still is limitations that surfaced when connecting it to other product types; it just wouldn’t scale elegantly. I reworked the timeline’s UI to match the rules we have for design components and reorganize it so that it would scale with the enterprise. Take a look below at a few of the updated UI below.

<images of post-app redesign>

Designs

Take a look

  • Date June 26, 2018
  • Tags Interaction Design, Mobile, Prototype, Research, Web App