Lloyds Payment Management Onboarding - Outlets
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 for users - 92% drop-off rate for the application journey
Lack of guidance on how to add outlets and what it means
87% of users left the “outlets page” page blank or returned to the page at a later time
A cluttered screen that isn’t intuitive to add outlets
Uses automated images for the outlets that was found to be confusing
Tags: #Application Journey #Outlets #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 need to complete in order to apply for a business account for the taking payments platform: Cardnet.
The application journey consists of 10 important sections 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. There was an overall 92% dropoff for the application journey with customers due to various reasons such as the complexity and length.
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. For the outlets section of the application in particular, this caused a whopping 87% of users to leave this step blank or come back to it later. this is an issue as fewer business accounts use Cardnet which leads to the business losing clients and revenue.
Through the UX researcher’s 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.
Adding outlets to the business was not a clear action that was needed. Users were confused about the meanings and importance of adding different outlets. An outlet means a type of device and its information- including name, type and address. The previous page for outlets was clunky and not intuitive which reflected badly on the application journey.
COMPETITOR ANALYSIS
Windows system:
Add device in the top right corner with no icon
Allows for a three dash menu to be clicked on that give the options for “connect” and “remove device”
Everything is aligned to the right
ACME:
CTA for add another device is on the bottom right
A clickable link and a “plus” icon
Device options found on the right
When clicked on, it opens the options of “Reactivate”, “Change device name” and “Delete” which is represented by a smaller red button with the icon of a trash can
Swipedon:
Add device is aligned to the right
A blue button with no icon
Information given is device name, device ID and location of device
When add device is clicked on, a pop up appears to the right with a fill-in form. Fill-in form asks for device name, location and device type as a selection to choose from
Teamview:
CTA is on the top right left in a blue button with a “plus” icon for “add device”
The information for the device includes the name, device type and group
Icon for each device and sorting through devices are available
I could not find much on different ways of adding outlets per se, however I found that the term “Devices” was more common and similar to use for inspiration. I had a look at how others were dealing with the presentation of a devices/outlets screen. Many chose to have the CTA as a separate button using a plus icon and a different colour button. Most of the device options were aligned to the right of the screen.
All competitors allowed for the naming of the device while most allowed you to delete the device, however I didn’t see too much in the name of “editing” the device. There was no doubt that in the use of SAAS that a devices page was extremely integral in keeping count of the devices and their device types.
LO-FI PROCESS
For the outlets task, I had to iterate from lo-fi to mid-fi based on feedback from the team & my senior. The feedback was primarily focused on the layout of the information.
We typically wanted the users to be able to decipher between brick & mortar devices & online devices. Initially I used a thumbnail image of the kind of device that the outlet had on the left side of all of the options to do with the outlet on the right. I played around with the information architecture by displaying certain fields at placements, such as the title of the outlet device and the button/link layouts. I played around with showing the outlet options using a vertical or horizontal layout to regard the functionality of ‘edit’, ‘duplicate’ & ‘remove’.
I also played around with the placement and presentation of the “Add outlet” CTA button. I found that putting it through as a button with a different colour was too distracting, and that putting the button on the top of the page before the outlet information was misleading.
These decisions were also made to help the user intuitively be able to use the page with ease but also for accessibility purposes with screen readers reading from left to right.
LO-FI OUTLETS
ITERATIVE PROCESS
The parts of the journey that I handled were the outlets page and the uploading documents process page which included their respective states and screens for every interaction. For outlets, this included an empty state, the creation of an outlet state and options that allowed the user to edit, duplicate and delete their outlet.
Outlets in itself was a bit hard to understand as it can have multiple meanings depending on how the term is used. The outlets page is a step in the application journey that allows business owners to add the various devices, their types of device and their respective names and locations.
I needed to also create a page to create a new outlet and another to edit an already existing outlet. 87% of users not filling out the page or leaving it until later in the navigation was something that had to be kept in mind.
It is important that this page was as intuitive and clear as possible so that the business user would be able to differentiate between the different take payment outlets that they have to use the platform.
The potential solutions that I designed went through a review process at each step to help keep consistency with colleagues and other application journeys from the public site but to also aid in the iteration process to the final design.
The review was conducted by the Senior UX Designer who kept a tight feedback loop with me and other designers designing the other steps in the journey.
EMPTY STATE MID-FI
With the empty state, I decided to move forward with the placement of a centered and greyed-out icon along with the text to clearly indicate to the user that they had no outlet devices assigned to their account. The CTA button was to attract the user to want to add a new outlet and let them know what the next step was.
However, After the user/peer feedback about the mid-fi, it was decided that I should remove the icon in order to keep within the brand guidelines & align the information to the left to keep it consistent with the rest of the journey.
MID-FI OUTLETS
Option 1:
Images as thumbnails for each
Option with the most information: cost/location/type/device number/address
One button of “edit” on the right
CTA is on the bottom right, a blue colour for the button with a “plus” icon
Option 3:
Icons as thumbnails
Three buttons on the right horizontally stacked
Information includes the device type, address and leaves a blank for the chosen option
CTA button is on the bottom left, not as a button but an underlined clickable, not as eye-catching- as is the option to “remove” the outlet.
Option 4:
Icons as thumbnails
Information of the type and the address of the outlet
The three buttons have been stacked, still in the same order with “remove” being a clickable
The CTA is a blue button with a “plus” icon that is at the bottom right of the screen
Option 2:
Icons instead of images as thumbnails
Information includes the device type, address and leaves one blank
3 buttons on the right horizontally stacked, with “Edit” being the most important
CTA is at the bottom in white so doesn’t stand out too much, with a green “plus” icon
SOLUTION
It's easier to use default icons instead of confusing thumbnail images. Users preferred well-known icons over device images. Smaller icons made the outlet information clearer.
All users would need to start off with an empty state page with a need to add an outlet. Putting it at the top of the page was prominent and clearer to see.
Users found that a different colour CTA for adding an outlet was too distracting and confusing, especially after they had started to add outlets
When creating a new outlet, they preferred a selection of options readily on display rather than a drop-down due to accessibility but to also help understand the meaning of “outlets”.
“Your Outlets” was simplified to just “Outlets” and “Remove” was replaced with “Delete” to simplify the page from user feedback.
The order of the buttons was found to be easier when it was “edit”, “delete” and “duplicate” - duplicate was the button used the least and a few users did not understand the meaning of it. It was therefore moved to the end of the order.
The option for more pages of outlets was added for larger businesses that had multiple outlets and multiple locations.
The three options “edit”, “delete” and “duplicate” were changed to clickable links rather than buttons so that it was a cleaner interface to use and so that it also adhered to brand guidelines keeping it consistent across other pages of the journey.
OUTCOME
Please click to view the clickable prototype:
Outlets Prototype
The re-design of the outlets page focused on de-cluttering the page and making the page more usable by giving the user more guides to comprehend the purpose of the page. Wording and placement improvements were made to ensure that the page was clean and less complex than it had been before. With the final designs in place & approved for each of these tasks: the outlet step of the application journey was completed.
By making this page clearer, the amount of users that fill this part of the journey out would increase. Allowing users a “notes” section gives the user to connect with the people who check the eligibility for the business account.
Through these changes, I hope that the amount of users who choose to not fill out this page or to come to it later find it easier to fill and therefore have more of a desire to fill it out. Through these strategic enhancements, the goal was hopefully reached to help foster increased customer satisfaction, less customer confusion, 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.
PROJECT LEARNINGS
Wording: Through iterations, I found how important it was to name the elements in your product properly. This is so that it is accessible to all users and that there is no animosity about the meaning of certain words or terms. Users expect certain terms to be used and if a synonym is used that isn’t so widely used they might not understand, especially if eg. English isn’t their first language.
Consistency: This project meant that I had to collaborate on an application journey with multiple designers. We had to follow brand guidelines but also make sure that the work that we made was consistent with both each other and other Lloyds materials. This was a pain at times but there is no denying how important this is.
Collaboration: In addition, since we were a team of 6 designers, it was important to keep others on your team in the loop of your research and decisions. Getting feedback and criticism as a team and also through the lead designer who I worked with most helped me to learn teamwork and communication.