Context

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. They have been one of the leaders in funded loans that lend in the automotive space. In mid-2018, CU Direct decided to shift business strategy and expand their product offerings outside of just automotive lending and into mortgages and direct to consumer lending. These tools and services would be encompassed as a consumer point of sale (POS) and data management system for both consumers and staff who manage loans.

The problem

CU Direct’s leadership had decided its current business model had plateaued and wanted to diversify its product offering by venturing into the mortgage space. Their last loan product launched in 2012 and it lacked features like quick quotes (soft-pull), uniform application flow, offering easy methods to shop for loans, and weren’t mobile friendly.

I was assigned to lead the design direction for the new experience by allowing users to easily shop, apply and manage their mortgage loans through the enterprise consumer portal.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of CU Direct.

My role

I led this project in the initial stages by managing the experience during discovery, research, and strategy. During the execution phase I was the lead contributor for delivering wireframes and high-fidelity prototypes while defining features with product.

I led 2 UX and 1 visual design contributor to help in establishing user flows and design guidelines. Later on, I drove the effort to implement designs with our development team.

Creating a vision through research

I led my 3 other designers in a 2-week long discovery and design workshop to craft an ideal lending experience for the consumer portal. We began to carve out discovery artifacts by conducting research with in-market shoppers (applicants/borrowers), back-office staff (loan officers, processors, funders, etc) and decision makers (CEO’s, Chief Lending Officers, Mortgage Operations Leaders).

By the end of our initial research, I would use findings and artifacts to account for all potential user flows, and indicate table-stake features necessary to make the loan process easier for our users in these 3 phases:

• Pricing: How can we help shoppers doing online research for mortgages easily find and compare loan types that fit their needs?
• Application: How can we make the lengthy application process smoother and less daunting for applicants?
• Documents portal: After application submission, how does the system prompt the user on what to do next? Does the user know how long the approval process will take?

Designing pricing

Now that we had a clear idea of who we were designing for, and what features we’d focus on for MVP, we would start with the pricing phase. Securing a favorable mortgage rate is essential to most folks, and to shop and lock in rates only requires several fields on information to return results depending on the loan type. I began to create a 9-question form for each of the 4 loan types based on their loan-specific questions. I soon realized that we could consolidate these 4 forms into 1 dynamic card-based flow that would serve the user better:

1. Adaptable pricing: Following a decision tree of rules, we could surface one card at a time in a digestible manner. As a result, we could lessen the cognitive load a user might face upon facing a long form with a myriad of unfamiliar financial questions the first time.
2. Quick on any screen: By breaking down each question as individual cards, it helped to give a better mobile experience. For instance, each question was short enough to fit on screen with minimal scrolling. We could also visualize progress to the user since there was a finite set of questions being expressed with this interaction pattern.

Over the next few weeks I created a few versions of this flow while revisiting them multiple times to incorporate feedback from several rounds of UX, PM, and legal reviews.

Designing a better application

Forms can be long and arduous, but they don’t have to be painful. Among balancing all the business objectives with user delight, I had focused on targeting these facets:

1. Transform the monolithic: Overhaul the cumbersome URLA form 1003 into an easily digestible series of questions, set in a logical order and flow that felt natural to comprehend.
2. Easy navigation: Depending on your setting, you may or may not have all the necessary information at your disposal to complete the form. You should be able to move about the application to fill out what you can, and resume when you’re ready.
3. Reduce clutter: The nature of adding additional complexities, like co-borrowers, to your loan should be executed in a natural and coherent pattern that scales with the application.
4. Clear affordances: Labels should use natural language to tactfully convey the request. Required vs optional labels should be prevalent throughout to be explicit and transparent.

Designing document management

Origence was acquired by CU Direct in 2018 to leverage its loan origination system (LOS) which works to process mortgage transactions. We needed to design a self-service, front-end to guide the user on next steps after they’ve submitted their application.

After going through the existing implementation and understanding the underlying framework, I highlighted 3 issues that could be solved through these design solutions:

1. Prompted: Using a task-based approach would guide the user, and also fulfill the most time-sensitive documents best for the process smoother.
2. Always informed: Through the use of a dashboard, the user would have high-level status’ of their application’s due date and where it was in the process along with an audit trail of who is managing their loan at any given time.
3. Guidance: Clear visuals to reach out to staff that can help with any questions an applicant may have. A knowledge base of curated answers and tooltips should are sprinkled about contextually to alleviate any questions.

The resulting design followed Shneiderman’s mantra-­ overview first, zoom and filter, then details-­on-­demand. The changes focussed on removing unnecessary load on the user due to the heavy amount of tasks a borrower must submit.

Evaluation

Along-side our user researcher, I helped conduct 9, 1:1 sessions with in-market home shoppers and recent buyers who applied for a mortgage in the last 2 years. 3 of the 9 participants had no experience with shopping or applying for a mortgage, whereas 2 considered themselves to be experienced shoppers.

The session was split into 4 segments – a background interview, a free-­run direct observations, and cognitive walkthrough followed by a brief semi-­structured interview. During the direct observation segment, participants were asked to shop as a primary borrower at the beginning of their process and apply for a mortgage for their home. The sessions were video and audio recorded for note-­taking purposes. The sessions were conducted in a quiet lab using their own devices with minimal interruptions.

Pricing findings

Users found the straight-forward approach to drilling down to a priced product to be pretty effortless and that it was very clear what to do. However, some participants on the Results screen were not clear about some of our labeling when refining their results. This prompted a deeper discussion with our team to focus on voice-and-tone for the overall experience.

Application findings

Most of the participants expressed that, considering the inherent complexity of mortgages, the application was user friendly and that they felt supported. Virtually all users recognized the navigation list as steps/progress that need completion in the application and would routinely use the list to jump to other pages if they needed. Non-experienced shoppers felt like the application was overly long which resulted in the current design and consolidated the application pages into minimal groupings rather than numerous short pages.

Document portal findings

For both experienced and non-experienced participants, users understood what their outstanding tasks were and were able to navigate to the appropriate pages to complete the exercise. Giving a timeline on the overview page scored very well subjectively with seasoned shoppers since expressed the confusion and unclarity at this phase of the process in their past experiences.

Takeaways

There are 3 big learnings from the entire process:

• Countering bias: People tend to dread filling out long applications in general. Our users expected the entire process to be long and arduous. Long journeys like shopping and applying for mortgages should be designed with the assumption that the majority of users find it largely intimidating with difficult functionality that designers take for granted. By the usage of card UI elements, reassuring language and expectation-setting, we were able to pull positive themes from our testing.
• Keeping the experience familiar: The enterprise consumer portal was designed to rely heavily on existing interaction patterns that users are already used to. Rather than creating something completely new, we wanted to give our users an experience that felt familiar and intuitive.
• Help, don’t confuse: The document portal has a lot of functionality that is critical to fund a loan. However, new home shoppers need a helping hand to guide them through the process. Initially showing users only a few of the important options and disclosing secondary features through progressive disclosure (in the case of adding co-borrowers) minimizes complexity yet still gives enough options to power users.

This project was much too massive to summarize in one post. To read more about it in detail, please check out the in-depth analysis.