How We Expanded The Scope Of Use Of Our Invoices By Empowering Our Customers To Personalize Them:
Invoice Customizer (aka Invoice Templates) for Sonar Software
Project Background
Sonar defines itself as a billing software, and as such, provides it’s customers with a template for their invoices. However, this invoice template only allows the inclusion of specific data, and does not allow to customization in terms of sizing, placement, spacing, or additional content. Although it was efficient, the lack of personalization left much to be desired for our customers. Over time, we had received many complaints and suggestions about how to improve our invoice template, but making these changes proved difficult, as different customers had different needs for their invoices.
For one of Sonar’s yearly Hackathons, one of our front-end developers had identified a potential solution for the ongoing problem that we faced with the rigidity of our invoice template. Our product team saw this as a worthwhile undertaking as an actual project on our roadmap, so I began collaborating with this developer to make this dream a reality.
Above: Screenshots of the original design showcased in the Hackathon.
Project Objectives
Key Tasks & Responsibilities
Give our users a way to make their invoices look the way they want and contain the information they want.
Build a tool that will serve as a base to later implement the many customer requests we have about specific customizations.
Make this tool familiar to users, flexible, visual, and easy to use.
Allow this to support customers who manage multiple companies and want different templates, as well as customers who want different invoice templates for different groups of their customers.
Give users a way to preview their invoices based on which customer is seeing them.
Served as sole researcher and designer.
Worked with front-end developer to adapt his vision to a useable product.
Worked with other developers to better understand what was feasible for the design.
Got regular feedback from product team and developers to guide design decisions.
Assisted quality assurance and documentation teams to ensure we got everything just right.
Preparing post-release research materials in order to gauge customer response (ongoing but so far positive) and report to stakeholders.
Research
Research
Competitor Analysis
To get some inspiration, I looked at various examples of editor softwares. These kinds of editors are becoming ubiquitous, and it would be important to make sure our users had some idea of how to use this tool without having to read too much of our documentation.
Customer Feedback
As usual, I was able to pull many comments from our feedback portal that touched on specific desired features, frustrations, and improvement suggestions.
Team Feedback
Our client-facing team members were invaluable when it came to understanding the requirements for this project. They had first-hand experience dealing with our customers and hearing about their frustrations around our invoicing limitations.
Above: Example of the concept for the Insert Data Block menu, and how each block placeholder would appear on the invoice, as well as an example of what editing tools would look like for text (Company/Return Address) and image (Company Logo) data blocks.
Below are two examples of the editor changed over time. We needed to support various functions, including who the templates would be specific to (company, system language, account type, etc.), and make the editor compatible with our additional invoice settings, which will already have been configured by our current users. Some examples of these are whether a user receives an “invoice” or “statement” version of an invoice, whether their invoice includes a remittance slip at the bottom or not, and whether they have enabled a “past due stamp” to be displayed on their invoices.
Key changes from original:
Addition of Language field and multi-select for Companies
Addition of Insert/Remove page buttons and navigable pagination
Editing tools via Controls Menu
“Custom” button functionality expanded to include text and images
Addition of Undo/Redo buttons
Addition of “Attach file” button
Ideation & Iteration
Proposed Solution:
Allow users to insert “blocks” of information into their invoice templates.
“Data” blocks act as variable placeholders for data we already have in the system (eg. customer address, company logo, invoice number, etc.). These house specific information and appear or don’t depending on the Company and/or Account Type settings.
“Open” blocks allow users to insert custom text or images. These appear the same for everyone using this template.
House this feature in the same area as other tools related to invoices and contracts.
Determine which are the most important blocks to include for our first release of this feature.
Include basic editing tools like margins, a ruler, and a grid to assist with block placement.
Above: Early concepts from left to right: Controls menu, which included options for Headers; Base Templates example; Preview modal.
Key changes from previous:
Addition of Account Type field.
Addition of “Versions” tabs for users to preview how different existing settings would look on their template.
Addition of “Base Templates”, which allows users to import data from other templates (including our default, which would mirror the old invoice design) and then edit them accordingly.
Replacement of “Attach file” with "Select Invoice Attachment”. This would combine another app area with this feature.
Solution: Where We Landed
Users begin by setting up their template. This includes specifying some fields like which customers will receive their invoice with this template, as well as using the tools on the Controls Menu to help the user visualize their template. Some of these tools are more traditional, like our margins, grid, and ruler, and some more novel, like the ability to toggle on and off different views based on other settings being enabled or not (what will my template look like in “Statement Mode”, or when the “Past Due Stamp” is enabled?), and the ability to see text maximums (what’s the largest possible amount of space these variables could take up?).
How to use it.
To put it simply, as mentioned, Invoice Templates uses “blocks” to represent information on the pages of the invoice. Page 2 is always the Transactions page - which can’t be edited, and pulls the actual invoice data from the account it’s for. Page 1 is where most of the customization happens, but users can add additional pages for promotions, additional instructions, etc. Users can insert Data Blocks, which use variables to pull relevant information from the system, or Open Blocks, which allows the user the ability to insert custom text and images, and will show up the same way for every account that uses the template. For this iteration, the Data Blocks and editing options available were based on what was needed to match our current invoices, plus a few additional options requested by customers. We plan to expand the editing and Data Block options in the future based on customer interest.
Our intended workflow for these templates was to give the user the option to use our current default (what our invoices already look like) as a base, and edit them from there. Especially since they would be required to create 2 versions for every template (Remittance Slip and No Remittance Slip), this would be much less time-consuming than creating an entire template from scratch (trust me - I used this tool to re-create our default), and, based on the customer feedback that drove this project into production, most of our customers would be making small tweaks (adding, moving, and removing some pieces of information), rather than completely overhauling what their invoices looked like.
The demo below shows how to use the Base Templates to customize a template, as well as showcasing various other features, such as the Data and Open Blocks. Base Templates would also allow users to use their own templates as a base, thus allowing for cloning functionality.
Finishing touches.
We also identified a need for templates to have headers. We provided a way for users to create a customizable header, available on only the pages they saw fit.
Finally, since this template could look wildly different depending on which account or company its Data Blocks are pulling data from (eg. some companies may have only some of this data enabled for invoices, while others may have all of it), we provided a Preview option, which allows users to select an existing invoice to preview using their new template. This preview opens a PDF file in a new tab of their browser.