Understanding the task

The TILA (Truth in Lending Act) page is a key part of the experience when the borrower applies for a loan throughout the application funnel. The TILA is a contract and they are agreeing to the terms of the loan, but do also have a period of time in which they can withdraw and not accept the loan. It is a place where a significant drop-off has come.  For that reason, the task is to improve the number of users that click through and accept the TILA by making the experience as compelling, engaging, and user-friendly.  While that required information must be displayed for the users in a way that is clear, understandable, and compelling, the work is designing playful, fun, compelling experiences that work within the bounds of legal requirements.

Here is my brainstorming /  mind-map (ideation)

Design the TILA page to improve user's experience in a way that is playful and compelling so it reduces drop-off rate.  

The TILA (Truth in Lending Act) page is a contract, legal requirements. 

We want to prevent from drop off by offering fun and engaging interactions that works within the bounds of legal requirements. 


Keeping Users' Engagement on the TILA.


Interactions involved  (Inputs)




 -   Time set

 -  Interesting visual cue to help the terms clear or even different material and  keep users attention through the contract


Interactions involved  (Outputs)

 -  Fade In / Movement

 -  Highlight / Underlined / Bold

 -  Eliminate not required information

 -  Brief summary pop-up

 -  Interesting Transit process so that users want to keep on the process.


Understanding the problem

We understand that a significant drop off rate at the TILA page is the problem. Some relevant stats indicate that for every 100 people that see the TILA page, 38% of them do not accept it Just a 1% improvement in TILA conversion would be worth over $3MM, so small improvements can make a big difference.

As the new TILA must present mandatory content, arranging them in most user-friendly layout and new features that help users to engage are needed. A category-defining experience for users is to be solved.  I started to go through the process myself and get an idea of understanding the user's pain points and solutions for it. 


Step 1. Collecting Personal Info & Creating Account

            such address, amount, the purpose of using, name, email address and DOB, annual income. 


Step 2. Selecting an Offer 

             such loan amount, 3-year loans, 5-year loans


Step 3. Additional Personal Info (more privacy sensitive)

             such contact info, your employment, SSN, to verify identity.


Step 4. Terms Agreement (TILA) Collapsed + Live text ingredients to use


            Users can see which steps they are and figure they've only made through half of the process which makes them               

              frustrated and not engaging. On top of that, too many, static and small letters of TILA is not user-friendly for users.  


Step 5. Add a Bank

              providing pay stubs


I tried myself to register, unfortunately, I have no credit file available, so I could not able to test further So, I tested on Sketch file from Step 2.  Since the TILA page is page 4  which users already have gone through some process to fill out the form.  I could totally see why in step 4 people drop off.



How do people experience borrowing money from lending companies?

I asked two of my friends who have had experienced borrowing money for a personal loan(education, medical, house mortgage). I was able to find their pain points and concerns, and their tendency while using service to borrow the money. 


First, Arthur responds that the contact page is a little frustrated to read such a long text with unfamiliar financial terms because it is mandatory to read them carefully. He tends to read them all because he worries if the lending company is defrauding him with full of rich terms or hidden fees. He had experience of drop off from the contract page because he was lazy to read all text through. If not read them all, it makes him feel anxious about borrowing money. 

He said it could've been better if they summarize important information such as Fees in a table chart form

Lina also said that it is mandatory to read but she usually has skimmed through the page.  From her experience, she prefers to use docu-sign filling applications. It was very intuitive and she liked auto scrolls the screen down to the next. Since she does not want to read all on the same page, it could be great to have a summary at the end and jump the long contract page. 

They both acknowledge it is important and mandatory to read, so they gave up on it if they are lazy to do.  

Lina Lee

Project manager at Uber, Single, 30+

  • Medium credit score

  • Multiple Income

  • Multiple debts (car, credit card)

  • Expenses (shopping, travel)

  • More financially savvy

  • Consolidating debt ‘no-other option’

  • Some savings

  • Renter


Arthur Lee

Software Developer Engineer

at Amazon, Engaged, 30+

  • High credit score

  • Multiple Income

  • Single debt (mortgage)

  • Expenses (travels, marriage)

  • More financially savvy

  • Consolidating debt ‘strategically’

  • Some savings

  • Homeowner

Personas/User research


Through Prosper, more than $9 billion in personal loans have helped borrowers consolidate their credit card deb, pay for large purchases, make home improvements and cover medical expenses.  Below are the basic personas that we work from for our users, based on our limited information. They tend to more interested in debt consolidation, in particular, credit card debt.  They’re typically looking for help getting their financial life in order, paying bills, covering major expenses like medical or school. Also, they have something unexpected happened and need access to money quickly (divorce, unexpected medical issue, etc).  A lot of people are actually shopping around or researching, with a very significant percentage actually deciding not to get a loan through Prosper or any other lender at the current time.

Persona 1

•Young family with kids, 35+

•High credit score

•Multiple Income

•Multiple debts (car, student, mortgage)

•Expenses (kids, school)

•More financially savvy

