Kiva loan choosing optimization
Kiva's core lending project has a unique problem — it's hard to select a borrower when they all seem well deserving of such a trivial amount of money (at least by Western standards).
To overcome this paralysis of too much choice, the Loan Choosing team endeavored to surface content more relevant to users' specfic preferences.
The existing "all loans" view with filters as shown by default. View full image (1.6 MB)
One of Kiva's operational values is the idea of a fair marketplace — not giving preferential treatment to any particular loan — and the page above was a reflection of that. The designers intentionally wanted to give our users everything there was to see, and provide tools to sort if they so chose. Experiments were run, feedback was delivered on everything from the amount of loans to display at a time to what information was most wanted on the loan cards, and the end result was a moderate improvement in checkout conversion.
The problem was that we were getting the same feedback while researching abandonment: the amount of choices was still overwhelming. By serving up a firehose of results, we weren't helping our customers make the personal connection essential to the success of our core product.
Initial wireframes indicating a "featured loan" section (horizontal scrolling on mobile) and fewer results per row.
After a few rounds of cross-functional ideation, the team decided to attack the problem on a few fronts:
- Featuring — the eye needs to be told where to go, even if the highlighted item is randomly served up
- Organizing — grouping similar loans to locate preferences more easily
- Pacing — what information is essential? Reduce cognitive load by allowing for skimming
Three mockup versions for a single featured borrower. View full image (823 KB)
The team decided to begin with highlighted/featured loan cards, as this was the simplest to implement from an engineering standpoint. To accomplish this, I both gave it a visually prominent location, and broke up the existing grid to draw more attention to the featured loan.
Taking the concept a step further, we started toying with the idea of using a larger loan card with more info on it, with the intention of making the subsequent click to the borrower information page unnecessary for some users.
A single featured loan with additional borrower information and flag. View full image (1.8 MB)
Our second approach to the problem was to discover ways to collect similar loans into easily digestible groups, enabling them to be focused on or dismissed, according to user preference, by scanning the page.
To start, we dug into our user data to find the loan attributes that were most popular among the users we planned to segment for this test, and arranged loans with matching attributes into rows, a la Netflix categories. Subsequent testing showed (perhaps unsurprisingly) only a moderate bump in conversion from new users, and a not-insignificant dip from existing users.
Wireframe and initial mockup based on grouped, edge-to-edge horizontal scrolling loan cards. View full image (1.9 MB)
This project is currently still in experimentation and tests take awhile to yield statistically significant results based on page traffic due to user segmentation. These next features are planned, and may change according to metrics we get back from currently running tests.
A current hypothesis of our grouping experiment is that the additional quantity of loan cards on the page offsets the grouping of cards into categories. There's still too much visual information to look at. In order to reduce cognitive load, we need to reduce the data essential to loan selection.
Mini loan card explorations. View full image (518 KB)
To create mockups to test from, we began by utilizing the institutional knowledge possessed by our org — we surveyed team members for their past knowledge of which data they believed our users most needed before clicking a loan card. I took the results of the poll and created "mini" loan cards — smaller format, with less loan details.
These mockups were further revised to optimize for a faster read — graphs and colors instead of numbers, and a stronger visual hierarchy of information. The intended interface for these cards would include a hover "quickview" and so the amount of text could be further reduced.
Final mini loan card layout. View full image (266 KB)
Next we want to refine the featured loans section using the information we learned from the mini card testing, to have a cohesive design aesthetic and complement how the the mini cards are being utilized. We were given the feedback from the initial loan categories experiment that, while organization helps, our customers don't want to feel that we're editing which loans we're showing them. Using mini cards and quickview we can display the breadth of our loan portfolio without being visually overpowering. (No more blue buttons screaming at them from everywhere!)
On a page of mini cards, just using the "full" card gives it featured priority. View full image (1.2 MB)
The resolution of all our learnings thus far are combined into the landing page shown below.
- A single loan with extra borrower information is prominently featured, but now as part of a simple interface that allows four additional loans from different featured categories to be easily browsed.
- We've taken advantage of a new grid to break up the tedium of rows of nearly uniform options.
- Mini loan cards are employed where we want to show the breadth of a particular category, and standard loan cards add prominence to groupings that we choose to give soft promotion.
- We've narrowed down the choices that a user must pick from by default, but we've left easy access to the entirety of Kiva's borrowers.
Final page layout with featured loans, grouping by category and mini cards. View full image (1.8 MB)
Need reminding where we started this thing? Jump back to the beginning.