I was the lead designer of a 5-person design team for StreamLoan, a mortgage app. We created a flow that allows loan officers to pull credit so homebuyers can be approved to shop.

rotated mockup c

ROLE

User Interviews
Task Flows
Prototyping
Usability Testing
Design System

DURATION

8 Weeks
Sept 2019

TEAM

Lead Product Designer
Streamloan
Team of 6 Designers
Native iOS, iPad, Desktop Web

OVERVIEW

Loan officers nowadays use a variety of outdated, old, complex LOS (Loan Origination Software) to close mortgages. Streamloan seeks to reduce the closing window by consolidating the entire process into a secure, streamlined, 100% digital and mobile solution.

THE PROBLEM

Loan officers are taking too long to close out their loans.

Today, the average home loan for purchase takes 40+ days to close, with lender manufacturing costs upwards of $8,800. StreamLoan can reduce the closing window by consolidating the entire process into a secure, consistent, simple, private-labeled digital and mobile solution.

40%

THE OPPORTUNITY

How can officers close out their loans faster? 

Make tasks available on all devices so they can work while meeting with clients.
Since existing software are restricted to desktops, loan officers are forced to separate their job functions and accomplish tasks one by one. Moving them to mobile devices lets them multitask.

Consolidate remaining 60% of job functions onto Streamloan.
At the moment, the pull credit + pre-approval letter flows do not exist in StreamLoan. These are both integral steps for homebuyers to begin shopping for homes. Moving these to StreamLoan will expedite the mortgage loan process for loan officers.

Identify quick wins on existing UX processes to improve ease-of-use.
Use modern design patterns / solutions to optimize usability for loan officers, keeping a healthy balance between implementation effort and ease of use for the user.

🎉 Key Features

iconspace_Power_25px

Quick Login

Input and manage agency credentials all in one place.

iconspace_File_25px

Report Summary

View a client's debts and assets at a glance.

iconspace_Chat_25px

Annotations

Quit printing. Jot down notes online to share with the client. 

How it works

Credentials mockup

Login with Credentials

Users stay signed in. When their credentials expire after 60 days, they can access the Credentials tab at any time.

Design Goal

Minimize friction with logins and managing credentials.

Order Credit mockup

Order Client's Credit

By default, the officer's Agency + Trimerge + Run Joint (if client is married) are checked. For most cases, they can just click Order without changing a thing.

Design Goal

Reduce processing time by default-checking popular options. 

Credit polling mockup

While StreamLoan pulls the credit report...

Users can view the status updates of things happening in the back-end. If an error occurs, they'll see an error state they can act on as well. No more vague crashes.

Design Goal

Offer transparency so that users feel more at ease.

Summary mockup

View a Quick Summary

After generating the report, users can view the most important credit info on a client, negating their need to browse the full PDF.

Design Goal

Improve ease-of-use by surfacing most relevant info earlier.

comment mockup

Annotate the Report

If the user needs to make annotations on the PDF (e.g. outstanding debt), they can do so in the app. This allows them to resolve issues quicker and remotely.

Design Goal

Increase convenience factors with accessible annotations.

⚡️ Design Process

Frame 2

Alexis

Frame 3

Julie

Frame 6

Me (Lead)

Frame 4

Freba (Co-Lead)

Frame 5

Anastasiya

Credit to Stubborn Library for these awesome illustrations!

My Approach & What I Did as a Lead

Double Diamond Method

As design lead, I led efforts across all 4 phases. Here is a breakdown of exactly what I did as a lead:

Project Scope

- Met with client to solidify his vision in terms of project requirements and branding
- Dissected company documentation to understand the product, information architecture and terms
- Solidified an 8-week roadmap for design

Discover

- Collaborated with Pre-Approval Letter design leads to strategize research plan, devised an interview script
- Conducted User Interviews with Loan Officers / StreamLoan users
- Assigned market research for design team to learn more about mortgages, lending and real estate
- Led affinity map session to boil down insights from interviews