•Consolidating debt ‘strategically’

•Some savings


Persona 2

•Single parent, 30+

•Medium credit score

•Multiple Jobs/Incomes

•Credit card debt, car loan

•Expenses (kids, shopping, household)

•Less financially savvy

•Consolidating debt ‘no other option’

•Low savings


Persona 4

•Married, retired (could be vet)

•High credit score

•Single pension income

•Debt: Credit card debt, mortgage

•Expenses include medical, needs

•More financially savvy

•Some savings


Persona 3

•Single, 30+, no kids

•Medium credit score

•Multiple Income

•Multiple debts – student loan, car loan

•Expenses include travel, college

•More financially savvy

•Consolidating debt ‘no-other option’

•Some savings


Pain points and concerns

Based on the interviewers and Prosper's user's tendency,  I found that people want to lend money in a quick and easy. So, a better visual display would help them engage more not to withdraw and accept the loan. Anything that could help them read through the contract is most needed.  it is not only a visual problem such layout, visual cues, lack of color scheme,  but also lack of interaction.  So I dig in the TILA page to find what elements make them to not engaging and distracting them.  

No colors => Lack of engagement 

visually dead


All information displayed in a vertical way is not a good idea because users end up scrolling up and down repetitively and lose thier attention.

Also, it makes them to find out there are too much things to go through.


This form is not convenient for users because it requires them to actually move their mouse inside the box to scroll down. Also, it is not appealing to look at. 

Long text with no emphasis 

gives users think they need to read them all. it led easily distracting and not engaging for users.

the checkbox and the button are far away. if it has no reason why place them far, move closer because the "continue" button is "call-to-action" part. it is better make it convenient for users. 



"Same amount of content but design to look less and minimal"

For the intuitive product interfaces and user's delightful and compelling experience, I begin with ideation, is redesigning some distracting parts To create experiences that are delightful, easy-to-use,  I want to eliminate the length of information/text on the same page

People had experience of skimming through the documents or textbooks to see how much left they need to read. For instance, if we have a textbook, we flipped through the pages to see that how much we consume to read all. so it also happens online when people read something. It is an exhausting experience for users.

To solve this problem, the vertical information layout needs to be fixed and two types of information; required and not required is needed to arrange into which one shows on the main TILA page.


Wireframe/ User Flow

While I began to solve the problems with ideation, supported by interview research and focuses on user needs. the folding/unfolding information and swiping on the same page would make user's experience more clear, understandable, and compelling. with a simple interface and layout. 

information is divided into important and less important. Not required information is folded. and when the user wants to see the information, they can unfold it.


1.  Try to eliminate unnecessary interaction/activity which is scroll down and up repetitions.

2. Categorize what section involve into where. 

3.  Define what user needs to know and to see 

4. steps are moved to the side so it doesn't get much attention but users can still see it without scrolling up.

5. required info is placed in main so user can think that it is. 

6. compelling design with a color and variations in text. 


The main goal for the design is to clear, understandable, and compelling layout with intuitive design. So the required information to know is basically displayed within the center proportion. it clearly displays what is important. Also not showing everything at one time is a key, so that user can think it is everything they need to know is quite overwhelming sometimes. So putting required information in this limited space is my goal. 

To accomplish that, one at a time is a key to this layout. And the user is focusing on the first information, it only shows that page. when user sees the next button to see another page which would consumable. 

As I think of an interaction on the web, there are so many options to choose, such as scroll, mouseover, click, timeset and etc. and also outputs glowing, disappearing, pop-up, auto scroll and so on.  But most importantly, simplicity is a compelling factor. I want users to feel that it looks easy and delightful to follow and read. So, I chose to design in a horizontal layout to display important information, so the users can keep their eye on one page. Also, highlighting, change of proportion and bold letters to emphasize pieces of information they need to know. This design elements will improve users to engage more on the page. 

Move to left hand side because it is nothinig relevant to the contract but just head up which step they are

Visual Guide

I chose the color scheme below. since it is belong to the company and want to 

One information at a one time, so first 
Next information user are required to know is the next slide. (the dots are giving a hint how much they need to read)
Button placed in the center of the page so that after checkbox marked, it makes users more convenient to move their mouse close.
This is an extended version where the user can access to more information, once user hit the button, more information is unfolded below. 
Help link to get some help 
There are two pages to swipe through
Navigation dot
Required info 1
Required info 2

Visual Guide

This is a visual guide that I collected on my pinterest page so that it helps me to develop my design. I want it to have a feeling of data-driven graph and also a company's mission. 
I intended to not to go crazy in the design since it is a contract and has some weight to the words on the page. 

Visual Design

Here is my visual design that I came up with. It has a look of legal agreement and document but also has some intuitive design elements to it. 
When the user hit the dot navigation to see what's next, this is what it looks like. 
When the user hit the "view your payment schedule", it will show more.  this is what it looks like. 
This is a page user first see with a footer. 

Donation Fountain / Ordering system / TripActions /

sell your stuff / TILA Design 

Edited by Hayeon Kim 2020