Ben Wakefield, Digital Product Designer - Halifax, UK

Invoicer

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.

Invoicer

Background

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.

My Role

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.

The Goals

  1. Develop an simple invoicing tool for use within the Freelance / SME market
  2. Create a flexible, enterprise invoicing module capable of integration within wider ERP systems / frameworks
Approach

User Centered

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.

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, enabling us to better empathise user needs and help prioritise features.

Defining Personas
Defining Personas

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.

Primary Persona Task Tree
Stage Task 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
The Design Solution

1. Standalone App

Mindful of the requirements gathered through research, I set about sketching ideas to determine the lowest friction process.

Sketch of landing page file drag and drop
Early sketch of landing page file drag and drop

The Data

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.

XLS spreadsheet / Full Output PDF
XLS spreadsheet highlighting features

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.

The Interface

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.

Minimal interace
Drag or click to upload file

Invoicer processing
User feedback while Invoicer processes file data

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.

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.

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.

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 the 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 was 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 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.

Spend Summary
Top: Investigating user journeys, Bottom-left: Process requirements, Bottom-right: Roughing out template ideas

Once confident of the design arguments I moved forward with cross browser HTML Prototypes, which were presented to Stakeholders for feedback.

Invoice template
Invoice template

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.

PDF generated
PDF invoice generated

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


Credits

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.

Top