Personal Loan

Context

At Backbase, I worked on the Personal Loans experience for new customers, covering the journey from initial estimation through pre-qualification to receiving a personalised loan offer. Unlike existing customers, new users had no pre-filled financial data, which required a more guided experience to collect information while maintaining clarity, trust and usability across multiple steps.

Problem

The existing experience presented several usability and structural challenges. Financial inputs were difficult to interact with precisely, particularly when using controls such as sliders, which often led to inaccurate selections and frustration on mobile. At the same time, key financial information such as repayment breakdowns and total costs was not always presented in a way that was easy to understand.

In addition, interaction patterns and layouts lacked consistency and were not designed with scalability in mind, particularly for future mobile use. All of this needed to be addressed while still respecting business rules, legal requirements and design system constraints.

Goal

The goal was to improve the experience in a way that responded to client needs as well as user needs. Our banking clients had clear requirements for how these flows should work and were shaped by their own experience, business priorities and feedback from their customers. My focus was on turning those needs into simpler patterns and clearer journeys:

Approach

I focused on three things: structuring the flow, fixing interaction patterns and improving how data was presented.

I broke the journey into clear steps so users always knew where they were. I then challenged existing interaction patterns, replacing imprecise or ambiguous inputs with more structured and accessible alternatives. I also reorganised how financial information was shown, making sure the most important data stood out while still keeping everything transparent.

This approach required close collaboration with product managers, engineers and the design system team. I iterated through multiple rounds of feedback, both within my immediate team and across the wider design organisation.

Research

Before moving into interface changes, I mapped out the questions we needed to answer about borrowers: why they were applying, how they chose lenders, what made the process feel difficult and what information they needed to feel confident continuing.

Research questions

Research synthesis

The findings were synthesised into three borrower profiles representing different levels of financial confidence: cushioned, stretched and struggling. Although their goals were different, the same themes appeared across the journey: users wanted clarity, reassurance, predictable steps and easier ways to compare choices without feeling overloaded.

View full research synthesis board

Key insights

1. Users wanted to compare loan options quickly, without hidden or fiddly controls.
2. Confidence mattered more than speed in financial decisions.
3. Long forms became easier when questions were broken into clear decision points.
4. Sensitive questions needed plain language, visible choices and reassurance.
5. Users were more likely to continue when the process felt predictable and transparent.

These insights directly informed the interface changes, especially the move away from sliders, toggles and hidden dropdowns toward clearer visible selection patterns.

Solution

I focused on three key parts of the journey: the loan estimator, pre-qualification and the loan offer.

Loan Estimator

The loan estimator relied on sliders, which made it hard to select exact values and caused issues on mobile.

I replaced sliders with button-based selection. This made it easier to choose precise values, reduced input errors and worked better across both desktop and mobile. It also improved accessibility, especially for users relying on assistive technologies.

This wasn't part of the design system, so I proposed it as a new pattern. I took it through several rounds of feedback with designers and product stakeholders before presenting it to the design system team. It was well received and recognised as a strong example of how to introduce a new component.

Old New

I also reworked how financial data was displayed. Instead of using a two-column layout with labels and values, I grouped them vertically and used the full width of the component. This made the content easier to scan and naturally adaptable to smaller screens.

Selection pattern exploration

After replacing the loan estimator slider with a clearer button-based selection pattern, I explored whether the same interaction model could support other decision points across the application journey.

I first compared the Select Button pattern against common form inputs such as sliders, toggles, radio buttons, checkboxes, button groups and dropdowns. The aim was not to force one component everywhere, but to understand where visible choices were more helpful than hidden, compact or harder-to-scan inputs.

I then tested the pattern in real journey contexts, including simple binary choices, conditional questions, address confirmation, income information and more complex banking flows.

Comparing common form inputs against the Select Button pattern helped clarify where visible choices could reduce friction and improve scannability.

Toggles felt like settings

Visible Yes/No answers, easier to scan

Checkbox easy to overlook.

Yes/No with progressive disclosure.

Limiting button group

Consistent use of select button.

The same selection logic was tested across different levels of complexity, from simple binary decisions to multi-option banking workflows.

This helped define a simple usage rule: use visible selection when users need to compare a small number of choices or answer an important decision-based question; use dropdowns when the list is long or secondary to the task; use progressive disclosure when an answer changes what the user needs to provide next.

AI-assisted prototyping

To move beyond static screens, I used AI-assisted prototyping to explore how the selection patterns could behave in a more realistic application flow. This helped me test interaction logic, progressive disclosure, form behaviour and edge cases faster than working only in Figma.

The goal was not to replace design judgement, but to speed up the feedback loop between idea, prototype and refinement. By turning interface decisions into working prototypes, I could better evaluate how the pattern felt across longer, form-heavy journeys.

Pre-qualification Questionnaire

The pre-qualification questionnaire is one of the most sensitive steps in the journey as users are asked to share personal financial information. If this step feels unclear or difficult, users are more likely to lose trust or drop off.

I broke the flow into clear steps, such as residential status, employment and income so the users only deal with one thing at a time making the process easier to follow and less overwhelming.

Living situation first; one decision at a time

Homeowner reveals mortgage fields below

Employment status field is next

Occupation choice unfolds more detail

Yes/No select buttons used for progressive disclosure

Extra fields appear only when relevant

A key change was replacing toggles normally used in Backbase for yes/no questions with a button select component. Toggles are typically used for settings where users turn something on or off. In this flow, they felt out of place, weren't conversational and could become confusing if more than two choices are needed.

With button select, all options are visible from the start making it easier for users to understand and choose the right one. It also works better on mobile as the buttons are easier to tap and less prone to mistakes.

AI-Powered Income Verification

While the applicant uploads their documents, a bank employee still needs to verify them. Previously that meant manually reading through each document to check the income figures matched what the applicant had entered which was slow and made it easy to miss things.

A client asked whether AI could speed this up. The brief was open-ended, so I identified where the real bottleneck was and proposed a solution: the IDP (Intelligent Document Processing) tool that uses AI to extract the key data from uploaded documents and show it alongside the source so the employee can verify it rather than hunt for it.

This was also helpful on the applicant side. If the user uploaded the wrong document type or month the tool would flag it before it was sent to the bank.

The experience was designed and shipped in under 3 weeks and it was built to roll out across other clients in the future.

Loan Offer

The loan offer is the point where users decide whether to accept, so the priority was making the key information easy to understand at a glance. I structured the layout to clearly separate what the user receives from what the loan costs, prioritising the loan amount and APR, while keeping supporting details like finance charge and total repayment visible but secondary.

To avoid overwhelming users, I broke the information into clear, scannable sections instead of dense blocks, making it easier to compare key numbers quickly. More complex details, such as the amortization schedule, were moved behind secondary actions, while legal content was placed lower in the hierarchy. This kept the main decision simple while still providing full transparency when needed.

Outcome

The redesigned experience made the journey easier to use and easier to understand. Users could input values more precisely, understand financial outcomes more quickly and move through the flow with less friction.

It also introduced more consistent and scalable interaction patterns and contributed to the design system by validating a reusable selection component. Together, these improvements strengthened the overall product and helped drive adoption across 12 client implementations.