Optimizing the invoicing workflow

role in the project
Research and Design
2 Months

The challenge

At first glance, redesigning the invoice workflow of the ServiceBridge app appeared straightforward. We generate invoices for the goods and services delivered to clients, and after receiving payment, the invoices are retired. However, after further analyzing the lifecycle of an invoice, we discovered many tiny, time-consuming processes occurred along the way. We realized any improvements we could make in the workflow process would eventually free up hours better used in tasks related to growing the businesses.

Lifecycle of an Invoice

An invoice passes through many hands—literally, in the case of a paper invoice—with everyone in that chain interacting with it differently. Where digital invoices are concerned, there is a hidden challenge. Typically, they are synced to accounting software. Accounting usually has periods when data is "locked." It’s like an expiration date for invoice updates. As a result, there are many data points and status updates required by the process.

Additionally, invoices need to be delivered to the people and firms that owe money. Payment may come in various forms: cash, check, credit card, or bank transfer. Sometimes, only partial payments are received, an invoice goes unpaid, or in the case of overpayment, a refund is due.

Badge concepts for the relationship between Payment statuses and "Sent" status

Defining Personas

We identified four personas that are involved in this workflow: the office admin, field worker, customer, and accountant. The number of actual people representing these personas varies based on the business. For example, during a visit to one our customers' office, I shadowed a person who spends the afternoon opening envelopes and recording payments that came in form of a check, then another person calls customers on the phone to collect payments via a credit card. In smaller firms, all these functions may be handled by one person. But by examining the priorities for each one, it helped us create a content hierarchy.

Heuristics and usability

When I started working on this project, the ServiceBridge product had been around for over eight years, and the invoicing functionality was already feature-rich. It offered two-way syncing with QuickBooks Online, a robust reporting engine, role-based permissions, and several other notable features. While it was functional, visually it lacked hierarchy. It was hard to process the information at a glance. Buttons for primary actions blended in with the secondary buttons and the statuses were hard to distinguish from the tertiary data.

All of the actions that appear at Invoice inception
Grouping buttons after card sorting exercise.
An Invoice can be shared with Customers in a few different ways.

Early Concepts for Invoice Overview screen

By redesigning the screens, we created a visual hierarchy. We also updated some of the functionality. The invoice header now clearly communicates the current status, and the primary actions are dynamic. For example, if an invoice was already sent to the customer then the "Send" button becomes "Resend" to reinforce the status at the point of interaction. Dates to help the user make decisions were also made more prominent.

First screen after the invoice is created

For overdue invoices, users can now see how late the payment is, which creates a greater sense of urgency. Since the user base was already accustomed to the action button placement on the left, we put all the statuses on the right side. But we chose to spell out the status rather than relying solely on the color, red, for accessibility reasons.

Overdue invoice.

I used Pendo to tag the buttons to see which were most frequently used. I chose to "hide" the secondary buttons under "More" to increase the amount of white space, making it easier for a user to process the information at a glance.

Feature use heatmap from Pendo.

A quick card-sorting exercise with our team helped me compartmentalize the buttons. [RECYCLING TIP: I used the backside of outdated business cards for this.]

Card sorting to help organize the primary action buttons

What is everyone else doing

To understand user expectations better, I also looked at other products that include invoicing functionality since our subscribers often evaluate dozens of products for their businesses before making a choice. This way, I could also become more familiar with the ecosystem of invoicing and know what people are accustomed to and what, if any, patterns are universal. 

While I don't believe in designing features a certain way because someone else is doing it that way, if everyone is using a hamburger for a menu or a floppy disk icon for a save button, then an agreed convention already exists. In that case, introducing a new element might add unnecessarily to a user’s cognitive load.

Quickbooks Online: clearly separated Client info from Products and Services, large number for Balance Due.
Freshbooks, semi-skeumorphic design represent a paper invoice and helps the user to separate Invoice content from primary actions.
Waveapps super clear status, visually segmented workflow and a paper like representation of an invoice.
"Smart" processes. When you generate a sharable link in Freshbooks it will mark the invoice as Sent for you. Waveapps clearly states that this payment will be associated with this Invoice so that you don't have to apply it manually.
More actions: this was such a delight to pick apart. I would love to talk with designers about the choices made here.

The Big Picture

Invoicing is small fish in the big sea of software features, but it’s essential to a business’s cash flow and accounting functions. However, subscribers don't want to spend any more time than necessary involved in the invoicing workflow. Every minute we save them is a minute better spent on growing the business.

Invoicing process is a small but integral feature of SerivceBridge.