DELIVERABLES
UI/UX Design, Responsive data-driven web platform with data visualization
YEAR
2022
In 13 weeks, from brainstorming to the final product, my team and I created Billy. Billy is a web platform that allows users to generate and schedule invoices quickly, keep track of pending and overdue payments; and get an overview of the business finance through data and statistics.
PROBLEM
One of our team members is a freelance designer, and every time he gets a new project he’s frustrated with the invoicing and keeping track of the payment. Turns out, he’s not the only one who’s dealing with invoicing problems. Many freelancers also deal with invoicing problems all the time.
Creating and managing invoices manually
Many freelancers use Word, Excel, Illustrator, or other software to create invoices manually. Even though they have their template, it takes time to edit the content. The invoices are saved in their file folder and sometimes they have difficulties finding the invoices.
Scattered place to save lists of clients, projects, and price list
How to remember which project for which clients and what is the base price for similar projects? Freelancers need an all-in-one source to keep their lists to help them manage their work.
No reminder of nearing and overdue payment
Difficulties in keeping track of the payment due to a busy schedule sometimes happen. Which client is nearing the payment deadline or which client paid already? Freelancers need a reminder to keep the payment come on-time.
SOLUTION
We created Billy, a web platform where freelancers and small business owners can generate professional invoices quickly and intuitively while having control of the finances related to their business by tracking invoices and payments in a project.
FEATURES
Generate and schedule invoices quickly
Create a professional invoice in seconds, download it as a pdf and send it to the customers or schedule a recurring invoice.
Track your payment status
Update your projects and invoices page and easily keep an eye on pending and overdue payments.
Manage business income and expense
Manage all projects, clients, and invoices in one place. Get an overview of your business finance.
PERSONA
USER FLOW
WIREFRAME
My team created wireframes to help us understand the overall flow and discuss them with the developer team. Since it’s a responsive website, we realized along the way that some desktop layouts didn’t work out like we expected on the mobile and we need to change the layout slightly to accommodate the screen.
During this phase, we also did some tests and iterations to improve the user flow. We found out that some users are confused about how to access the platform and how to create the invoice.
UI Section
As UI Designer, I designed the project logo, created UI kit and illustration used in landing page, created mockup template and finalized the file. I also designed the project proposal.
Branding
The icon is the combination of letter ‘b’ and checked mark. It is to represent Billy helps things get done. A sans-serif font; Radjani Bold used to show modernity. The rounded corner on the font and the icon to convey that payment and invoice is something that is usually structured but it could be less rigid with Billy’s help.
Combinations of cool analogous colors used to represent Billy. Iris as main color and Turquoise as secondary color. Iris is the extension of blue with a hint of purple, to represent reliability, trust, creativity, and wealth. Turquoise is a friendly and cheerful color. It’s radiating the tranquility of blue, the growth of green, and the vitality of yellow.
UI Kit
Responsive Mockups
