InVo
Designing SaaS product for automatizing the invoicing for freelancers and small businesses
Designing SaaS product for automatizing the invoicing for freelancers and small businesses
Freelance work is a dream job of modern times… Until you get to deal with all the paperwork. It takes months to get used to filling quotes, estimates, and invoices.
Or… just a good app. InVo is a SaaS product made for automatizing all the invoicing for freelancers and small businesses.
Services
Web App design
UX / UI Design
It helps users manage both income and expenses: invoices, payments, reports. The app gives you an overview of all the financial activities related to your business.
We started with competitor’s research. There is a lot you can learn from your competitors. There’s more to it than just finding good solutions. Studying our competitors we found opportunities to create new features other apps are missing.
We went straight to reviews pages where users tell what they wish was in the app. That way we were able to get more opinions in less time, compared to interviews.
That is how the idea of a tracking timer appeared. Users reported that they wanted to automatize the time count on their invoices so that they wouldn’t have to enter manually the number of hours for each task. However, after some outlining, we realized that such a feature would overload the app. Instead, it would be handy to make an integration with popular time tracking apps, which is what we did.
A clear and comprehensive dashboard is what we wanted to make different from the competitors. InVo’s main purpose is creating invoices, but it can be used as well for finances tracking.
On the dashboard, you can see a weekly, monthly, or yearly summary of profit and loss, hours of work, and a graph of earnings. All the data is organized in appealing colored graphs. The latest invoices are shown here as well.
The full list of invoices is on the next screen. It can be filtered by client, service, category, status, and time period. The most important information, status, is highlighted with color: it is easy to differentiate throughout the long table, but at the same time light pastel colors don’t distract from other columns.
At the end of each line, there is a call-to-action button that helps manage invoices fast: send if the draft is not mailed yet, remind if the invoices haven’t been paid on time, and close if the invoice has been successfully paid.
Apart from that, there is an edit icon next to each invoice that allows making changes to entries on the list. All the other actions are hidden beneath the three dots icon in order not to overload the screen with information.
What is great about InVo is its wide range of options for customizing. It offers more than just a few standard templates: users can change colors to match their company style or their mood, as well as currency and language.
Font can be changed as well: note how we added a comment in brackets to each font. Users can give a modern, classic, or elegant vibe to their invoices even if they know very little about visual communication.
Our goal was to minimize the time that a user has to spend on boring tasks related to invoices.
When creating the invoice, a user is asked to insert standard info: dates, client info, services and prices, and so on. After filling in the information, they can choose to make the invoice recurring, and set automatic reminders if the money is not paid on time. Payments can be done online through integration with Stripe.
All the projects and clients are kept on separate lists. That way, users won’t have to enter all the data for each new invoice: they have to enter information about the client or project once, and the app will add it to a new invoice.
Next to each project on the list, the budget and hours spent are listed. That way, a freelancer can instantly see how much time they have spent and how much money they have earned on each project. Similarly with the list of clients: you can see all the basic info and then the full list of invoices sent to this client when clicking on an entry on the list.
When you want to manage all the finances, reports are essential. The fact that the document is only for you doesn’t mean that it has to look like a boring spreadsheet.
A customized well-designed report takes users to another level of freelance work. That’s why we decided to make reports customizable, just like invoices. You can choose color and font and, what is more important, you can decide which columns to include, so that the report wouldn’t be overloaded with information.
A clear and comprehensive dashboard is what we wanted to make different from the competitors. InVo’s main purpose is creating invoices, but it can be used as well for finances tracking.
Its users are more likely to be creative professionals just like ourselves. Therefore an original color palette as the one we used might appeal to them more than classical blue/green.
Muted orange, yellow, and teal are used in different intensities throughout the app. This combination gives that retro vibe and stands out of the competitors. At the same time, such colors still work according to user expectation: reddish color is intuitively perceived as spending, and blueish green — as income.
It is barely visible in the images, but the colors that seem black and grey are actually dark shades of green. The side menu is dark, but not completely black to avoid too strong contrast that is hard for the eyes.
Overall, the color scheme works on making the app look friendly and accessible for people who may not have previous experience with invoices and thus feel intimidated.
The font we chose for the app is Inter — a typeface designed specifically for interfaces. It has good legibility and works perfectly in small pieces of text.
Inter is used as the main UI typeface in Figma, the software that is mostly used nowadays for most UX design work.
A well-thought-out design can make a big difference in this regard. We started with an idea of a tool for invoice creation and ended up with an app that can handle almost all the essential financial management that a freelancer needs.
Want to find out where our designers can bring your product? Contact us!
