Toggl.
Turning toggl timesheets, into invoices, on the fly
How to turn invoices from a frustrating chore, into an effortless experience.
Create invoices, track payment, all in one familiar platform
Role
UIUX researcher & designer
Tools
Timeline
May - June 2022
Background
Toggl -Effortless time tracking
and reporting
Toggl, celebrating 1 million togglers, this September, is famous for its simple interface. Its greatest value lies in helping freelancers track their working hours with its easy-to-use tracking software enabling them to remain focused on one task at a time.
Problem
Invoicing is a frustrating an overwhelming chore
Toggl offers a fantastic tracking system, but creating invoices, and managing and following client payments for these tracked hours can take precious time.
​
Shuffling between apps and documents that offer solutions for invoicing,
can be cumbersome and error-prone, especially for creative freelancers who manage their own schedules.
Objective
Generate invoices directly from the Toggl tracked hours
Adding a feature to the existing timesheet data in Toggl,
to transfer the tracked hours into invoices So you don’t have to start from scratch every time you bill clients.
Tracking & invoicing -
all in one place
To enable users to stay on top of their income – view pending, paid and overdue invoices all in one place, and easily know where they stand with each client in real time.
Alerts and reminders
Forget about unpleasant collection calls – setting up automatic payment reminders to ensure clients pay on time.
Research
Market analysis
Before diving in, I conducted a thorough market analysis on existing platforms offering tracking and invoicing systems.
Time tracking platforms
Some of the platforms above offered invoicing, but not directly from the timesheet. The process was complicated, difficult to track and not customized.
While others were manager oriented and pricey for the individual or small business.
Finance and invoicing platforms
I studied these well, as many of the features offered were indeed user centred. However, there still was no option to directly collaborate with the time tracker in one place.
And others like Zoho, were so intense and complex, they were overwhelming for the sole freelancer,
Survey
Over 100 freelancers responded to an online survey which helped me empathize with these users, and understand their habits - How often they bill, what method they use for billing, and their pain points when it comes to billing and invoicing.
Billing pattern
47%
bill per fee & per hour
32%
21%
bill per set fee
bill per hour
Billing method
58%
bill manually (pen&paper/excel
42%
use a digital platform
Billing platfrom
51%
pay for a digital platform
32%
use a free digital platform
Persona
Deborah Freimark
35
20
Editor, Proofreader-Freelance
Married +4
Bio
Pain points
Self-employed proofreader and editor. Works from her home-office or coffee shop. Spends many hours in front of the screen.
Goals
As the main breadwinner, and mother of 4 she would like to maximize her screen time productively.
Increase income to be able to spend more family time.
It takes a lot of time to figure out the hours and I often make mistakes. Also, I undercharge because I lose track and am afraid to overcharge
I am organizationally challenged and terrible at math and hate filling out forms.
I want to be able to focus on my work, not my paperwork
Tech
I want to be able to focus
on my work, not my paperwork
Challenge
The pain points were analysed and mapped into three categories
01
Minimizing the
billing process
How might we minimize the billing process so that users can invoice in a seamless and effortless way?
02
Clarifying the complexity
How can we display information and process in a clear way so that its not over whelming?
03
Following up on clients
How can we provide the users with the necessary tools to track their invoices and income?
Solution
01
Turn timesheet data directly into invoices, with option to make adjustments manually, in just a few clicks
How might we minimize the billing process so that users can invoice in a seamless and effortless way?
01/01
Direct invoice button
A clear button to generate an invoice was added to the current report page - located exactly where users turn to inorder to retrieve information to transfer to the billing system.
01/02
Automatically importing information
Automate the process by importing all the information needed for the invoice.
No need to scroll all the way down to generate the invoice. Since all information is transferred precisely. The users can find a clear button at center bottom of screen and create the invoice in a matter of seconds.
01/03
The invoice is editable and manual adjustments can be made to any of the information as needed.
Manual
adjustments
option
01/04
Automatic send
No more emailing invoices, as invoices are sent as soon as they are generated, and include a permalink of the invoice.
The permalink allows clients to view the pdf online directly.
02
Displaying the information of the invoice with clarity and familiarity, to maximize user experience.
How can we display information and process in a clear way so that its not over whelming ?
02/01
Clear display & division of invoice
Clearly divided sections for each area of the invoice, Making the whole process effortless
​
Each field has clear explanation above enabling the users to understand exactly what information will appear on the invoice
​
Offering tooltips on items and forms that requires special attention.
02/02
Invoice template customization
With only one click, users access an area where they can customize their invoice outcome. Pre-designed templates and color choices maximize the user experience.
02/03
Avoiding cognitive overload
To avoid overload and keep the view as close as possible to what the user is familiar with, additional tasks and options appear only when hovering over the desired area.
03
Displaying all the information in one place so users need to know where they stand with each client in real-time, with automated payment reminders and alerts.
How can we display information and process in a clear way so that its not over whelming ?
03/01
Dashboard View
Users need to abe able to view their invoice status at a glance so they can monitor outstanding activity easily.
​
With this dashboard option, users can also preview a more detailed view of each invoice and have the ability to update the invoice status directly.
03/02
Filter & Bulk edit
The information can be adjusted to display the precise information the user requires.
The search method were base on similar behaviors from other screens so the user can search by user, date or status efficiently and in a way they are used to.
​
Tasks can be executed in bulks, by simply click of the bulk edit button.
03/03
Automated reminders
Here we nip the cause in the bud. So instead of having to send reminders upon realizing an invoice is overdue, the reminders are set already at the time when the invoice is generated!
​
Each reminder can be set to meet the specific client, and the setting can be saved for future use.
However outstanding activity will also be noted in the invoice dashboard area, to alert users of invoices that require attention
​
These alerts will also be added to toggl's main alert section. Users will be able to access the problematic invoice directly from the alert.
Useability Testing
I tested the prototype with several current toggl users.
The main points which arose and are currently being analysed for implementation
01
On the main dashboard users were missing the option to view the total amount they would be making that month, if all invoices were paid.
02
Several users also wanted a graph overview, as they have in the reports section, so they can view their entire status in a graphical way.
Future Road Map
01
Enable online payment which will automate the process further.
Invoice status will be updated automatically.
02
Developing a client area further, so that clients can view their invoices, actions, payment methods.
Takeaways
This project was a fantastic experience. I learnt how to analyse an existing design and separate its components into atoms and molecules so that I can use them to include an additional feature.
I learnt a lot about the users, their habits when billing, the methods in which they work, which opened a whole world of ideas on how to further develop this feature.