SoLo

Role

Chief Design Officer, Product Design, Wireframing, Copywriting, Illustration, Marketing

Tools

Paper, Sketch, Google Slides

Date

Jan - Feb 2019

 

Brief

I am a co-founder of SoLo Funds, a peer to peer lending platform connecting every day people to short term loans under $1,000. SoLo’s mission is to empower traditionally underbanked individuals that are at an economic disadvantage due to the established norms of the finance industry by pairing them with lenders who want to use their discretionary capital to help those in need while making money. We’ve done this by creating a mobile marketplace where lenders can “shop” for loans they’re interested in.

Before joining the team full time, I created our brand, product vision, pitch deck materials, website, and all marketing assets to enable us to fundraise. Since joining full time, I now own all design output, primarily focusing on our product design.


Loan Details

Goal: ensure that sensitive financial information is easily accessible and clear during the time when the lender is most vulnerable.

V1 of our loan details page was lovingly referred to as the “treasure map” because of the winding path users had to take to consume key information about a loan before they choose to fund it. While this screen was live, less than 100 loans per week were getting funded. In our discovery user testing phase, we learned that key pieces of information about the loan were missing and that the organization of the information made it very difficult for lenders to identify whether the loan suited their lending criteria.

I set out to redesign the loan details page, but first had to take note of the various paths a user could take to access the page. This included various points within the application, push notifications, and emails sent to both lenders and borrowers. I organized all of these details in a spreadsheet, taking account of all text variations shown to lenders and borrowers in the various states the loan could be in (ie - funded, overdue, collections, errors, etc). To further help visualize how the loan details screen(s) fit into our application, I created an app map connecting screenshots from the app with arrows.

Once the various states of this page were documented, I listed all information, errors, educational messages, and more that would need to be displayed and began testing out different hierarchies. At this point, I sent out a survey to a few hundred of our existing lenders to find out what information was most important to them while making a lending decision or following up on an existing loan and consolidated the results in a spreadsheet, which I later presented to the team.

At this point I turned to pen and paper, sketching out various layout options given the hierarchy of key pieces of information.

Throughout my sketching and ideation phase, I shared various options with our head of product and engineering team to get feedback.

Once I moved towards the UI design, I played around with using new and existing elements. I explored ways of reusing our existing “loan card” element on our marketplace, with the intention of animating the transition from the marketplace to the full loan details card to appear as if it were simply expanding to fill the screen space. I went down this route for a while by playing with the elements on the loan card as well as on the loan details page itself to ensure the two could work cohesively together. I took the existing component from the marketplace and expanded it, but quickly realized that the elements on the screen were not optimized for mobile and had tap spaces that were much too small to meet mobile standards.

Before I joined the team full time, we had no design system. While working through the redesign of the loan details screens, I began to establish visual components that could be easily reused throughout the rest of the application. I started simple by defining colors, fonts, and buttons before working through datalists and inputs as I iterated on the loan details screens. As I played around with the UI elements of the loan details page, I continued tweaking the design system components to ensure scalability and accessibility.

After getting to a layout that felt good to our internal team, I created a clickable prototype in Invision and went through a few rounds of user testing. Each session was invaluable in helping fine tune the loan details page. The first few rounds identified some language changes (ex: changing “transaction history” to “loans repaid” to be clearer and shorter) as well as a slight reorganization of information. Originally I had put the loan reason in the collapsible section at the top of the screen, but while this information was not initially identified as a top priority for lenders, after seeing the mock ups the lenders realized that they actually want to see the loan reason at all times.

At this point I took a step back to think about the organization of information and realized that it made more sense to focus the top collapsible section focused on information about the borrower and their past history, while all loan-specific information would live below that. This discovery helped clean up the information density on the page while streamlining where users would look to find different information.

I then worked backwards to identify small steps we could take to incrementally work towards the new design given that we only had 1 iOS developer at the time. I presented 3 options to the team (which included the iOS developer, backend developer, and head of product) outlining the ways we could achieve the redesign: all at once (band-aid method of ripping it off quickly), a half step, or quarter steps. The developers dug into the details and ultimately preferred doing it all at once, due to the backend dependencies and the brittle front end code that hadn’t been touched in a while.

Throughout the entire project, I documented my thought process, decision making, timelines, open questions, and more in a Design Doc that was shared with the team. Offering visibility into the process helped the team better understand the design process and how we reached certain outcomes, while providing an invaluable opportunity to communicate potential issues as early as possible. I also documented future considerations that we opted not to address with this redesign, enabling me to evaluate future ideas and pick up where I left off.