Address Validation
User Research • Design Strategy • UX Design
As a designer for Smart Pay, a B2B payments application, I oversaw the end-to-end design process, from conducting user interviews to creating the UI/UX designs for implementation. Collaborating with a skilled team of designers and engineers, we delivered an MVP product for Capital One’s small business customers. Upon MVP delivery, the main pain point our users faced was managing their vendor addresses for check payments. I lead the designs for the Vendor Management feature that helped our users streamline their vendor payments.
My Role:
• Supported the E2E designs of the MVP product
• Lead the designs for feature enhancements
• Conducted user interviews and usability tests
• Mentored junior designers & interns
Duration:
August 2022 - November 2022
THE GOAL
Improve check payment experience
Upon initial rollout, Smart Pay did not display key vendor data within the app. This created a constraining fragmented user experience where clients can make vendor payments through Smart Pay but need to go back to QuickBooks Online to do basic things like viewing and updating vendor data.
Through a partnership with the product team, I lead the vendor management experience within Smart Pay to reduce friction in check payment flow, collect supplemental vendor data, and lay the foundation for future value add capabilities. Through iterative building, we initially created an address validation feature to help mitigate address errors and then we worked on building a vendors page to allow users to manage all vendor information in a centralized location.
The image shows the initial stage. In this experience users are not able to resolve errors within Smart Pay.
THE PROBLEM
A fragmented experience…
User Pain Points
• Upon uploading their vendors list, the user is bombarded with address errors. That makes an unpleasant first-time UX for users
• Users must toggle back and forth between Smart Pay and their QBO (accounting software) to view and manage their vendor data
• Users cannot fix errors, such as missing vendor addresses, within Smart Pay
• Handling address errors outside the platform slows down the check payment process
• There’s no address validation in QBO, edited addresses can still be invalid and give errors in Smart Pay UI
DISCOVERY
How do clients collect and manage vendor adresses?
Before jumping into solutions, we wanted to go back to the basics to fully understand the experience of Small Businesses with vendor data. I conducted interviews with our customers to learn:
• How do they collect and manage vendor data as a part of their check payments process?
• What consists the collected vendor data?
• What are the challenges they face while collecting vendor data?
• How do they maintain accurate data about their vendors?
INTERVIEW SYNTHESIS
We created an affinity map, focusing on the pain points
“Entering vendor address is tedious and prone to errors”
KEY INSIGHTS & PAIN POINTS
• Average small business has over 100 Vendors they work with. Vendor data is collected through a form that’s sent through email and stored locally.
• For small businesses long-term vendor relationships can create benefits around waiving late payment fees, offering early payment discounts, and re-negotiating terms.
• For check and card payments, vendors prefer bundled payment. Receiving multiple invoices in a single payment saves time and improves efficiency.
• There’s a disconnect between the customer and the vendor during the payment delivery process. Vendors have no insight into payment status and often reach out to customers to inquire about their receivables.
Key Insights
• Collecting vendor information can be challenging and the process of manually entering vendor information into the systems like Quickbooks Online is “tedious and prone to errors”
• There are no address validation systems built into their current system. Wrong entry of address causes payment cancellations for checks.
Pain Points
What are the unique address scenarios and how do we help the user resolve them?
IDEATION
Through our research, we learned that entering the address wrong is a big issue for check payments as they lead to payment cancellations. Which can be very time-consuming and costly. We recognize that we need to help users not just edit their missing vendor data but help them verify vendor addresses to ensure accurate delivery of check payments.
As we used third-party(SmartyStreets) API to validate vendor addresses. Upon validation tests, we realized different address errors need different handling. Through a partnership with the product and tech teams, we have identified several address scenarios and mapped each one to a customer experience.
We grouped address notifications under two main categories; Errors and Alerts
CONTENT STRATEGY
Alerts are used as soft warnings, indicating the bill can still be paid. Errors are used for hard warnings and disable the bills from being paid. Under “Address Errors” we identified 3 different groups of issues that needed further clarification and requires different calls to action. While the status badges on the table communicate the issue at a high level, the detail drawer notifications further communicate the issue and provide user with actionable steps.
Provided users with clear guidance to resolve any issues
AN ITERATIVE APPROACH
Within the first iteration, in collaboration with the content strategy team, we incorporated detailed error messages into bill drawers. This helped users to know exactly what to fix about the vendor address and provided clear guidance about the steps they needed to take.
This was a huge improvement for an accurate check payment experience. However, this was still far from the ideal state. There were 2 remaining experience issues:
Issue 1:
• The user is able to accept address suggestions within our UI and sync the updated address to QBO but still needs to make the larger edits in QBO.
↓
Reason:
• We currently don’t have user roles in Smart Pay. Only an admin can make edits in QBO, and our users can represent any member of the accounts payable team
Issue 2:
• User can only resolve address issues for the vendors with open bills. That doesn’t cover their full vendor list in Quickbooks Online.
↓
Reason:
• Current experience only syncs open bill data from QBO. Vendors with no open bills are not shown within our UI.
To streamline users' vendor record management, we created a dedicated vendors page
PATH TO THE IDEAL EXPERIENCE
Bringing the full vendor list brings all the address errors with it. However, it is necessary to build a robust vendor management system in order to become the primary payment platform.
The address errors stay persistent until the user fixes them. The majority of our customers had +100 vendors, and dozens of vendor addresses gave address issues. We knew it was going to be a frustrating experience for the user to face the errors all the time. And it was going to be time-consuming to tackle all of them one by one. We explored alternative ways to surface the errors.
As we add new features, we want to make sure our platform is growing sustainably
INFORMATION ARCHITECTURE
We added level of depth indicators to our information architecture to make sure non of the features are below the L4 level of depth. This also helped us think through the main features that should be surfaced on L1 and L2 levels.
We created a new alert message that combines all the errors that require user action. Users can see the total amount of vendors with address-related issues and learn what those issues are. “Review Vendor Addresses” takes the user into a focused view where to user can resolve these issues.
Users can now focus on vendors with address errors
BUILDING BULK ACTIONS
Based on the specific issue and necessary action for each address scenario, we grouped them into separate buckets to enable the user to take bulk action. Users are able to go into each group and have a narrower focus on the issue and take action quickly in this way.
Helping the users streamline the address cleanup process
Not only improved check payment experience but build a strong foundation for vendor management
WHAT DID WE ACHIEVE?
Improved check payment experience
• We prevented potential check payment cancellations by helping the user fix address-related issues
• Users can now resolve light address issues within our UI, moving a barrier from making the payment
Build the foundation for vendor management
• Users can keep a clean record of their vendors within our platform