ProviPay Invoices & Payments

Improvements to an online payment platform for beverage distributors and vendors.

A segment of a mockup of the ProviPay invoice interface
Company
Provi
Role
Senior Product Designer, partnering with a Junior Designer
Duration
2 Months

Background

Provi is a B2B online marketplace that empowers restaurants, bars, and other alcohol retailers to order from all their beverage distributors in one place.

ProviPay is a feature available in select markets, enabling businesses to make online payments to their beverage distributors. It is modernizing the antiquated process of paper invoices and handwritten checks that is common in the bev-alc industry, by bringing it online and offering the ability to manage your invoices from multiple distributors in one place.

Understanding User Goals

Our goal for ProviPay was to create a single location for retailers to be able to handle all things related to paying invoices. Through user interviews and feedback surveys, we uncovered user needs that ProviPay was not fully addressing:

Because ProviPay was falling short in addressing these two important user needs, we identified these as potential opportunities for increasing adoption to the platform.

Getting Access to Credits

Prior to this project, applying credits was one of the most frequently requested capabilities by our ProviPay user base. Through user interviews we determined that, beyond simply being able to use credits within ProviPay, there was a larger underlying need for retailers to be able to keep track of what credits they had with various distributors. Without a centralized place to check what credits a retailer has, the responsibility of keeping track of this important financial information fell upon the retailers. We wanted to create a solution that would make it easy for retailers to keep track of and apply credits to their invoices.

Retailers needed a way to both keep track of and utilize the credits they are issued by their distributors.

Automatically Applying Credits

We determined that automatically applying credits to invoices upon payment submission would yield the most frictionless experience for our retailers. To make this apparent to our retailers, we incorporated a breakdown of the payment balance to their payment modal, with the option to not apply the credits to their payment.

Mockup of the payment modal on ProviPay.
The payments modal was updated to include a dropdown that displays all the credits that have been automatically applied to the invoice payments.

Displaying Credits & Their Status

To address the issue of keeping track of available credits, we incorporated a new tab within the Payments dashboard that gives retailers an overview of all of their available credits. Clicking into any line item gives them more detail on the credit, as well as a history of when they've been applied.

Mockup of the ProviPay dashboard, with the Credits tab showing.
We added a credits list view, to increase transparency around available credits for retailers.

Verifying Invoice Details

Previously, ProviPay customers would only see the highest level information regarding their invoices, such as the invoice number, amount due, and due date, but nothing about the individual line items of the invoice. To compensate for this lack of information, many retailers told us they would cross-reference their paper invoices before submitting payments. If the invoice balance was off in any way, only having the total amount due for the invoice made it more difficult to identify where the pricing discrepancy was occurring.

To help improve this experience of verifying information before submitting payments, we made two enhancements to the product: we imported and displayed additional invoice details within ProviPay, and incorporated links to the corresponding orders in order history.

Importing & Displaying Invoice Details

Displaying the actual line items of invoices allows retailers to quickly verify within the platform that the charges meet their expectations. To make this process of reviewing invoice data even smoother, we looked at actual paper invoices that retailers receive upon delivery, to verify that the layout and terminology would be similar enough that it would be easy to scan the interface and understand the information.

Mockup of the ProviPay invoice details page.
The updated version of the invoice details page, designed for easy comparison to the print invoices retailers receive from their distributors.

Cross-Referencing Orders & Invoices

Through Hotjar recordings, we found that retailers were frequently pogo sticking between ProviPay and order history, presumably trying to identify which orders corresponded to their invoices. To make this process of cross-referencing information easier, we incorporated a link from the invoice details page to the corresponding order history page. We also made plans to incorporate a link from order history to the invoices, but that has yet to be implemented.

Key Results

Two key metrics that our team determined before the project release was the number of retailers viewing the invoice detail pages WoW, and the number of page views of the invoice detail pages. We saw a marked increase in both number of page views and number of retailers viewing the page, as demonstrated in the graphs below.

Graphs showcasing the positive impact of the project on page views and users viewing the page.
The above dashboard demonstrates the impact on page views and number of retailers visiting the page.

After completing these projects, our team released ProviPay to a new market in a “read-only” state, meaning that retailers in that market can view their invoices and credits within ProviPay, but have yet to be able to submit payments. Even in the read-only state, we’ve seen a strong initial adoption of the platform, adding to the evidence that even providing this information alone is a significant value-add to our retailers’ experience.

Ready for more?