Invoicing

Wave

9 months (March - December 2015)

duration


  • Lead all aspects of the design

  • Came up with the invoice workflow idea

  • Created the new invoice templates

  • Created the pseudo-morphic create / edit view

  • Heavily tested placement and conversion of the payments toggle

My role


Create and send professional invoices that get paid faster

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.

[Wave User]

[Wave User]

[Wave User]

About


pain points

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


This is what the existing product looked like:

[screenshot]

[screenshot]

[screenshot]


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

Purpose, objectives, 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


Discovery and Planning

At first glance, it’s tempting to assess the size of this product as “small”, since we’re talking about three pages: invoice list, invoice create, and invoice manage. But as soon as you peel away the different layers on each page, you can spend hours down various rabbit holes of features, experiences, and interactions. 

The product manager on this team, Ehab, spent countless hours to understand our users’ needs and to distill what we were trying to design and build. Using our internal VIPER planning process, this effort led to a planning document that contained the following:

  • Pillars: These represent the "what" of a product and speak to the business focus of that product.

  • Ideologies: These represent the "how" of a product and speak to the engineering delivery of that product.

  • Experiences: Experiences provide a verbal and visual guide to how the vision of the product may be realized. 

As with everything we do at Wave, this planning process was informed by interviews with customers, feedback and requests from our support center, and internal business needs that drive our own vision for the product. 

Sad for me, I joined the team when this discovery phase had already been completed, and so I didn’t take part in this planning as much as I would’ve loved. 

Wireframing

After downloading all of the discovery and planning data into my brain, I started the design process of design / get feedback / iterate. I wireframed the first version of the invoicing product, and here’s what it looked like:

[screenshot]

[screenshot]

[screenshot]

[screenshot]

So obviously this was a rough starting point. Over the next few weeks I presented the wireframes to our design team, product team, support team, engineering team, and customers. Fast forward many iterations, I arrived at a final version 8. Here’s what that looked like: 

[screenshot]

[screenshot]

[screenshot]

[screenshot]

Along the way I learned and tweaked parts all along the experience of creating and managing invoices in Wave. Once we were happy with the final version, it was time to put together a prototype and validate the key interactions with our users.

Usability testing

The goal of usability testing is to understand how effective users are at completing a set of tasks with the prototype. I created a script that guided users through 13 different tasks. I then recruited 8 participants and scheduled individual remote sessions where we walked through the tasks together. 

Once validation testing was complete, I incorporated feedback from our users into the design and arrived at our final design specifications.

Approach


[Screenshot]

[Screenshot]

[Screenshot]

Product showcase


Response from users


We knew we had a good thing going, but how much better was it than our previous version of the product? We kept our eyes on the conversion funnels and activity with the product. After a few small iterations, bug fixes, and additional tweaks, these were the metrics 6-months post launch:

% Invoice adoption 

% Invoice retention 

% Payments adoption

% Payments enabled invoices

% Invoices paid via Payments

At the time of this writing, this product is used by more than 100,000 users each month. And since launching this product in 2014, we’ve processed over $1billion in invoice payments. So that’s f***ing awesome.

results



Product

Rahim Damji https://www.linkedin.com/in/rahimdamji/

Engineering

Nick Presta https://www.linkedin.com/in/nickpresta/

Rob van Gennip https://www.linkedin.com/in/ravangen/

Wai Chung Hon https://www.linkedin.com/in/waichunghon/

Erica Pisani https://www.linkedin.com/in/erica-pisani-5b77ab84/

Jaclyne Ooi 

Jackson Hong https://www.linkedin.com/in/jacksonhong/

Support

Zuza Tabak https://www.linkedin.com/in/zuzanna-tabak-a4679476/

Design

Gabe

[group photo]

The Team


Enter takeaways

Takeaways