Payee Management
Problem Statement:
Users were complaining the current 'Add Payee' process was too time consuming, had a "childish" tone, and a lot of wasted space on screen. Many users didn't enjoy scrolling to see additional steps and found illustrations were unnecessary and didn't align with the risks and urgencies experienced by large corporations. These issues have caused huge drop-off rates in business banking, causing negative impacts on revenue for this platform.
We were tasks with how we could streamline the flow without users losing helpful content, following Canadian banking requirements, and scaling to include additional payment methods for international payment processing. The goal was to speed through the process of adding a new payee to their bank account without missing key financial details required by Canadian Bank standards. The experience needed to include any existing functionality from the legacy software users were using, and adding additional features that made us competitive against online alternatives.
Executive Summary
This was part of the original business banking platform designed in the early 2000s. There were a lot of users who preferred to use this platform because it had more payment methods for processing cross-border payments vs. the software that was being built to decomission the legacy platform.
Another reason users preferred to stay on this platform vs. moving to the MVP 2, was the lack of automation. To move their existing payees from the legacy software to the new platform, they would need to manually save each payee vs. importing a template that had all their payees. This was the main hurdle preventing users from jumping to the new experience.
Version 2: Illustration heavy + white space
This version was the MVP Add Payee flow product wanted to use as a replacement for the legacy software. The UI was updated to match the new style guide, the steps were spaced out to improve visual hierarchy, and there was more content to help guide users through each step.
Although version 2's goal was to help improve the UX and update the UI, there was a lot more negative feedback compared to the legacy software. Most accountants who are processing payments on a daily basis are working in large excel sheets with 100s of datapoints. They're used to working with data dense screens and didn't see any value in the added white space, illustrations or updates UI.
Their efficiency had also dropped by 50% because they weren't able to see all the required form fields within their screen viewpoint.
Version 3: Latest release with workflow improvements
After doing multiple rounds of testing and analysis on version 2, we explored changing the visual layout and creating a compact design that was streamlined, informative, and scalable. We did A/B testing with "shopping cart" experiences, talked to users about their daily workflow and how we could implement patterns they're used to, and analyzed their reasoning for using third-party accounting software vs. consolidating payments within 1 platform.
We realized we were not competitive in the business banking industry because we lacked automation, couldn't offer industry standard payment methods for international payees, and our flows were designed for single actions vs. repetitive actions. Many uses want to import payee information because it eliminated risks associated with manual entry and the time needed.
Strategy and Decision Logic
The Constraints
Legacy Software:
Users were completing certain payment methods like bill payments and direct deposit (ACH) in a legacy software that the company was trying to decomission. We needed to make sure we were including all existing functionality users are used to to avoid breaking their existing payment processing experience
Existing Content Strategy:
The original content strategy went through multiple rounds of approvals with legal, translation and go-to-market teams. It was also already live in production. To make a change to the content, the timeline would extend by 3+ weeks to get another round of approvals, translation and creating a content deck for developers.
Scalability of Design for Payment Methods
The company was still in the beginning stages of moving away from small-business banking needs and scaling up to larger corporations with complex banking needs. We needed to make sure if we ever needed to add more payment methods to the UI, it wouldn't break the layout or content strategy.
Collaboration
LPL Staff Designers
Aligning with staff designers to understand what components and existing patterns would be useful, easy for developers to include, and commonly used by users experienced with the platform
Content Designer
Developing a new content strategy that would be more scannable to aid in comparing payment methods, and hiding secondary content in tooltips to avoid clutter the UI on mobile screens
UX Researcher
Conducting user testing on the latest version of the 'Add Payee' flow to gather feedback. Categorizing changes that are "easy wins" vs. changes involving lots of discussions with product partners, developers and stakeholders.
Wireframes
Several wireframe iterations explored layout options and information hierarchy. Each version was validated through user feedback to ensure usability and clarity.
Below are representative wireframes from the process, illustrating major layout improvements and interactions.
During the design process, we played with 1, 2 and 3 column layouts. We faced challenges with information density on the screen and not having enough space to create visual separation between sections in the UI. We also played around with statuses for newly added payment methods requiring approval from entitled users, saving different payments, and how it could scale for saving multiple payment methods for the same user. (ex: multiple direct deposit (ACH) payment methods, wire transfer details etc.)
When it came to managing 100s or 1000s of payees within the Manage Payee feature, it was important to show details that would help users differentiate them such as name, saved payment methods and last modified dates. We can't show all payment method details on a summary page due to the varying payment method fields and running into performance issues.
We also integrated newly automated experiences allowing users to sync payee information from accounting software and uploading payee detail templates to reduce effort and risk of human error by 33%
Final Impact
The Design Strategy:
We transitioned from a "Long-Form" scrolling experience to a high-density, pattern layout. By grouping similar data types and utilizing progressive disclosure, we reduced visual noise without sacrificing power. Also, by including visual patterns, users are able to navigate through the flow faster.
Design Interventions & ROI
To achieve these numbers, I implemented three core UI optimizations:
Field Mapping & Consistency:
I mapped similar payment detail fields into a predictable grid system. This created a "muscle memory" layout that allowed power users to scan and validate data 2x faster.
Progressive Disclosure:
By hiding secondary, low-frequency fields under intelligent "Advanced" toggles, we reduced vertical scrolling by 40%, keeping the primary CTA "Add Payee" always within the initial viewport.
Information Scannability:
We moved away from "Label-Value" stacks to a more horizontal, data-dense layout, specifically optimized for the high-speed input workflows typical of accounting professionals.
Modern finance teams are moving away from manual, repetitive data entry. My design aligned with these 2024 industry benchmarks:
Manual Entry Fatigue for Large Corporations:
92% of accounting professionals cite "manual task fatigue" as their primary pain point.
Speed vs. Reading Every Detail:
85% of users now prioritize "Speed-to-Completion" and "Validation" over "Guidance" in their daily workflows.