What Really Went into the Loan Details Redesign?

Earlier this year, we released one of our biggest updates yet that focused on what we call the loan details page. This is where lenders and borrowers see important information about loans before, during, and after the loan is complete. Lenders use this page to determine whether or not to fund a loan and borrowers use this page to see a detailed breakdown of key dates and payback amounts.

Prior to our redesign, we lovingly referred to the old loan details page as the “treasure map,” because of the winding path users had to take to consume key information about a loan. We were also seeing lower weekly loan fulfillment rates and we hypothesized that the loan details page could be a culprit. As the head of design here at SoLo, it is my goal to make our users’ lives as easy as possible, and of course to empower both lenders and borrowers on their way to better financial health. Forcing users to wind their way around a page was not something I was happy about and so we began the efforts of redesigning the loan details page.

[Keep reading particularly if you’re interested in the behind the scenes product design process!]

 
The old Loan Details screen (referred to internally as the “treasure map” as compared with the new Loan Details screen with expandable Borrower detail (not pictured here).

The old Loan Details screen (referred to internally as the “treasure map” as compared with the new Loan Details screen with expandable Borrower detail (not pictured here).

 

Tip of the Iceberg

We began by surveying a few hundred of our existing lenders to find out what loan information was most important to them while making a lending decision or following up on an existing loan and consolidated the results.

As we suspected, some of the most important information for lenders to see is the borrower’s previous repayment history and the SoLo Score, which is a representation of a borrower’s creditworthiness. Our existing page simply showed “Completed transactions: #” without giving more information about the loan amount, whether it was repaid on time, or how recently it was repaid. And the SoLo Score? It was shown in a very tiny circle that wasn’t easy to read.

Design Exploration

Armed with lots of feedback and some assumptions, we started sketching. Due to the close relation between the loan details page and what we call a loan card on the Marketplace, we also considered how we could revamp the loan card on the Marketplace, seeing as that is the lender’s first interaction with the loan and where the most essential information would need to be shown.

 
We tried out a number of UI design options keeping in mind project scope, engineering effort required, and mobile accessibility standards.

We tried out a number of UI design options keeping in mind project scope, engineering effort required, and mobile accessibility standards.

 
 
iteration 1
 
 
Iteration 2
 

We also explored ways of displaying more information once a user taps into the borrower’s photo, but to limit the scope of the project, we decided to punt on making the profile photo clickable for the time being. We continued iterating making sure to include repayment history from a borrower on the loan details page itself and ended up here:

 
Final iteration before creating a prototype to then go into user testing with. This version showed the borrower’s loan repayment history on the same page and allowed for easy collapsibility.

Final iteration before creating a prototype to then go into user testing with. This version showed the borrower’s loan repayment history on the same page and allowed for easy collapsibility.

 

Prototyping & User Testing

We then created a clickable prototype, which is just a fancy way of saying a mockup or design that is not yet built in code, and went through a few rounds of user testing in order to validate some of the assumptions we had made.

 
User Testing
 
 
It’s so much nicer to not have to calculate how many days away February 15th is!
— Brandon (lender)
 

Learnings

Using the feedback we got in our user testing, we made some tweaks to the design and fleshed out all views of the new screen design.

 
Final iteration after multiple rounds of user testing and internal review, which led to a slight reorganization of information on the page (moving the loan reason outside of the collapsible borrower details section at the top).

Final iteration after multiple rounds of user testing and internal review, which led to a slight reorganization of information on the page (moving the loan reason outside of the collapsible borrower details section at the top).

 

Development

At this point we started planning how the team was going to implement the redesign, knowing that it would take a few weeks to ensure all of the parts could be properly built and tested. We rolled out the work in 3 main parts, testing thoroughly at every stage, and prepared for the final launch.

Launch & Learn

After launching the redesign, we increased the number of loans funded per week by 4 times, proving that lenders feel more comfortable funding loans when information is presented in a cleaner way and with additional information about a borrower’s repayment history.

As we’ve continued conversations with lenders and borrowers since launching the full redesign, we’ve made quick tweaks to the information display here and there to ensure we’re constantly improving. As with any product launch, we continue to monitor feedback we hear from reviews in the App Store, user testing we do for other features, and our Customer Success team.

Are you enjoying the new design? Notice something we can improve? Let us know or schedule some 1:1 time with Taylor, one of our co-founders and head of design.

 
We’ve identified and implemented slight improvements since launching. Most notably in this screenshot is moving the fee and payback details to a second line within the row to prevent word wrap or ellipsing on smaller devices.

We’ve identified and implemented slight improvements since launching. Most notably in this screenshot is moving the fee and payback details to a second line within the row to prevent word wrap or ellipsing on smaller devices.

 
 
Taylor Bruno