Lloyds Payment Application Journey Onboarding - File Uploads
My role: I worked in a team of six designers, and I helped to re-create part of the application journey over two months. I focused on the “outlets” and “uploading documents” pages.
Pain points:
Length of the journey
Complexity of questions
Confusing setup and navigation for users - 92% drop-off rate
Uploading important documents is not intuitive
Lack of guidance or feedback
There is no feeling of trustworthiness and privacy for uploading such personal and important documents
Tags: #Application Journey #File Uploads #UI #Fintech #Banking
SCOPE
The HCD (Human Centered Design) Team of 6 was tasked with a re-design. This piece of work is for the application journey that small to medium business owners would complete in order to apply for a business account for the taking payments platform: Cardnet.
The application journey consists of 10 important sections for the user to give granular details about a business. The re-design will need to make it easier and seamless for business owners to complete the application and would therefore mean more applications for Cardnet.
THE PROBLEM
Problem statement:
Business owner customers need to go through an application to use the Lloyds Banking taking payments platform: Cardnet. Customers had complained about the many frustrations that they had experienced while making an application- so much so that there was a 92% drop-off rate- meaning a steep decline in applications. This is an issue as fewer business accounts use Cardnet which leads to the business losing clients and revenue.
Through the UX researcher’s and data analysts’ findings, we were brought in to reduce and solve the pain points that our users were facing. An application journey naturally has a lot of steps and questions, especially when it comes to businesses trying to open an account.
There is a lot of information that is required to pass things such as the Anti-Money Laundering and Fraud checks and overall checks to make sure that a business is using accurate and correct information like who and what they are and their turnovers and profit.
The goal is to simplify the application journey as much as possible for businesses. There are many other payment platforms that people can turn to, so it is important that the user feels that the process is as easy and seamless as possible.
The uploading of important documents page was not intuitive. These documents were to prove the identity and address of the business- this page can’t be skipped. The previous uploads page had multiple steps to upload documents that opened up more pages and took the user off of the initial page.
PROCESS
The part of the journey that I handled were the outlets page and the upload documents process including their respective states and screens for every interaction.
I started to build out lo-fi wireframes playing around the look & feel of the design whilst keeping in mind the needs of the users & the brief requirements. The potential solutions that I designed went through a review process at each step with a senior UX designer.
Each iteration went from lo-fi to mid-fi & finally to hi-fi with prototyping at each stage, keeping inline with the Lloyds design system and staying consistent with what the other designers on my team created.
I typically wanted the users to be able to easily and intuitively upload documents during the onboarding flow. The form needed to be simple while conveying the required functionality & use of the page.
I needed to have a way of uploading two types of documents: documents that proved identity and documents that proved an address. I created another section to allow users to add any other relevant documents, however this was confusing to users through user feedback and was removed in the next step
This iteration did not include many buttons, but was instead stripped back with clickable links that allowed the action. This was to get a feel from the users mostly about placement and layout, and using the right terms that they would understand.
COMPETITIVE ANALYSIS
Goldman and Sachs file upload:
Drag and drop section
Allows input of browsing files from your computer
Clear descritptions, labels and icon
GOV.UK file upload:
Extremely minimal and simple
No icons or instructions
Input with no drag and drop option
Relies on pop-up error messages to clarify issues with the user
Siemens file upload:
Drag and drop section with a browse files facility - narrow button and icon
Descriptions/helper text about limitations on file size and forbidden characters
Ability to delete uploaded files
Brighton & Hove City Council file upload:
Drag and drop section
Button to browse the computer to choose file
Icons on both options
No extra descriptions within the design
Multiple file upload
LO-FI UPLOADS
ITERATIONS
Feedback was given for the upload ideas that I had, and I iterated further based on this and the work from the other team members. This meant following consistency, so I kept functionality buttons in the form of links - ‘edit’ & ‘remove’ and a ‘request’ button.
I also followed the same information architecture and ways of displaying pieces of information as other pages in the application journey.
I added a ‘Customer notes’ section for users to add additional notes to support their application which would allow users to make any notes or ask any questions if needed. This replaced the initial idea of the “Anything else” space for other types of documents, which was confusing to the user - as found in user research & feedback.
I needed to look at various ways of uploading documents (drag & dropping a file into the browser or uploading via a button that opens the documents on your computer) and ways of showing the progress of the document downloading. This is an important feature to help clarify the step and give feedback to the user to know that their documents have been uploaded.
I used a pop up modal to upload documents so that it would not interfere with the important aspects of the journey application page.
MID-FI UPLOADS
(Lower res due to privacy & security)
Option 1:
Simple and stripped back
Ability to drag and drop
Relies on an icon only
You can also click on the button to upload a file
Option 2:
Simple
Ability to drag and drop
Relies on an icon only
Two sections
Select the type of document through a drop-down
Option 3:
Drag and drop section
Relies on an icon and a label of “Select File”
Progress bars inserted
Once completed the bar disappears and is replaced with “completed”
Option 4:
Swapped the layout so that the uploads are at the top
Progress bar that show the percentage of completion while its loading
and once completed, the bar remains filled in, but has a tick icon on the right side Drag and drop section below
MODALS
With the modal, I played around with loading bars & their positioning to help clarify to the user how their upload is going. I also decided to experiment with ‘drop-zones’ to help to facilitate the uploading of the document, giving user the chance to either open their documents on their computer or click and drag a document onto the page for ease.
By using a modal, I eradicated the need for multiple steps and pages to upload the documents. This took the user off of the initial uploads page which was confusing and irritating. User feedback was given that users preferred having the pop-up to the previous feature.
While prototyping I also trialled adding a dropdown menu since it would serve as a good reminder to the user but also our system of what type of document is needed.
SOLUTION
It was imperative for the modal to give clear instructions, so I included “Drag and drop the flies here” and an underlined option to “browse files” which left no room for error or misunderstanding for users.
A drop-down which allowed the user to connect the document with the type of document that they were uploading. This had been previously made confusing through a single button that had said “add new document” where differentiating between different documents was needed.
I also followed user feedback and opted for a clearer button title to upload a document (“Upload file”) which was a better Call To Action than the previous ‘edit’ and ‘remove’ link buttons which cluttered the page and were confusing.
This also signalled to the user that the step was incomplete and that an upload was needed to move on to the next step of the journey.
For the modal, I removed the loading progress bar as it was unnecessary complexity and users found it clunky, and exchanged it for a loading circle instead which looked cleaner.
From user feedback, settled on a ‘drop-zone’ for the user to browse their files through their computer or drag and drop a file, in order to help simplify the process and help with accessibility and usability as it can be a physically tricky interaction, especially on touchscreens.
OUTCOME
PROJECT LEARNINGS
The redesign of the uploading documents step focused on addressing critical pain points identified in the user experience. Improvements were made to enhance and simplify the intuitiveness of uploading important documents, ensuring a smoother and more seamless interaction. The redesign also clarified the purpose of the page, contributing to a more cohesive and comprehensible user experience for uploading documents that are extremely important pieces to the application journey. Through these strategic enhancements, the goal was hopefully reached to help foster increased customer satisfaction, minimize drop-off rates, and ultimately create a more engaging and user-centric application journey overall.
These designs were handed over to the developers to start development. Sadly my role was finished before it was made live and given the chance for post-release feedback and iterations.
Progress bars : The importance of letting the user get some feedback that the action that they have taken is completing or has compelteled. Users like to get an indication that their document is loading.
Options: Giving user the option of having a drag and drop facility as well as the option to open up a file from the computer is helpful for accessibility as it can be physically challenging for some.
Modals: A step where you need to upload sensitive documents needs to feel trustworthy and safe, and having a pop-up modal on a page allows for an easy upload that eliminates the need of opening an additional page or making another step.
