UX research

Research and UX Framework

First things first—we needed to figure out and understand who we were designing for. After researching Filipino lending culture and interviewing relatives and friends of friends living there, we arrived at two key findings:

1. Default rates are historically high due to the family-oriented culture—lending and borrowing with friends and family without expectations of repayment doesn't translate to loans from financial institutions.
   

2. Remittance/cash pickup is an effortful task in the Philippines requiring a lengthy, traffic-heavy commute from suburbs or rural areas to a brick and mortar location, where paper documents are required for a transaction to go through.

A quick persona-building exercise gave us some clarity on user needs that we translated to product goals:

‍Transparency — Making sure borrowers understand the lending process and their loan terms.

Speed/Accessibility — Getting the loan as quickly and easily as possible.

Default Minimization — Encouraging on-time repayment in full.

Bounce Rate Minimization/NPS Maximization — Affording a non-intimidating and friendly experience.

With a healthy amount of research and specifications, I took a look at the current process OneDaijo had laid out from application to repayment. There were a few mechanisms in place that did not align with our product goals. The first was a see-once card-swipe UI for selecting among the many loan terms generated, which is basically gambling and makes available the opportunity for severe buyer's remorse. We got rid of this strategy in favor of a much more fair, forgiving, and transparent approach that I'll get into in just a bit.

Our second contention was the amount of waiting for status updates. The cause was unclear, but it seemed like far too much friction. I found clarity after mapping the tasks to their timescale of action and feedback. This helped me separate and frame the task flows based on their timelines.

Task-timeline relationship

Next was to discretize the tasks in each timescale group in chronological order. From this I was able to identify the mechanics of the process and define product specifications. The gold nuggets we were looking for were things we could omit or combine to simplify and improve the efficiency of the process.

Here, we were able to remove one step by combining and masking it under another step. Before, the borrower would have to wait for their application to be approved, for their loans to be funded after selecting their terms, and for their funds to arrive either in their bank account or at a remittance center for cash pickup. By having the borrower pick their disbursement method immediately after choosing their loan terms, we are able to update them only with what matters to them: when their money is in their account or ready for pickup! Big win for us and for the user.

This diagram breaks down each step in the borrowing process, e.g. what kind of step is it (user action, status update provided by us, or information disseminated by us), what is needed to move on to the next step, how long that will take, and what are the specifications our product needs to fulfill at each step, and what steps belong in their own user flow.

UX research

Dashboard UI Pattern

We went through three iterations of our dashboard UI. The first was a card-based dashboard designed for managing multiple loans at the same time. But we had a miscommunication—it was our understanding that borrowers could take out multiple loans at the same time, but in reality the model operates on allowing one loan at a time.

Task-timeline relationship

The second was a "card-stack" UI where each major flow was contained in its own card then stacked together. The idea was to promote transparency—you could see where you are in the process and what's next. The card-stack was implemented in the demo but it is far from an elegant solution.

Task-timeline relationship

The third was a single-card, single-action dashboard. The goal was to avoid overwhelming the borrower—they could be stressed or otherwise not equipped to deal with the cognitive load of a more complex UI. There's only one card, it's huge, and it has one big main action button. Everything else you would need to know at a glance is docked on the right side, in muted colors as to fade into the background and not distract from the main action.

Task-timeline relationship

UX research

Landing Page

Our goals for the landing page were to build brand trust, be informative, and maximize conversions. The big white card to the right offers the first step in the process and gives the user a sense of progress at the start of the onboarding and application process.

Landing page with original icons and illustrations.

UX research

Onboarding & Application