Define

- Met with client to discuss insights from research and plan for design stage
- Convinced client to migrate existing design files from Sketch / Zeplin to Figma
- Mapped out task flow for Pull Credit process

Develop

- Hosted sketching session with team to collaborate & ideate on feature concepts
- Delegated different portions of task flow among team
- MVP Design System to align both teams on visuals
- Elevating sketches to wireframes to high-fi using D.S.

Deliver

- Validation testing with loan officers / users to confirm or deny hypotheses created from generative research in Discover phase
- Created handoff document to deliver to client & engineering, outlining structure of Figma file + naming conventions + hifi standards + file organization

My priorities as a design lead

Since we operated as a team of 5 designers, I knew we had plenty of manpower to borrow from. I knew that more of my time would be project-management and leading, not pushing pixels. I was also a member of a 2nd team for the same client. Therefore, my main concerns were:

1️⃣ Aligning the team on deliverables and quality of work.
2️⃣ Acting as a liason between our client and the team.
3️⃣ Assigning tasks and ensuring each member's desires were being met.
4️⃣ Product direction and facilitating project efficiency (deadlines, roadmap).
5️⃣ Partnering with Pre-Approval Letter team to match speed x quality.

ROADMAP

Since there were multiple stakeholders, I created a roadmap to align everyone on deliverables. 

Gantt chart

DISCOVER

We asked a lot of questions to understand what we needed to do.

In order to define what a valuable credit pull experience might look like, we set aside additional time for discovery during our design process. During this period, we interviewed existing StreamLoan users that are using other LOS in conjunction with the app.

We studied through our proposal document, held 4-hour meetings with our client, took way too many unnecessary walks to Starbucks, and researched similar apps that pulled credit as well as competing loan mortgage apps.

WHAT WE WERE DYING TO KNOW

We interviewed loan officers about their familiarity with tech,  main motivations and pain points from pulling credit.

Understanding our users was invaluable to understand our next steps. We  wanted to ask about their complex workflows to design better interactions for  our product. Thus, we sought as much from our end users to sympathize with the challenges they face and how we could help remove those hurdles.User research was quintessential. 

background
technology
Credit pull

HOW WE PROCESSED THAT INFORMATION

We mapped out each user's main takeaways - pain points, motivations, behaviors - and categorized them.

user-interview-notes
affinity-mapping

WHAT WE LEARNED FROM OUR USERS

Here are 5 great insights. There were many more impactful learnings, but I boiled it down to 5 here because 5 is just an easy number.

🖥 Loan officers are restricted to using desktops for their jobs

🧐 LOS (LendingQB, Encompass) are 20+ years outdated

🚙 Loan officers are always on the move, and need to multitask

😎 Each has their own process to close out loans

⌚︎ Pulling credit should be quick ( < 1 minute) and effortless

TURNING THOSE INTO ACTIONS

Loan officers need a reliable, accessible way to pull credit that is familiar to them.

👦🏼

Solution needs to be easily understood from desktop to mobile if officer switches devices.

👨‍💻

Credit pull process needs to be quick and easy within constraints.

🙇‍♂️

Screens should be easily digestible with most necessary info, but still familiar to old LOS to reduce barrier to entry.

PERSONAS

Our target users came from a less tech-savvy generation and were nervous about any change.

🧔🏻

Long-standing Loan Officers | 45 yrs old
Originates 5-10 loans per month
Is proactive to manage all aspects of a loan
Has worked in many banks and has been using old LOS
Gets nervous using new systems

👨‍💻

Upcoming Loan Officers | 26 years old
Relatively new to mortgage field
Always up-to-date on new tech and software
Has only been exposed to 1 bank's LOS (LendingQB)
Appreciates change and tackling new challenges

WHAT OUR USERS WERE DEALING WITH...

Users' current software were downright ugly...

We did some competitive research - downloaded some apps, watched demos, asked around - and realized the current LOS systems that mortgage officers used were horrendously outdated. We're talking Windows 95-lookin' programs. I felt bad for them.

