Expanding the uses case
for effective invoicing
2024
Website
Midtrans as a payment gateway always want to enable our merchants for easily collecting their money. Therefore, previously we have launched the first MVP of the feature that allows them to create & send individual invoice. On this milestone we are aiming to shorten the journey & create more effective way of doing invoice for our merchants.
Who are the users?
Midtrans users are varied from individual to enterprise businesses who might manage more than 1 merchant under them.
What is my role?
As a product designer, I took over the initial concept created by my manager. Where then, I validated further requirements & use cases, as well as finalizing the entire UI.
What are the goals?
To enable our merchant to effectively use our invoicing feature which in turn will allow us to gain more GTV generated from it.
What we are solving?
Long & ineffective ways for our merchants who have needs to create and send many invoices for their receivers.
Setting up
Requirements
Problem statement
On the first release of this invoice feature, it only allows users to create & send invoice individually. However, this approach is limiting merchants when they have to send many invoices, where they have to do it one by one. As this need expands to the capabilities of sending multiple invoices at the same time, merchant will have to be able to manage and keep track with these invoices.
High level solution
The problem statement can be addressed by allowing merchants to create multiple invoices at the same time. The most common way to do it is by utilizing CSV files as a source to input the invoices, which then will be uploaded to Midtrans to be sent to the receiver.
Jobs to be done
As merchants.
I want to be able to choose the option to create single invoice or upload multiple invoices.
So that I can easily used the feature according to my needs
As merchants.
I want to be able to see the overall summary of all invoices.
So that I can manage these invoices easily accordingly.
As merchants.
I want to easily create multiple invoices at the same time.
So that I can save more time when I have to send many invoices to the receivers.
As merchants.
I want to be able to manually mark the invoices that have posted.
So that I can accurately change the status based on it's condition.
Measuring
our success
Beside allowing Midtrans to accommodate wider use case of invoicing and shorten the journey for our merchants. For this milestone of the project, we are looking to deliver the success that can be measured by these 2 metrics below:
Increase invoice feature adoptions
Aiming for 3-5% increase from the merchants who at least created 1 invoice per month.
GTV growth generated by invoice or payment link
Gain 5-10% growth in our gross transactional value obtained from invoicing and payment link.
The current design
On the first MVP of this invoice feature, it only consist of 3 main pages. First, the invoice page which shows the list of invoices to allow merchants to easily manage it, where it should lead to the second page which is invoice details. And lastly, the invoice creation page for composing the invoice to be sent to the receiver.
The new design approaches
Since this project can be considered as improvement to our existing feature, we're planning not to do much changes and retain what we already have, then scale it from there. And, this is the initial concept explored by my manager to accommodate the needs for this milestone.
Scaling the current page
To support the multiple creation of invoices and effective way to manage it. The current main page is split into 3 main tabs to support each of the objectives and jobs to be done separately.
Adding bulk upload capability
At this point, the team decided that we will be utilizing CSV file as the method for multiple invoice creation. As this will be the simplest way where merchants will only have to fill up the CSV file (can be up to 1000 invoices per files), upload it on our dashboard, see the validation, and as it's get posted, merchant should be able to keep track with the progress easily.
Taking over the
entire project
When I took over the project, I used the initial concept as the base for me to initiate further discussions with PM and engineers. This allow me to clarify more in terms of the use cases, scenarios, limitation and how it will be implemented.
1
Before the uploaded invoices get posted, we should be able to make user that only valid invoice will be send to the receiver. hence, we should enable merchants to fix the invalid invoices first or process with only the valid ones.
2
To maintain consistency, no new status will be introduced. Hence, the invoices posted with bulk upload process, should reflect the same current status that we have for invoice, except there is no draft as invoice will immediately get posted.
Invoice is created & saved, but not posted yet.
Invoice has been posted, but is not paid yet.
The payment has been completed for the invoice.
The due date has been passed, but not expired.
Invoice has been withdrawn or cancelled.
The expire date has been passed.
3
With the proposed approach there will be challenges with:
How can we provide clear progress to build users expectation.
How can we prevent incorrect invoices get posted to the receiver.
How can we help users to recover from the error that they have on their invoices.
First UI draft
As I got more clarity on the implementation and use cases of the improvement, I used it as a base for me to begin my exploration for finalizing the user interface of it by using our existing design system for Midtrans. since limited time no ut done
Main invoice page exploration
4 different alternative of designs were explored for this page. The goals of this page are to allows users to have better access to create invoice, to have better visibility of their invoice summary in term of the count for each status, as well as allowing user to easily access the secondary page such as settings, tutorials and FAQs.
Feedbacks:
To reduce learning curve and make sure that all user can understand it easily. The most common type of graph should be used.
Colors and shape of the status count should mirror the current status tags used in invoice. And, it should accommodate all the other status that will be presented.
The empty space on each of create invoice card makes it looked like it is unfinished and it should allow users to easily differentiate between the actions.
Manage invoices
The functionality of the page will remain the same with the current invoice page where it should allow the merchants to easily find all invoices regardless if it is created individually or uploaded as a bulk, to ensure that they can effectively manage it.
Feedbacks:
The current multi selection function when it is used will replace the primary buttons on the right side of the header with related actions. But since the tabs switcher is added in between header and table, it setting the actions too far and lose its relation ship with the table. Hence, new approach for multi selection function need to be defined.
Beside that, with the current approach, there is not way to easily uncheck all the selected rows.
Bulk upload flow
To ensure correct invoices get uploaded, template is provided as a guidance. However, as we upload the file, its content of will be validated to further ensure its correctness. As the result of validations, if there is some error found, users should have flexibility to proceed or fix their error first.
Feedbacks:
To shorten the step, validation should occur automatically, but uploading & validating cannot be processed at the same time.
When the result of validation is show, the UI component should scale seamlessly and resemble its initial state. While at the same time, scalability should be considers as this bulk upload component will be used for others features in the future.
As the invoices get posted, there should be an easy way for user to differentiate each bulk upload batch.
Bulk upload history
5 different status are introduced for the bulk upload to indicate each of the processes, where it will start with "processing" as the upload is completed and the validation started. Due to our technical limitation, when it's finally get posted, 2 types of error still might occurred to some of the invoices that is shown on the details page.
Feedbacks:
The details page looks scattered with all the errors, actions and summary.
The status count should accommodate all type of status, and should resemble the current status tags for invoice.
With the error shown, there will be 2 separate actions required to resolve it.
Further information about the bulk uploads details should be visible on this page also.
Final UI design
With multiple iterations done, along with the back & forth process of gathering all the feedbacks. Finally I arrived with the final UI designs of the invoice feature improvement for this milestone.
Quicker access to create invoice and get the insights immediately
Slightly different patterns are used to fill up the space and to allow users to easily differentiate between the main actions cards of creating invoice. To reduce a new learning curve, the most common type of graph (pie chart) is used to provide users with this month invoice summary, where each status count is designed to mirror the current status tags as colored circle is used instead of other shapes.
Managing invoice with new multi selection tools
Beside allowing merchants to select any method of creating invoice from this page to shorten the steps, a new multi selection tools is introduced to enhance the experience of doing bulk actions. With this new approach, the primary actions will still be visible from where it is & the secondary actions will appears closer to the selected rows, making it more accessible to user's cursor. To ensure the flexibility of fully seeing the table's content, this tools is hovering and can be dragged to anywhere within the table.
Invoice bulk upload with automated process
To automate the process, as the CSV files is successfully uploaded. The validation process will start immediately and as it is completed a result is shown to users. If error is found within the CSV files, then a guidance is provided to help users make the correction, where the result can be downloaded and used to fix there error before it is re-uploaded again. But at the same time, users still have the option to proceed with valid invoices only. With this, multiple statuses will be introduced to each bulk upload batch, where users can save it as draft to continue anytime.
To ensure the scalability, the uploader component is designed to replicate the current form input component with slight adjustment, making it very easy to use in this kind of layout or our current form layout. And, to help user easily identify each bulk upload batch, a bulk number will be automatically generated along with upload name which by default will be derived from the CSV file's name that is still editable for their flexibility.
Manage the invoice uploads & get insights from it when it is posted
With the bulk upload history, it will be easy for users to keep track with each of the processes and make the required actions accordingly or to continue at any time. As user see the bulk upload details page, more information is provides such us the upload date, upload number, file's name and summary in term of status counts & amount collected for the whole invoices. This whole information & summary on the top is made collapsable to allow users to have full access to the table below it.
When there is an error when the upload batch get posted, instead of showing the warning and action on the top immediately, making the whole page felt scattered. Tabs switcher is used to accommodate the errors and actions needed to resolve both of the scenarios that might occur.
Impact delivered
Unfortunately, this project is not released yet as previously it was put on hold when it was about to get picked up by the engineering team, due to immediate swift in our priority of Q1 2024. Therefore, it is currently waiting to be picked up when there is enough bandwidth from the engineering team.