Borrower journey
Fluro • Senior Product Designer • 2020 - 2022
01 OVERVIEW
The project
The borrower journey represents how people go through the process of applying for a loan which is complex due to multiple channels the users can use to get a Fluro loan. The goal of the project was to map the different ramifications of the journey, remove any inconsistencies, simplify the UX, revamp and rebrand the UI. Due to the complexity of the project and the unexpected rebrand process, the project spanned over more than a year.
My role
I worked on the project as a lead designer along with the product manager and developers. My role was to research and document the journey steps, deep dive into user data in order to identify the user issues. Based on that, I redesigned the whole journey (specifically optimising for mobile), eliminating any unnecessary steps, applying the newly created design system, then rebranding everything from Lending Works to Fluro.
Results
The journey has been fully optimised on mobile which is used by more than 80% of users
Trustpilot score has improved from 3.8 stars to 4.9 stars
On the feedback widget used at the end of the journey, majority of users mention “ease of use” as the main benefit of going through the journey
Conversion rate from first click to submit has improved by 14.4% which resulted in 200+ extra loan applications per month which is roughly £200,000 in loans value
Open Banking take on which is automating some underwriting processes, has improved by 83% resulting in more than 20 hours per day saved in underwriting time
Fluro’s loan application process was placed on the 1st place along with Lendable in a eUser rating done by Informa
02 PROBLEMS
Mobile friendly
Since the beginning of the company, the main focus was dedicated to build the desktop versions of the journey and platforms. This resulted in a poor mobile experience. Looking at the data, I realised that more than 80% of users are coming from mobile sources. This made it even more important to optimise the user experience and become mobile first.
Inconsistency, ambiguity and bad UX
Being a young company, Lending Works has mainly focused on getting things done and ship (move fast and break things). The company had multiple developers coming and going, working on different features, with limited design guidance and no UI standards established. As you can imagine, these conditions has produced a plethora of inconsistencies and a general bad user experience, although functional.
Time for a facelift
Call it stupid luck but the rebrand process couldn’t have come at a better time. Once the Lending Works Design System have been created and applied on the journey, the “only” thing left to do was to change the cosmetics of the designs to become Fluro. This came with great efficiency advantages because at this point, all the pages have been documented, designed, consistent and with a highly improved UX. The examples below are redesigned pages before applying the new brand guidelines.
03 PROCESS
Design process
Although each project is unique with its own set of challenges, I try to follow a similar approach with small adjustments depending on the requirements. Being a big project and having a lot of back and forth, it was far from a linear process.
However, I started by defining the requirements along with the business needs. During that, I was already working on smaller bits of the journey which allowed me to discover and screenshot/record many usability issues. This is where I made use of HotJar and Google Analytics for qualitative and quantitative analysis as well. In this phase I also conducted interviews with the customer experience team (CX) as they were the people most aware of the user’s needs and problems they were facing. All this led to the production of a high-level user journey to provide everyone an overview of what the customers are experiencing.
Once I had all the problems, I started producing wireframe solutions and gathered feedback from the stakeholders involved which they were eventually turned into high-fidelity designs and interactive prototypes. At the end of the project I conducted 15 user testing sessions, 5 session per user scenario. The response was overwhelmingly positive with “ease-of-use” and “fast” being mentioned multiple times by people. There were some minor issues which we discovered and added to the backlog eventually.
Last part of the process where I dedicated a big chunk of my time was being part of the development sprint and doing quality assurance for the designs implemented to ensure design accuracy.
User flow
In theory, the process of applying for a loan is quite simply. You get a quote, you provide a couple more details, accept the loan, sign the agreement and get the money. However, this can get a little more complex when we can’t verify all the information provided and on top of that, working with multiple partners for traffic adds to that complexity.
Wireframes
Having a design system already built before starting this project has been a great advantage in terms of creating wireframes. This allowed me to use already built components and go faster through multiple wireframe iterations.
Hi-fi designs
Creating everything from scratch with no previous design assets other than some icons and the screenshots of the existing system proved to be quite a challenge. The biggest advantage I had is that I had enough time to understand how everything works and document all the pages that existed in the system, including error, success and warning states. In the end I ended up designing 612 high fidelity screens in the past one year and a half. However, that included the desktop and mobile versions as well as the borrower portal which I am discussing here.
User journey
When I joined the company, nobody had a complete overview of the process the customers were going through when applying for a loan. Everybody had only pieces of the puzzle. Getting the complete picture that you see below has been really challenging because in the beginning, the company didn’t have an accurate representation of the journey in a dev environment. Most of the pages required developer time to simulate a scenario. Now imagine doing that for almost all the pages you see below.
However, this proved incredibly valuable because once we had the complete journey, we were able to point out obvious problems that customers were facing and triangulating with the data we were getting from Google Analytics and HotJar. What you see below is the latest representation of the journey.
Implementation and QA
I believe that one of the most important step in the design process is being part of the implementation phase (if the time allows it). Designs without being implemented in code are just pretty pictures with no use to any customer. In this project I had the privilege of getting involved into the development process, QA the designs and ensure that everything looks and feels the way it was intended.
This could not have been possible without having proper development environments that can simulate exactly what the customers are going through. Being able to simulate these scenarios have been incredibly valuable in solving any implementation errors. Below you can see a recording of an approved loan application as a customer would see it.
Benchmarking
Curinos (Informa’s business intelligence subsidiary) has done an independent research on the UK’s personal loans market. The results have confirmed all the hard work has paid off. Fluro’s loan application process was placed on the 1st place along with Lendable in their eUser rating. This means Fluro has scored much higher than all of the high street banks, including the newer, more user-friendly players on the market, like Zopa and Ratesetter.
The eUser scores evaluate the complexity, length, and speed for users to progress through the desktop processes. Lower scores indicate processes which require less effort. A number of areas are measured, a weighting (depending on difficulty) is then applied to get to the rating.
