A web native application converting spreadsheet costs into considered, vector based PDF invoices.
To meet non-disclosure agreements, information maybe obfuscated. Views written are my own.
Having worked with many Contractors and SMEs over the years across a range of industries, highlighted a lack of simple invoicing software which met their needs.
Accompanied by an experienced Developer, we looked to find a better solution, which could be utilised for our own projects and provided as an open resource for developers to reuse themselves.
I was responsible for research, requirements gathering, visual design and user interface (HTML5 / CSS3 / JQuery).
On integration with larger frameworks, I engaged with workflow, user journey and interactive prototypes. I managed the implementation with the development team, liaising with stakeholders to achieve the best user experience possible.
- Develop an simple invoicing tool for use within the Freelance / SME market
- Create a flexible, enterprise invoicing module capable of integration within wider ERP systems / frameworks
Speaking to customers who run their own enterprises and/or who worked within accounting departments gave us real insights into a low friction billing process for small businesses and larger organisations. Our ultimate goal was to create an elegant solution which aimed high on the User Needs Hierarchy.
Forming a pilot group of core users helped us identify typical customers. These were documented as a series of Personas, enabling us to better empathise user needs and help prioritise features.
Use Cases and Requirements
Obtaining a clearer picture of the user's mindset and motivations allowed me to create a task tree outlining activity prior, during and after invoicing. This process helped identify behavioural patterns and form the basis of the product requirements.
|Pre activity||Arrange time for activity, at home, office or remote / Find files / Communications / Resources||Cloud based, location independent / Simple interface / Minimise time to complete / Accessibility|
|During activity||Update spreadsheet data||Editable Customer Details / Codes / Refs / Descriptions / Hourly rates / Fixed amounts / Flexible column layout / Create multiple invoices per spreadsheet / Group activities per invoice based on project|
|Post activity||Double check Invoices before sending to customers||Collate, present clearly / Results intuitively accessed and saved to file|
1. Standalone App
Mindful of the requirements gathered through research, I set about sketching ideas to determine the lowest friction process.
Taking features identified from our research, we devised a test invoice template in Excel. I worked closely with our developer to build a simple prototype to test the idea before taking feedback.
Part of the simplicity of Invoicer was that it didn’t require a database, all data was held within the XLS spreadsheet itself, reducing setup time and expedited deployment.
Invoicer performed the logic used to calculate sub totals, hourly and VAT rates then outputted information onto a PDF template.
In subsequent developments dynamic vector tables were added, rendering a crisp, resolution independent document. Run-on content was carefully considered including pagination allowing invoices to reflow without limit.
I envisaged an ultra-minimal application interface, 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.
After upload 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.
In the event non-compatible files were uploaded or the XLS file was formatted incorrectly the user was prompted.
Reporting was executed on a granular level so that only a singular PDF would fail to export rather than the whole batch. Error hints were also provided to enable the user to quickly go back and fix the problem.
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 the invoice and archive or email as required.
2. ERP systems / frameworks
Integration into wider corporate frameworks was very much on a case-by-case basis. The PHP codebase made for a robust invoicing solution where dynamic PDF functionality was required.
With developing business requirements, the client periodically reviewed their web infrastructure and I was contracted to assist review, design and manage revisions of their back office systems, which serviced their UK HQ and international offices.
One aspect was to address improvements to the cost management and billing process, including 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.
Screens were initially sketched out and reviewed with the Group Project Manager; ideas were quickly iterated, adopting a fail fast and often approach.
Once confident of the design arguments I moved forward with cross browser HTML Prototypes, which were presented to Stakeholders for feedback.
On generation, line items were collated from the account's service records, including tax and account management codes. From here the invoice could be edited, printed, emailed or deleted.
Successful invoices were subsequently saved directly to the billing ledgers and financial reports.
Invoicer’s wider integration proved a great success. Customers appreciated clearer, more tailored billing and visualising the data helped communicate a wealth of information and trends both internally and when reporting back to clients.
More information on Invoicer is available on GitHub
Hats off to my fellow contributor Jon Pollard, Dev Extraordinaire, who without his help this project would never have come to fruition.
Invoicer uses Open Source components. We acknowledge and are grateful to those for their contributions to Open Source.