A loan application naturally can require a lot of information and steps. I tried a lot of different navigation patterns to try to minimize cognitive load and reduce abandon rates, while still maintaining transparency and trustworthiness (the borrower needs to know what's coming—no surprises or tricks).

In the end, the most intuitive solution was separating the flow into three steps that are pretty self-explanatory and easy to digest. The last step is just a review! The visual design, sporting rounded corners, soft shadows and our OneDaijo Blue, projects an approachable trustworthiness.

The first step is to fill out your loan request details. The loan amount is prefilled from the landing page CTA.

The second steps involves filling in your personal information. This one actually has three substeps—splitting it this way felt the most intuitive out of the many concepts I tried (user testing was out of scope for this project). Looking back, I would want to revisit the carousel dots at the bottom of the card—it seems physically unintuitive, especially on desktop web.

The second step is divided into three substeps for filling out your personal information.

After you fill out your submission, you're asked to create an account with the value proposition of doing so explained in the copy. Mutually beneficial!

Account creation

The last step is just a review and summary of your application, with buttons to edit in case there was a mistake. A few agreements and you're all set to submit your application!

Task-timeline relationship

UX research

Getting Your Loan

This flow was particularly tricky. After your application is approved, the next step is to actually get it. This means picking your loan terms among many that are generated by the OneDaijo backend (this is a bit simplified), then getting your loan by bank transfer or in-store cash pickup. These two steps are presented in the same screen after you select the "Get Your Loan" button.

Task-timeline relationship

This is a big problem because our users aren't all finance experts who can consider tradeoffs between loan terms and make an informed decision. We need to be educational in a way that isn't overwhelming to give the borrower the chance to make a fair, informed decision.

We pushed to minimize decision fatigue by doing the work for the borrower and selecting the three best loans terms in different, descriptive categories: Balanced, Credit-Building Loan, and Budget Loan.

Choose from three loans terms selected by an algorithm out of a pool of many generated by OneDaijo's backend ecosystem. Note the steps designated at the top left, and the help links at the top right.

After you select your terms, you can decide to get your money via in-store cash pickup (a very common process for Filipinos) or bank transfer (much easier if you have a bank account and prefer a direct deposit).

Last step is to select your payout method. Note the pickup requirements are displayed under the radio option.

The typical cash pickup process is an unguided and effortful task for most people. You can choose to send your loan money to a financial institution of your choosing (you can pick up from any location in that institution's network) But if you don't already have a favorite branch or even institution, this decision could feel a bit overwhelming.

The product should give you the most relevant information you need to make a choice. Since commuting to brick-and-mortar locations can be time-consuming and stressful, we provide a flow for finding a pickup location that's most convenient for you—you can decide where to search from as you might be planning to pick up your loan after work or from home.

A pickup location helper to help you pick a financial institution to send your loan money to.

Once you've picked a financial institution to send your loan money to, you're all set to submit your choices.

Loan funds incoming!

UX research

Cash Pickup

The next part here is to guide the borrower through the actual pickup process. While the funds are being sent, you can again find an in-network store from the institution you chose.

Waiting screen for funds to be sent over. Note the primary card lists the status and last-updated time at the top, and a time estimate for when the transfer will go through.

Another pickup location modal, this time with a link to directions.

After 1 business day, funds are ready for pickup.

Traditionally, a borrower would have to record the transaction number by any medium (e.g. phone, pen and paper) and navigate to another page to learn what photo IDs are accepted.

I wanted to simplify this process by making a pickup pass. It's a little idealistic as it would involve rolling out the infrastructure needed to work with partner financial institutions, but in the spirit of doing what's best for the user, I believe it's worth it. At the very least we could potentially pare the idea down to something more feasible start.

The pickup pass holds everything you need to present (save for your ID, but help with that is built into the pass) at the counter to get your loan money. You can text or email it to your phone, or print it out. A big QR code affords a simple scan to transfer all the information to the bank teller.

The OneDaijo pickup pass, designed to make sure you have everything you need to receive your loan at the pickup location.

UX research

Repaying Your Loan

One of our product goals was to minimize default rates. We needed to strongly encourage repayment and make the repayment flow frictionless.

The dashboard during your repayment period. Note the timescale of this screen—it pretty much remains static during that entire period until you make a payment.

When you move to repay your loan, you're presented with the familiar two-step format from the Get Your Loan flow. Again, you can choose to make a deposit in person or do it online via bank transfer. If you choose to deposit in-person, you're presented with the same location finder but for deposits.

Oneline payment fields.

After you've paid off your loan, you get a congratulatory message emphasizing your rewards in OneDaijo's cryptocurrency-based credit-building incentives. The repayment progress bar is full to 100% with a nice blue to reinforce positive experiences with repayment.

Loan repaid screen, with the transaction recorded below.

All that's left to do before getting a new loan is to archive your current, repaid loan. You get a cute empty-state illustration encouraging you to increase your borrowing power with OneDaijo's QIN currency.

Empty-state dashboard