Web-based invoice solution MVP with a step-by-step and user-friendly interface for young entrepreneurs. Because creating invoices shouldn’t be tedious.

The Problem

Let’s be honest, making invoices takes a lot of time if you don’t have a template. When I started freelancing, I opted for Notion to create them so I could be more time-efficient when doing invoices. But when I exported the file as pdf, it turned out to be a mess, some files did not line up and it was just not deliverable. 

Then, I googled for a free alternative to create my invoices quickly and easily, and of course, most of the options are paid and with not-so-nice design, so I went back to creating them with Figma instead. Very time-consuming.

The Goal

To be able to make invoices from any web browser, very quick and easy and with a neutral design. The focus is on the invoice, not on the decoration! And in the future, to be able to save all my invoices in one place, so I can access them from any device at any time.

The Process

I started by testing other tools that offer similar services. Most of them tend to be not so user-friendly, forcing the user to till in all the fields instead of allowing them to customise their choices. 

Applying the fourth design heuristic, consistency, and standards, my tool won’t reinvent the wheel, so it will have a resemblance of use with Microsoft Word and Excel, which makes it much easier to adapt to this new way of creating invoices. But this is not exactly my target, but young freelancers who will create their first invoice or who have been creating invoices for a short period of time and are not experienced users of Excel, but are very familiar with entering their data into web forms and wizard setups. 

Product design

First, we identify the information that will be needed to create the invoice. In this case, we will need:

  • issuer and client information
  • invoice number
  • date of invoice issue
  • items description
  • fees
  • price
  • amount
  • company logo
  • forms of payment and comments.
userflow invoicemaker
At the moment, only the option to create an invoice will be taken.

These information fields are the ones that the user will be filling in order to generate the invoice. To make sure that the process is easy to digest, we divide it in 3 steps.

In the first step, we ask for the information data of the invoice issuer and the client.

In the next step, it is required to add the invoice number, date of issue, and due date. Here it’s also time to list the items to be invoiced with their corresponding rates and discounts.

For the last step, before generating the pdf of the invoice, it is possible to leave comments and payment methods, as well as the option to add the logo of the company issuing the invoice.

Once all the data has been filled in, and by clicking “Download invoice”, a pdf is generated which can be downloaded or printed directly.

Link to Figma prototype.

Disclaimer: This project is not a final product yet. I am currently developing it using Vue.js, Nuxtjs, and Tailwind CSS. In this case study, I try to explain the whole process enjoyably. So if you have any questions in any area that I haven’t covered and you want to know. Be free to ask me at any time through my email: