Invoicing

Create and send professional invoices that get paid faster

About the project

As a small business owner, an invoice is the primary sale agreement between you and your client. It outlines the product or service rendered, the price breakdown, and the payment terms. It also represents your business to the world, your brand, and so looking professional and being accurate are of utmost importance. 

Traditionally, an invoice was created in Word or Excel. This gives you complete customizability, but at the expense of zero integration with other tools such as a payment provider, inventory tracking, or accounting software. You have to manually associate your invoices with these other tools separately. A complete time sink and source of frustration.

The goal of the invoice is to get you paid. The faster you get paid, the better cash flow your business has. By avoiding a cash crunch, you can run your business more effectively without losing sleep over making payroll the next month or not paying bills on time.

My team looked at the product roadmap for invoicing, reviewing what our users needed and what Wave needed, and we concluded that the product had reached a technical boundary. We could not build the future with our existing platform. A complete rebuild was necessary to unlock new opportunities for our roadmap and for Wave as a whole.

This massive rebuild project came to be known as “Next”. We planned to first build “Next Invoicing”, then “Next Accounting”, “Next Payments”, and so on.

Our existing invoicing product had a multitude of product and design limitations that were frustrating our users:

  • No guidance on best practices for how to get paid as fast as possible

  • No customization options beside a logo and an invoice template

  • Limitations on where in the interface you could create payment reminders

  • A broken tax experience with cluttered interface elements

  • Lack of clarity around the status of an invoice and what actions should be taken

  • Poor integration with saved credit cards and payment options

  • Confusing integration with our bookkeeping software

Pain points

We started an extensive planning process, and we set the internal vision of the project: “A user, regardless of what they sell or their internal sales cycle, must be able to generate beautiful and comprehensive sales agreements, with the fastest path to payment collection available on the market.” 

We outlined the critical parts of a successful user experience:

Onboarding and visibility: Show users the perfect invoice for their business at the earliest possible phase of their experience.

Workflow: Provide an impact to customers with cleaner workflow to guide them through what makes businesses successful in getting paid on time after they send an invoice.

Visualization: Provide Customers with logical flow to create an invoice where their create flow more closely matches what the invoice will look like. 

Customization: Set the foundation for further invoice customization. Edit columns and new invoice templates.

Saved Credit Cards: Users that have saved client credit cards are apply payments to invoices.

Performance: Establish a high performance and optimized user experience to power the future of invoicing. Technical improvements

Purpose, objectives, and principles

The goal of the project was to improve all of the metrics below:

  • Invoice adoption (# businesses creating 1st invoice in 1st month of trial)

  • Invoice retention (# businesses creating nth invoice in their 3rd month)

  • Payments adoption (# businesses enabling credit card payments on their account)

  • Payments enabled invoices (# invoices that were enabled to be paid by credit card)

  • Invoices paid via credit card ($ amount of invoices paid via credit card)

Goals

As the lead designer for all deliverables on this project, my most memorable contributions were:

  • Originating the invoice workflow experience

  • Creating new invoice templates

  • Creating the pseudo-morphic create / edit invoice view

  • Heavily testing layout placement and conversion of the payments toggle

My role

Product showcase

The invoice product is the main revenue driver for Wave. Business owners create and send invoices to their clients, and they get paid via credit card and direct bank payments.

Wave keeps a percentage of the payment fees, which contribute to revenue.

A user’s first experience with the product is to customize the look and feel of their first invoice.

The design challenge was to present customization options in a way that was easy to grasp, but not overwhelm the user and cause them to exit the invoice funnel.

As a point of delight, once a logo is uploaded, we automatically detect the primary color in the logo and used it as the accent color.

The invoice create interface was designed to resemble the final output of the invoice. There are header, body, and footer components that make up the entirety of the invoice document.

Each invoice has basic required information such as a customer, items, prices, and taxes. Due to the complexity of data entry, design challenges included:

• How to display multiple sales taxes on an invoice line item
• How to promote customizability and column display options
• An intuitive item picker for fast and reliable data entry

A key design decision was to keep the header and footer collapsed by default, since these elements don’t vary widely between invoices. The focus is maintained on the body of the invoice.

The copy inside the header is intentionally “Business address and contact details …”, instead of simply “Header”, to aid with discovery of features tucked away inside the collapsed state.

One of the key value propositions at Wave is that invoicing is automatically synced to accounting. Once an invoice is created, it defaults to a Draft. Drafts don’t impact the business’ books.

The design challenge was to clearly call out the status of a Draft. The yellow heading was included to draw attention, and a Learn More link is provided to explain the accounting implications.

The goal of a business owner is to get paid as soon as possible. A part of the Wave “secret sauce” was the design of an invoice workflow that gently guides a business owner through the Create - Send - Get Paid stages of the invoice lifecyle.

A user moves an invoice from steps 1 through 3, gaining confidence that they are doing the right things to get paid on time.

Because invoice payments are the main revenue driver for Wave, extra care was given to how payments were incorporated on this page.

Since invoice payments are optional, our design challenges included:

• How to nudge the user to turn on payments
• Provide status to the user that payments are on or off
• Don’t make it ‘too easy’ to turn off payments

We experimented with inserting payments as part of the invoice workflow, but this had negative effects on conversion. The best solution was a toggle in the page header. This achieved all three design goals.

The business owner is ready to send the invoice to their client, which is a point of anxiety, because the user wants to ensure their invoice is accurate and looks professional.

The design challenge was to reduce anxiety and increase send conversion by offering control over how the invoice was sent, and having a chance to preview the invoice before it is sent.

Once a business owner sends the invoice to their client, it’s time to get paid.

The user can wait to get paid by the client, but in some cases, the business owner may have their client’s credit card on file.

In an effort to increase payments conversion, the design decision was to make the primary action “Charge a Credit Card” in Step 3. This button placement also reinforces the availability of online payments, making this feature more present in users’ minds.

Once the invoice is paid, the workflow has been completed, and the user is rewarded by seeing all the steps checked off.

If there are any client follow-ups required, the business owner has options of sending receipts and editing payment details.

The feeling of being ‘done’ was an intentional outcome that created a sticky, habit forming behaviour.

This is the invoice view from the client’s perspective.

A key design decision was to use the header copy as a guiding tactic to make the client understand what they were here to do: pay the invoice.

Instead of copy like “Invoice #3”, we purposefully used “Request for Payment”.

The payment form is front and center, as opposed to being placed below or to the side of the invoice, another intentional design choice.

The design choices of the payment form are outlined in my Medium article, viewed by more than 150,000 people:

https://uxdesign.cc/the-anatomy-of-a-credit-card-payment-form-32ec0e5708bb

The invoice view was also mobile-optimized since many invoices are previewed as soon as they hit a client’s inboxe. Around 40% of invoices are viewed on a mobile device.

The design challenge here was to promote the payment of the invoice while still providing all the invoice details in an organized fashion.

The invoice items are by default collapsed to save vertical space.

One of the key considerations for a business owner is to look professional to their clients.

I designed 3 different templates that business owners can use for their invoices: Contemporary, Modern, and Classic.

Users have control over an accent color to match their own logo / brand colors.

The Contemporary design is shown on the right. The emphasis is on the business owner’s logo, and a simple design for the items table.

This is the Modern template. The main emphasis is on the primary brand color, and the logo takes a back seat by residing in the footer.

This is the Classic template. The main emphasis is on typography (a serif), and a border that makes the invoice look more official and elegant.

What users had to say