About the project
Gobiz is an app that is a part of Gojek that was designed to be used by our merchants from receiving order, managing their outlet to seeing previous transactions.
Previously, we have a feature called payout page where merchants are able to see & keep track with the process of their payout which is when the system transfer the money they earned to their bank account automatically everyday. However, this feature limits users to have control over when to make the pay out and see how this money is earned and used.
Hence, this project is about how we can improve this feature which will give user better control on payout process and transparency of their money.
What is my role?
As the only product designer for the project i was fully responsible for the whole designs, including creating all the users flows and user interface by using existing Gojek’s design system. However, i still got help from the UX writer and illustrator for finalizing the contents and assets.
Who are the users?
Gobiz is used by Gojek’s merchants where it can be small merchant to a big corporation. This means that our users’s age can range from around 20’s to above 45’s with low to high tech savviness.
What are the goals?
To improve the current feature to provide better control and transparency of the money merchant earned.
Who far is the scope?
Improving the feature by adapting the available UI component and design system to achieve the goals.
What we are solving?
Transparency of merchant’s earning and flexibility in controlling it.
The design processes
Setting up
initial requirements
Succes metrics
Reduce the number of complains related payout, hence reducing MCU request ticket & bad review in Playstore.
Increase MSAT score on feature completeness & reliability survey.
Increase deduction success rate.
User’s story mapping
See current balance
As the merchants
I want to be able to see the current available balance or money you have earned
So that i know how much can be withdrawn at that moment
Do payout at
any time
As the merchants
I want to i know how much can be withdrawn at that moment and be able to do payout at anytime i want
So that i can manage the money based on my preference
Do my own
reconciliation
As the merchants
I want to see detailed activities or transactions and how overall balance is calculated
So that i can do my own reconciliation at my preferred time
Understand the
new terms
As the merchants
I want to be able to understand the new terms or glossary used related to payout
So that i can understand the overall process correctly
Our current conditions
Currently, in Gobiz app there are 2 separate features where users will be able to see their outlet’s transactions which is in transaction page and process of their payout which is in payout page. At some points, these two features are are actually intersecting each other, as some of those money collected in the wallet balance are derived from those transactions.
But, there are some pain points that we could identify with this current flows which are:
The whole automated payout system provide lacks of control over when to do the payout, as merchants might have their own preference in doing it.
The total payout balance here is actually an accumulation of previous day's earning before the cutoff time. Hence, it is not updated in real time and is not representing the current earnings at the moment.
All the amounts shown in the payout pay is actually net revenue after some deduction. But they don't have visibility of what it is consist of, making it lack of transparency.
Creating wireframes
Initially based on our discussion, we were planning to combine the existing feature of transaction page and wallet page. Hence, i came out with 2 variations of wireframe to see which ideas can fit our needs better.
Combining transaction page & payout page
In this first variation of wireframe, i tried to combine between the 2 features into a single page. The idea of this is to give users a cohesive place to see their transaction/order and payout balance which is now introduced as wallet balance. As can be seen there will be 2 separate summary of wallet activities and transaction as not all transactions will contribute to the overall wallet balance.
Seperating transaction page & wallet page
Transaction page and wallet page are separated completely in this variation, where the current payout page will transform into the new wallet page containing wallet balance, wallet activities history & on demand payout capabilities. Whereas, the transaction page will serve as a place where user can transactions the orders that they have completed and recored through GoBiz app regardless the payment type.
The final wireframe
After long discussion with multiple stakeholders and team, we came out with the decision to separate between wallet and transaction functionality and only focus on the payout feature for this first iteration. This decision is based on the drawbacks and limitations that we might have as below.
❌
Transaction page will be available to some merchants only depending on which products they opted in and their location.
❌
Not all types of transactions will contribute to the overall wallet balance. Hence, make it difficult to not miss interpret each of those it both of it in the same page.
❌
Each feature is under 2 team's responsibilities, where combining it will take an effort of 2 different teams which will stretch the bandwidth even more.
Validating our solutions
As i have designed the final wireframe, i wanted to get as much feedback as possible. To do so, i involved the researcher to plan and conduct usability testing with actual users. From there, we've collected some feedbacks that let us improve our final design.
The concept of wallet balance
As we decided to keep the same technical implementation of previous payout-able earnings. User don't really get this from how the UI looks like, as they think that the list of activities is corresponding to the wallet balance above.
Therefore, users also expect as they change the filter (date, type or view), the balance amount will also change correspondingly.
Activity list & details
Users tend to only look and focus on the transaction type such as GoFood, GoPay, POS etc when doing reconciliation, compared to the transaction ID that is highlighted in the wireframe.
The activity types (payment, sales or payout) is too small that users have difficulties in differentiating it.
In the activity details for payout, users feel that the important notes is more important compared to the bank details as it will always be the same.
Filtering the activity
Users understand that these are filters, but they aware about the date or period filter only. They weren't really sure about the other 2 filters and only expect to be able to show the activity based on it's type.
That can mean that cash in and cash out filter is not something that is very important for them as it is just a bigger group of the activity type.
Payout process
Overall flow seems too easy that it only require 2 steps which can make users didn’t realize that they have requested for payout, as they consider it as an important action.
The “Important notes“ feels more crucial to give user context and understanding on the process compared to the details of amount and bank as it will alway be the same every time.
The wallet page
Based on the usability testing, we need make sure that merchants can understand this new concept of wallet. To do so, i completely separated the current balance and activities into 2 different pages, to allow merchants to not associating it together.
This main page will let the users focus on payout related stuffs only, as well as the new terms which might not be very familiar to users. Hence, the new learning curve needs to be given.
Making the payout
As initially users felt that the steps to do payout is too easy for something very important like this, another drawer is added upon confirming the payout, while at the same time it act as the reminder for users about our term and condition on the payout process.
Seeing the activities
Now, the activity type serves as the primary identifier for the activity list, and the transaction ID has been completely removed, as it is not essential for merchants' needs. However, it remains accessible from the activity details page.
The filters of 'cash in' or 'cash out' have been removed, as they represent broad groups of activity types that users may not find necessary and could potentially cause confusion. In compensation, users can now select multiple activity types through the activity type filter.
Activity details
The details page is straightforward that it only contains the information needed for each of activity type. For payout details, the important notes is also shown again to make sure that it can give better understanding to merchants.