IDEA INSPIRATION

So we looked at some similar, comparative, not-so-ugly apps that pulled credit.

I personally studied the UX and visual design patterns for Credit Sesame, a customer credit reporting company. They provided grade letters for 5 categories of credit analyses: Payment History, Credit Usage, Credit Age, Account Mix, and Credit Inquiries. I also looked into their responsive design.

PLANNING THE PROJECT

Then I took everyone to the drawing board!

I first took my own time to organize the requirements of the project. This was important to me because I wanted to organize tasks for everyone and see who could be responsible for what portions of the flow.

20190924_155827

I then held (multiple) meetings with everyone to make sure they understood the project requirements. We then took to the drawing board to draft up iterations of concepts for each person's screens. 

USER FLOWS

MVP Experience

Initially we honed in on the main way a user would be able to pull credit since this represented the core experience of the pull credit process. As part of my process, this began as the initial requirement to show to our client to ensure that our features were familiar to what can be found in other LOS. It also helped align us on the main actions a user will take.

MVP Flow

Pull Credit Flow - Initial State

Once we got our client's approval on the UX and UI of the flow, we began to flesh out the various use cases. The most important use cases were the Initial State for the different types of borrowers. It took weeks to understand the requirements for all the different use cases.

Initial Credit Pull Flow

Upgrade Credit

The "Upgrade Credit" feature allows a loan officer to change 2 primary dynamics of a borrower's case: to (1) pull from more bureaus / tri-merge, and (2) pull a joint report for married couples.

Upgrade Flow

Refresh Credit

When a loan officer performs a hard pull on a client, the grace period to pull again without negatively impacting the client's credit score lasts 60 days. Near the end of this period, it is common for loan officers to refresh a client's credit report to ensure that it is still in good standing and nothing substantial has changed since the initial credit pull.

Refresh Flow

RAPID PROTOTYPING / USABILITY TESTING

We conducted 5 rounds of usability testing - and learned a great deal from each one.

I asked the users two main tasks with a given scenario. These tasks were meant to replicate their normal, everyday tasks when working with a client while they are preparing to begin shopping for homes.

Scenario
We’d like you to imagine that you are working with a borrower named Priya Singh and her husband Akhil, who is the co-borrower. 

Task 1 - Joint Credit Pull
Imagine that you have received Priya’s loan application and her authorization to pull credit.
Please walk us through the process of how you would go about pulling their credit from all bureaus, and how you’d save it.

Task 2 - Refresh Credit
Priya is almost set to get her loan approved, but since some time has passed, you decide to check Priya’s (joint) credit again.
Please show how you would check Priya’s credit report a second time.

IMPACT

Users not only found the tasks easy to execute, but complimented how useful it was to comment on a PDF. 

Our users were happy with the simplicity of the tasks. We were given valuable suggestions, such as automatically pulling a tri-merge report instead of from 1 bureau, that we quickly incorporated into our prototypes for future testing.

5/5

Users successfully ordered a joint credit report for Priya.

5/5

Users easily navigated to Priya’s folder to refresh her credit.

5/5

Users were able to Upgrade a Report to pull from an additional bureau.

PROJECT LEARNINGS

A helping hand goes a long way.

Mid-Fi First

 If there are already design assets, then it may be easier to skip lo-fi stages into mid-fi iterations - especially if the team workshopped sketches together with a design critique.

User Feedback is valuable, but not always right.

Take user feedback with a grain of salt - even with a small sample size. Every user can be an outlier, so wait for more users.

Usability Session Controls

Take control over usability sessions, and avoid all leading questions. Each user has different experiences using this app.

More Potentially Cool Stuff

StreamLoanProduct Design

Muze OnboardingProduct Design

FortniteMasterProduct Design

Google PodcastsProduct Design

Let's Chat

I'm open to chat about any opportunities, or even just to chat!

svg-image
svg-image
svg-image
svg-image