A web native billing application, converting Excel cost data into considered, vector based PDF invoices.
Confidential information has been ommited in certain areas.
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
Leverage an enterprise level invoicing system for use within the Freelance / SME market
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
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
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 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.
Drag or click to upload file
User feedback while processing
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.
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.
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.
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 invoice generated
More information on Invoicer is available on GitHub