StreamLoan
New features that helps loan officers inform borrowers about the costs of a mortgage.
Mobile | New Features | Information Architecture | Visual Improvement
OVERVIEW
Role
Product Designer
Tools
Figma
Skills
Research
Wire framing
Prototyping
Timeline
6 weeks
Company
StreamLoan is a B2B SaaS platform that gives lenders and borrowers the ability to manage residential real estate purchases and financing through a mobile app. The app is an end-to-end mortgage solution that makes it easy for borrowers to make an offer, purchase, and close on a house.
Challenge
I was asked to add new features to the StreamLoan app that lets lenders track and send documents to borrowers that informs them about the costs associated with a mortgage called loan disclosures.
Solution
I created three new features for the StreamLoan app that let lenders see a list of upcoming tasks, a history of sent and received documents, and finally gave them the ability to issue a new disclosure documents to a borrower within a mobile application.
DELIVERABLE
A mobile solution to inform borrowers about the costs of a mortgage
Over the course of six weeks, I designed three new features for the StreamLoan app that lets lenders easily track and send documents that explain the costs associated with a mortgage to borrowers. As validated through usability tests, the loan officers were able to understand the upcoming tasks, document tracking, and sending features.
Showing a list of tasks that loan officers need to complete
The tasks screen showed loan officers the upcoming disclosure tasks pending for a borrower with timelines and a call to action to start the task.
Tracking loan disclosure documents that are sent to and received from borrowers
The tracking screen showed loan officers a history of all the disclosures sent to and received from a borrower along with their status in a list format.
Ordering loan disclosures and sending them to borrowers
The orders screen allowed loan officers to quickly send a disclosure detailing the cost associated with a mortgage to a borrower.
EMPATHIZE
Competitors only let loan officers send costs of a mortgage to borrowers via desktop apps
I began by conducting competitive research on several mortgage platforms along with interviewing loan officers to understand the process of informing borrowers about the cost of a mortgage and the legal requirements. I studied these competitors and loan officers with a focus on the information that is required to be disclosed, who needs to receive it, the timelines, and design patterns.
Loan officers don't need visuals or animations
To better understand loan officers in this space, I conducted five informational interviews and usability tests. In these interviews, I covered the disclosure process and the legal requirements, along with basic mobile and tablet usage. I used this research to create personas to design features that made it easy for loan officers to disclose the costs associated with a mortgage. My findings revealed that loan officers find visuals, effects, animations, and interactions distracting. They preferred an app that is simple and focused on functionality because the disclosure process is time sensitive.
DEFINE
Loan officers want simple interfaces common design patterns
After understanding the disclosure process and reviewing the notes from my user interviews, I discovered that the StreamLoan app needed three features to help loan officers effectively communicate the costs associated with a mortgage to a borrower:
Tasks
See upcoming tasks so disclosures are sent on time.
Tracking
View the history of the entire disclosure process.
Orders
Order a disclosure and send it to a borrower.
History
Access the sent and received files of a disclosure.
IDEATE
Loan officers prefer tabs over scrolling
I began sketching wireframes after deciding on the main features I wanted to focus on adding to the StreamLoan app. These sketches show potential design patterns that could be used to implemented these features. Once the client and I showed the initial sketches to several loan officers, we discovered that they preferred a tabbed layout instead of scrolling or drop down menus. Some of the components in the sketches were approved by the CTO of StreamLoan and are shown below in green:
Scrollable Timeline
Expandable Cards
Tabbed Menu
TASKS FEATURE
Cards with CTAs to view and start tasks
I sketched wireframes to show potential design patterns and ideas that could be used to implement the tasks feature for loan officers. The CTO of StreamLoan felt that a card layout with a CTA best met the needs of the user because it gives loan officers a quick view of their upcoming tasks and the call to action to let them start those tasks. The selected design is shown below in green:
List Concept
Cards Concept
Calendar Concept
Tasks Wireframe
I created a low fidelity wireframe in Figma that laid out the tasks feature before starting on high fidelity mockups.
Prototype
I created a high fidelity design and prototype to validate the tasks feature with loan officers and received feedback that the specific document names be added to each task card.
TRACKING FEATURE
Lists did not work but cards did
I sketched wireframes to show potential design patterns and ideas that could be used to implement the tracking feature for loan officers. The CTO of StreamLoan felt that a list view was the simplest method for loan officers to visualize a tracking history of the loan disclosures. The selected design is shown below in green:
Scrollable Timeline
Stacked Cards
Tabbed Menu
Tracking Wireframe
I created a low fidelity wireframe in Figma that laid out the tracking feature before starting on high fidelity mockups.
Prototype
I created a high fidelity design and prototype to validate the tracking feature with loan officers and received feedback that the document details needed to be shown and stored files needed to be accessible. Based on this feedback, I made the design decision to merged the history tab with the stored files into the tracking tab and switch the layout to cards that could display all of the details.
ORDERS FEATURE
Simple drop down selectors and check boxes
I sketched wireframes to show potential design patterns and ideas that could be used to implement the orders feature for loan officers. The CTO of StreamLoan thought using drop down selectors and check boxes to choose the correct disclosure document would be the easiest method for loan officers. The selected design is shown below in green:
Large Icons
Popup Modal
Dropdown Selectors
Orders Wireframe
I created a low fidelity wireframe in Figma that laid out the orders feature before starting on high fidelity mockups. Based on feedback from the CTO of StreamLoan the order of the drop down selectors were changed from the sketches to select the type of disclosure first because disclosures may require different authentication methods.
Prototype
I created a high fidelity design and prototype to validate the orders feature with loan officers and received feedback that a drop down to select which borrower or borrowers to send a disclosure was added to the orders feature.
HISTORY FEATURE
A feature that did not need a separate tab
I sketched wireframes to show potential design patterns and ideas that could be used to implement the history feature for loan officers. The CTO of StreamLoan thought using cards with an option to select all the files of a disclosure and show its details would be the easiest for loan officers. The selected design is shown below in green:
List
Cards
Folders
History Wireframe
I created a low fidelity wireframe in Figma that laid out the history feature before starting on high fidelity mockups.
Prototype
I created a high fidelity design and prototype to validate the orders feature with loan officers and received feedback that the history tab should be removed and files should be integrated into the feature. The loan offers were confused by the history feature and expected to see the files on the tracking screen.
OUTCOME
A user flow that is efficient and intuitive for loan officers
Although apps can support animations and interesting visual interactions, loan officers find them distracting and prefer simple interfaces. The initial designs of a scrollable timeline that I wanted to build would have been complicated and time consuming for a loan officer to use on a day to day basis. Based on the research and user feedback, I had to design the disclosure features in a layout that was easy to understand by using common and known design patters. The final design was an interface with a tab menu to select the tasks, tracking, and orders sections. In each of the sections, data was displayed in lists or cards and options were selected using drop down menus or check boxes. I was able to take the functionality of a complex desktop application for loan disclosures and drill its user flow down to the essentials that could fit into a mobile application.
Tabbed menu
The loan disclosure functionality was separated into three different sections using a tabbed menu: tasks, tracking, orders. The tabbed menu made it easy for loan officers to determine what steps they needed to take next, where they were in the loan process, and the ability to send new disclosure documents to a borrower.
Cards for disclosure status and files
Cards were created to show all of the information a loan officer would need to see to understand the status of a loan disclosure. In each of these cards the loan officers can view dates, files, status, and send reminders to borrowers.
Drop down selectors and check boxes
The loan officers wanted the most common design pattern to fill out the ordering form for sending the documents that disclose the cost of a mortgage. Drop down selectors and check boxes were used to help the loan officer select the number type, method, and format of an order.
Final deliverable
I presented my process and final iterations to the CTO of StreamLoan and received positive feedback on my ability to grasp the users needs while maintaining alignment with the user goals. The images below is the final design that was sent to the client.