Your loan deals

Web design and UX design

Summary

'Your Loan Deals' is a website that offers customers a quick and easy form to find an instant online quote for a short term loan.

As with any website, the key to the success of Your Loan Deals was to get under the skin of the user and to design the UI with the user in mind.

Over 90% of users visiting Your Loan Deals are doing so using a mobile device. Therefore, the main focus was to optimise the mobile journey as much as possible. Due to the nature of short term loans, customers are very time poor and eager to get the cash that they need as soon as possible. The only hurdle between the customer and their loan is the laborious task of filling out the necessary fields within the form.

My Process

1. Analyse customer data taken from the existing landing page and form to get a better understanding of how the customers interact with the site and discover pitfalls. We were then able to outline the problems that needed to be solved.

2. Use customer insight and research to create customer personas which helped define the needs of the user. This enabled me to think like the customer before putting pen to paper.

3. Ideation. Brainstorming ideas and sketching simple wireframes. Scamping wireframes using pen and paper allowed me to quickly generate ideas and dismiss any unfavourable concepts.

4. Prototype. Refine wireframes using Sketch and create prototypes using Invision. I was then able to collaborate with developers to produce a fully working prototype.

5. Testing. Get feedback on the working prototype from customers using services such as whatusersdo. Repeat step 3, 4 and 5 to refine the customer journey.

6. Deployment. Key performance indicators were defined before the site was deployed. This allowed us to monitor the performance of the site and identify how successful the changes were. A/B testing was then conducted to improve on conversion.

 

 

(Above) The landing page of Your Loan Deals. After many iterations, prototypes and tests, we deployed this very simple and easy to use calculator that sits above the fold. User feedback told us that big bold buttons and a decluttered interface made for a enjoyable experience.

(Above) Sketches and wireframes from the early stages of ideation.

(Above) Sketches and wireframes from the early stages of ideation.

(Above) Wireframes from the ideation stage of the loan calculator on the landing page.

(Above) An example of how the accordion form works on a mobile device. Section 1 of the form is a breeze to fill out with the aid of Autofill.

User videos (hotjar) showed that customers were not willing to fill in the Home and Work phone number fields. These fields are mandatory which meant that customers would see error validation text when they attempted to progress to the next stage of the form. This in-turn increased the bounce rate. To tackle this, we introduced a 'use mobile number' button which allowed users to quickly copy their mobile number into the Work and Home number fields. This simple solution helped to increase the amount of users advancing to the next stage of the form.   

(Above) A comparison of the DOB field on the old form (left) and on the new optimised form (right). The new DOB field allows the user to enter digits continuously in one hit, apposed to the time consuming drop down menus on the old form. Optimising each individual field allowed us to shave seconds off the form completion time which contributes to better conversion.   

Customer feedback which helped to dictate design decisions.

Customer feedback which helped to dictate design decisions.

The use of heat maps to show where users click and when they stop scrolling is an invaluable insight into the behaviour of the customers. The scroll heat map indicates that over 60% of users don't scroll beyond the 'How it works' section.

The use of heat maps to show where users click and when they stop scrolling is an invaluable insight into the behaviour of the customers. The scroll heat map indicates that over 60% of users don't scroll beyond the 'How it works' section.

(Above) Previous form to the left and new and improved form to the right. The form on the right has been expanded to show the individual sections but actual functions as an accordian form.

(Above) Previous form to the left and new and improved form to the right. The form on the right has been expanded to show the individual sections but actual functions as an accordian form.