Case study - Invoicer

Invoicer

A web native billing application, converting Excel cost data into considered, vector based PDF invoices.

Confidential information has been ommited in certain areas.

Invoicer

Background

Having worked with many Contractors and SMEs, we had identified a lack of invoicing software which met their needs.

We looked to find a better solution, which could be utilised within our commercial projects and which could be provided open source for other developers to reuse.

The Goals

  1. Leverage an enterprise level invoicing system for use within the Freelance / SME market
  2. Create a flexible, invoicing module which can be integrated into wider ERP systems / frameworks
Approach

User Centred

Speaking to customers who ran their own enterprises or who worked within accounts departments gave insights into a low friction billing process.

Our aim was to build a system which provided real functional benefits via a well considered interface.

User Needs Hierarchy
User Needs Hierarchy
Discovery

Target Audience

Forming a pilot group of core users helped us identify typical customers. These were documented as a series of Personas, giving us a better feel for our end user and helped prioritise features.

Defining Personas
Defining Personas

Having a clearer picture of user motivations and environmental factors allowed us to build use cases and develop a better understanding of behavioural patterns.

The Design Solution

1. Standalone App

Taking forward the requirements gathered, we set about sketching ideas to determine the lowest friction process. Our team worked closely to implement the designs and ensure the original goals were realised.

The Data

Part of the simplicity of Invoicer was that it didn’t require a database, all variables are held within the XLS spread sheet itself. This considerably reduced setup / deployment time to 3rd party servers.

Invoicer performed the logic used to calculate sub totals, hourly and VAT rates then catalysed the data and outputted information onto a PDF template.

XLS spreadsheet / Full Output PDF
XLS spreadsheet highlighting features

Vector tables were added dynamically, rendering a crisp, resolution independent document. Run-on content was carefully considered including pagination allowing invoices to reflow without limits.

The Interface

A minimal application interface was envisaged, not for minimalistic-aesthetic sake, purely because it didn't require any other features to distract the user. Simply drag and drop the costs spreadsheet to the landing page to process. From here Invoicer would process the file and output results to a secondary overlay screen.

For non HTML5 browsers a fallback click to browse / upload function was included.

Minimal interace
Drag or click to upload file
Invoicer processing
User feedback while processing
Review and download
Invoices presented for review and download

Error Reporting

In the event non-compatible files were uploaded or the XLS file was formatted incorrectly the user was prompted.

One particularly useful feature allowing the system to effectively scale was the creation of one invoice per worksheet. This in effect allowed Invoicer to process large volumes of data simultaneously.

Error reporting was executed on a granular level so that only a singular PDF would fail to export rather than a whole batch. Error hints were also provided to enable the user to quickly go back and fix any problems.

Error modals
Detailed Error reporting: text characters found in numeric fields

On success, users were presented with a review screen containing a list of results. Each invoice surmised by invoice number, customer, total and number of line items. This enabled the easy identification of each invoice at a glance.

From here the user was able to download each invoice and archive or email as required.

Invoicer Workflow
1. Upload costs > 2. Review results > 3. View invoice > 4. Archive
The Design Solution

2. ERP systems / frameworks

Integration into wider corporate frameworks is very much on a case-by-case basis. The PHP codebase made for a robust invoicing solution where dynamic PDF functionality was required.

Invoicer integration

Background

With developing business requirements, the client periodically reviewed their web infrastructure. We were tasked with making improvements to the cost management and billing process, including the provision of rebranded PDF invoices.

How we adapted the system

The engine behind the application could remain largely in tact, however we were required to integrate directly with the cost management process, eliminating the need for the upload interface.

Once confident of the workflow and design arguments we moved forward with cross a browser HTML prototype, which was presented to Stakeholders for feedback.

After extensive testing of the revised process and minor workflow modifications the system was approved and launched.

Invoicer’s wider deployment proved a great success. Customers appreciated clearer, more accurate billing, while workflow improvements created efficiencies for both for the Accounts and Client Services departments.

PDF generated
PDF invoice generated

More information on Invoicer is available on GitHub

top