Payments App
Payments app
Getting paid faster without changing workflows
Money, money, money
Filevine is comprised of an ecosystem of different platforms, many of which can send invoices to their customers. The problem here was obvious: We needed a way to send an invoice and collect the payment on that invoice on behalf of our customers.
As the designer of the 0-1 portion of the new Payments application, I kept things as simple as possible by sticking close to our deign system & component library, working within the constraints brought on by the different needs of our partners at Stripe and our existing applications, and talking to the accounting personas at our customers to know what base features they would find most valuable.
Headless invoicing
Most of the users of the payments functionality would be sending invoices from other applications and would never actually see the interface we built to house the accounts, so my work focused on the needs of the accountant or managing partner at a law firm.
I provided a way to quickly get pulse on the in and out flows using a card-style UI and placing quick filters with standard net-30/60/90 filters at the top of the screen. Most users requested a way to export the data for use in their preferred accounting software or for passing it on to their third-party accounting service.
The landing page is simple and meant to feel familiar to other accounting software. A quick pulse of business and easy to use filters.
Selecting any transaction follows our common table pattern by showing more information and available actions in a side panel.
While most payments will be initialized from other applications, user still have an option to request them in the app proper.
Using the secondary navigation pattern allowed plenty of room for future needs, where we now have payment option settings, account management, portal customization tools, and more.
The customer’s client
One of the more important pieces to this work was creating a payment portal for our customer’s clients. I wanted them to be sure they were paying our customer and not us, as well as having confidence while entering personal payment information into a form.
I created a simple form using the design system that capture the data that we needed to send to Stripe wile allowing our customers to add enough of their brand to instill user confidence.
Simple & powerful
This app opened up the ability for us to add payment functionality into many of our other applications—right where our users were already sending invoices! This enabled them to accept payments without additional steps or navigation and for their clients to make payments via email, text, and our client portal, resulting in a reduction in outstanding invoices and a 75% faster time to payment for those with both payments and client portal features enabled.
This is a project I worked on while employed at Filevine.
Up next
Filevine Design System
The backbone of consistency, accessibility, and handoffs