Project Overview
Design a pre-approval letter generator feature for loan officers
COMPANY
StreamLoan is a digital platform for mortgage loan officers, borrowers, and lenders. Streamlining the loan (purchase & refinance) process to make it more simple, efficient,
and digital for both the lender and customer — across all loan transactions.
BUSINESS GOALS
Improve loan officer experience within the platform.
Contributing to move all LO job functions to a 100% StreamLoan platform.
Design and implement the pre-approval flow which includes generate, share, store, and resend on across platforms for the loan officer.
ROLE
Product Designer
User Research, Information Architecture, Interaction Design, Visual Design, Usability Testing, Prototyping
TIMELINE
6 Weeks
The Problem
Missing letter generator feature leads users to other competitors’ platforms
Today, the average home loan for purchase tales 40+ days too 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.
The Solution
Create a built-in letter generator to move all loan officer job functions to a 100% StreamLoan platform
By creating a pre-approval letter generate feature on current StreamLoan platform to help loan officers doing all jobs in one platform with efficiency.
Discovery
Outdated system and too many features in a single page can make a product hard to use
COMPETITIVE MARKET RESEARCH
LendingQB and Encompass are the 2 main tools loan officers use. Below is a brief summary of what we found and learned:
Too many features can make the software overwhelming at times
Availability to tracking loans from origination to closing and beyond is important
Both of the software are limited to desktop, available on tablets and mobile devices would be beneficial to users
COMPARATIVE MARKET RESEARCH
We also performed comparator analysis on a variety of generating information tools to find the best solution and have a deeper understanding of form fields
User Research
Findings from six StreamLoan current users
To better understand the mindset of potential users, we conducted user interviews with 6 StreamLoan current users who are loan officers to know their behaviors and goals.
Generating pre-approval letters should only take 1 to 2 minutes
Store each pre-approval letter generated inside the loan and be able to share the file in the StreamLoan platform
The date should be pre-populated from 1003 form with accessibility to modify in order to generate multiple letters for the same borrower
Analysis of insights and prioritization issues
SYNTHESIS AND ANALYSIS
After conducting user interviews, and analyzing the gathered data from research, our team categorize the insights and pain points to define the problem
INSIGHTS
Most people name and save letters with last name+date
Most people save externally (hard drive)
Most people generate multiple letters per borrower
Letter creation already fast
PDF on mobile might be problematic
How to add hints/alerts with disrupting fluidity of flow?
PAIN POINTS
Manually filling in info (that’s already in the system)
Restricted to desktop
More options for sending (text, internal sharing)
Information Architecture
Organize, label, navigate the structural design before creating UI
TASK FLOW
With these insights and pain points, we created an initial task flow. As a team, we figured out what to include and what we should think about when designing. We also discussed with our clients to make sure the task flow make sense in their profession.
Ideate
Explore solutions
After the task flow is clear, as a team, we had a design sprint on the whiteboard to share thoughts and ideas.
LOW-FI
GENERATING PAGE
Generating letter includes heavy information. How might we simplify this step for users to be more efficient? We explored 3 different solutions and the team dot voted then discussed with the founder. We decided to go with #1 since all the information was pre-populated, hence, collapsed design with partially expend would be most efficient for the users to modify specific information.
FILE DETAIL PAGE
File detail page includes many actions users can take. According to user interviews that share is the main action they take after generating the letter, hence, we ultimately choose #2. Share history display the person’s name and profile photo to reduce cognitive overload for the user.
Final Deliverable
A concise and clear workflow empowers users to generate pre-approval letter in just seconds
GENERATING PRE-APPROVAL LETTER
Partial expand form fields give users the flexibility to only expand the specific areas they need to modify.
Pre-populated data speeds up the process.
Toggle switches provide easy access to include or exclude property address and borrower checklist.
SAVING FILE
Preview page enables users to make sure everything is correct before generate and save the file.
Pre-populate file name feature speeds up the process.
SHARING FILE
Share the file within the app.
Display contacts’ name, title, profile photo, and share history reduce the chance of making mistakes.
Provides various options for sharing the file.
EDITING AND STORING
Giving the option to show or hide the file on the same page to reduce screen transition.
Display the most recent share history for a quick preview with the option to view all if need it.
Expire clock icons give users awareness of file valid time frame.
Various Platform Design
Native App for Mobile, Responsive Design for Desktop and Tablet.
Results
Looking forward to the implementation in Q2 2020
Due to the time constraint, we were only able to interview 3 loan officers for usability tests. Since the user quantity is too small, it’s not actually validated but we are looking forward to seeing the outcome of this project after the feature is implemented. Below are the metrics we will be using to evaluate the success of the business.
METRICS OF SUCCESS
Quantitative
Task completion time for loan officers on mobile
Task completion rate for loan officers on mobile
Mobile vs Desktop Task Completion Comparison Stats
Qualitative
Task Level Satisfaction - task level
Test Level Satisfaction
Comprehension testing
Final Learnings
Design for B2B startup
Content and copy are just as important as the design itself
When the business model is B2B, copy plays a very important part of the design and must be weighed heavily alongside design to ensure goals are met. Hence, communication with the client and users is the key to ensure we get the right terminologies.Set design system in early stage
Work as a team, it is important to have the design system for everyone to follow. Once the design system is ready, the process will be much faster and smoother.Good design emphasizes the usefulness of a product
A product has to satisfy certain criteria since it is brought to be used.
Check out other projects
Digitalizing bank due diligence process for landlords
Story by JPMorgan
Fintech | Onboarding | Web
Redefining the wizard component and pattern
Story Design System
Design system | Design pattern
Introducing gamifications on an online fitness program for older adults
Age Bold
Fitness | Gamification |Web