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.
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.
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.
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.
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.
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.
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.
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.]
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.
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.
