Indomaret Top Up for OVO in Grab Platform
Indomaret Top Up for OVO in Grab Platform
Indomaret Top Up for OVO in Grab Platform
A convenient top up channel for cash-oriented Grab users who don't have an OVO app installed
A convenient top up channel for cash-oriented Grab users who don't have an OVO app installed
A convenient top up channel for cash-oriented Grab users who don't have an OVO app installed
My Role
My Role
My Role
Product Designer
Product Designer
Product Designer
Responsibility
Responsibility
Responsibility
Revamp end-to-end experience, usability testing, design workshop
Revamp end-to-end experience, usability testing, design workshop
Revamp end-to-end experience, usability testing, design workshop
Timeline
Timeline
Timeline
Nov 2022 - Feb 2023
Nov 2022 - Feb 2023
Nov 2022 - Feb 2023
Project Impact
Project Impact
Project Impact
Coming soon!
Coming soon!
Coming soon!
Background
Background
Background
Grab is a popular ride-hailing app in Southeast Asia. In Indonesia, digital payment for Grab can be done with OVO, a local e-wallet. OVO was intended to be the No. 1 preferred payment method for Grab. But, cash is still the most popular payment method, covering 58% of user.
Grab is a popular ride-hailing app in Southeast Asia. In Indonesia, digital payment for Grab can be done with OVO, a local e-wallet. OVO was intended to be the No. 1 preferred payment method for Grab. But, cash is still the most popular payment method, covering 58% of user.
Grab is a popular ride-hailing app in Southeast Asia. In Indonesia, digital payment for Grab can be done with OVO, a local e-wallet. OVO was intended to be the No. 1 preferred payment method for Grab. But, cash is still the most popular payment method, covering 58% of user.
Research shows 2 barriers for their conversion to OVO:
Research shows 2 barriers for their conversion to OVO:
Research shows 2 barriers for their conversion to OVO:
Inconvenient top up channels
Inconvenient top up channels
Inconvenient top up channels
🎯 Main Focus
Lack of top up channel for: 1) non-bank users; 2) users who don’t have an OVO app.
Lack of top up channel for: 1) non-bank users; 2) users who don’t have an OVO app.
Lack of top up channel for: 1) non-bank users; 2) users who don’t have an OVO app.
Don't know where to top up
Don't know where to top up
Don't know where to top up
In Grab, not all OVO top up methods are mentioned in the instructions, only the online ones.
In Grab, not all OVO top up methods are mentioned in the instructions, only the online ones.
In Grab, not all OVO top up methods are mentioned in the instructions, only the online ones.
Deep Dive
Deep Dive
Deep Dive
"Inconvenient top up channels"
"Inconvenient top up channels"
"Inconvenient top up channels"
Most top up channels for OVO in Grab app does not support cash top up. The only channel that does (top up from Grab Driver) requires you to book a Grab Ride first. Not quite convenient.
Most top up channels for OVO in Grab app does not support cash top up. The only channel that does (top up from Grab Driver) requires you to book a Grab Ride first. Not quite convenient.
Most top up channels for OVO in Grab app does not support cash top up. The only channel that does (top up from Grab Driver) requires you to book a Grab Ride first. Not quite convenient.
In OVO app however, there are more channels for cash top up: Indomaret, Grab Driver, and Merchant/Partner.
In OVO app however, there are more channels for cash top up: Indomaret, Grab Driver, and Merchant/Partner.
In OVO app however, there are more channels for cash top up: Indomaret, Grab Driver, and Merchant/Partner.
Why does it matter?
Why does it matter?
Why does it matter?
Indomaret is the most popular cash top up channel for OVO. To top up from Indomaret, you need an OVO app installed. But, not all Grab users who use OVO have an OVO app installed. Those who didn't may not be aware of the other cash top up channels that may be convenient for them.
Indomaret is the most popular cash top up channel for OVO. To top up from Indomaret, you need an OVO app installed. But, not all Grab users who use OVO have an OVO app installed. Those who didn't may not be aware of the other cash top up channels that may be convenient for them.
Indomaret is the most popular cash top up channel for OVO. To top up from Indomaret, you need an OVO app installed. But, not all Grab users who use OVO have an OVO app installed. Those who didn't may not be aware of the other cash top up channels that may be convenient for them.
Problem Statement
Problem Statement
Problem Statement
HMW provide a convenient top-up channel for cash-oriented Grab users who don’t have an OVO app?
HMW provide a convenient top-up channel for cash-oriented Grab users who don’t have an OVO app?
HMW provide a convenient top-up channel for cash-oriented Grab users who don’t have an OVO app?
Proposed Solution
Proposed Solution
Proposed Solution
Introducing Indomaret top up for OVO in Grab
Introducing Indomaret top up for OVO in Grab
Introducing Indomaret top up for OVO in Grab
Why choose Indomaret top up?
Why choose Indomaret top up?
Why choose Indomaret top up?
🗺️
Accessibility
Accessibility
Accessibility
Indomaret is everywhere, with 18.000 stores all across Indonesia
Indomaret is everywhere, with 18.000 stores all across Indonesia
Indomaret is everywhere, with 18.000 stores all across Indonesia
📈
Performance
Performance
Performance
Indomaret top-up MTU is the highest compared to other methods
Indomaret top-up MTU is the highest compared to other methods
Indomaret top-up MTU is the highest compared to other methods
💸
Cash Option
Cash Option
Cash Option
Allows top up with cash, in order to cater cash-oriented users
Allows top up with cash, in order to cater cash-oriented users
Allows top up with cash, in order to cater cash-oriented users
Target User
Target User
Target User
Who will be using this feature?
Who will be using this feature?
Who will be using this feature?
💸 Cash-Oriented Grab Users
💸 Cash-Oriented Grab Users
💸 Cash-Oriented Grab Users
Activated OVO, but never top up/don't top up anymore
Their main source of income is in cash
Does not use mobile banking or digital card payment
Typically have low technological literacy
Activated OVO, but never top up/don't top up anymore
Their main source of income is in cash
Does not use mobile banking or digital card payment
Typically have low technological literacy
Activated OVO, but never top up/don't top up anymore
Their main source of income is in cash
Does not use mobile banking or digital card payment
Typically have low technological literacy
Design Goals
Design Goals
Design Goals
📣 Awareness
📣 Awareness
📣 Awareness
Raise Grab users’ awareness that Indomaret Top Up for OVO can now be performed within Grab app
Raise Grab users’ awareness that Indomaret Top Up for OVO can now be performed within Grab app
Raise Grab users’ awareness that Indomaret Top Up for OVO can now be performed within Grab app
🧠 Cognition
🧠 Cognition
🧠 Cognition
Design experiences that provide clarity on how to successfully perform Indomaret top up intuitively
Design experiences that provide clarity on how to successfully perform Indomaret top up intuitively
Design experiences that provide clarity on how to successfully perform Indomaret top up intuitively
🚧 Error Prevention
🚧 Error Prevention
🚧 Error Prevention
Prevent errors, both system and human, that might lead to complain
Prevent errors, both system and human, that might lead to complain
Prevent errors, both system and human, that might lead to complain
Ideation
Ideation
Ideation
Improving Indomaret top up journey
Improving Indomaret top up journey
Improving Indomaret top up journey
Treating this initiative as a revamp, we wanted to improve the overall Indomaret top up journey as well. First, let's examine how the journey would look like if we just repackage this feature with Grab design system.
Treating this initiative as a revamp, we wanted to improve the overall Indomaret top up journey as well. First, let's examine how the journey would look like if we just repackage this feature with Grab design system.
Treating this initiative as a revamp, we wanted to improve the overall Indomaret top up journey as well. First, let's examine how the journey would look like if we just repackage this feature with Grab design system.
As we can see, there are several room for improvements in the existing journey. To solve it, we proposed these solutions.
As we can see, there are several room for improvements in the existing journey. To solve it, we proposed these solutions.
As we can see, there are several room for improvements in the existing journey. To solve it, we proposed these solutions.
Incorporating those improvements into the journey, it would look something like this:
Incorporating those improvements into the journey, it would look something like this:
Incorporating those improvements into the journey, it would look something like this:
High Fidelity Design
High Fidelity Design
High Fidelity Design
Step 1
Step 1
Step 1
Accessing the feature
Accessing the feature
Accessing the feature
The Top Up page where Indomaret top up is located has low visibility. User needs to access it from the Payment page, but data shows that the page has a low traffic. Therefore, we need to promote this feature outside of Payment page.
The Top Up page where Indomaret top up is located has low visibility. User needs to access it from the Payment page, but data shows that the page has a low traffic. Therefore, we need to promote this feature outside of Payment page.
The Top Up page where Indomaret top up is located has low visibility. User needs to access it from the Payment page, but data shows that the page has a low traffic. Therefore, we need to promote this feature outside of Payment page.
💡
The goal is to ensure that users are aware that this feature exist
The goal is to ensure that users are aware that this feature exist
The goal is to ensure that users are aware that this feature exist
It is unlikely that the user would top up from Indomaret immediately after finding out about it
It is unlikely that the user would top up from Indomaret immediately after finding out about it
It is unlikely that the user would top up from Indomaret immediately after finding out about it
Due to time constraints, we could only provide discoverability using the existing Grab components. Therefore, we decided to utilize the existing promotion banner and push notifications in Grab.
Due to time constraints, we could only provide discoverability using the existing Grab components. Therefore, we decided to utilize the existing promotion banner and push notifications in Grab.
Due to time constraints, we could only provide discoverability using the existing Grab components. Therefore, we decided to utilize the existing promotion banner and push notifications in Grab.
Why did we choose this approach?
Why did we choose this approach?
Why did we choose this approach?
📢
Promotion Banner
Promotion Banner
Promotion Banner
Can be placed in Home page, where traffic is the highest
Can be placed in Home page, where traffic is the highest
Can be placed in Home page, where traffic is the highest
Can be placed in the waiting state for Grab services that are most popular (Grab Rides, Food, Express)
Can be placed in the waiting state for Grab services that are most popular (Grab Rides, Food, Express)
Can be placed in the waiting state for Grab services that are most popular (Grab Rides, Food, Express)
🔔
Push Notifications
Push Notifications
Push Notifications
16% of OVO app users find out about Indomaret top up from push notification
16% of OVO app users find out about Indomaret top up from push notification
16% of OVO app users find out about Indomaret top up from push notification
It is the 2nd largest in-app source of awareness
It is the 2nd largest in-app source of awareness
It is the 2nd largest in-app source of awareness
Now let's talk about the entry point for this feature. In the existing Top Up page, all top up channels are displayed in front. It made the page seems crowded with many irrelevant stuff for user. Therefore, we decided to categorize each channels into 4 categories: Indomaret, ATM, Internet/Mobile Banking, Grab Driver.
Now let's talk about the entry point for this feature. In the existing Top Up page, all top up channels are displayed in front. It made the page seems crowded with many irrelevant stuff for user. Therefore, we decided to categorize each channels into 4 categories: Indomaret, ATM, Internet/Mobile Banking, Grab Driver.
Now let's talk about the entry point for this feature. In the existing Top Up page, all top up channels are displayed in front. It made the page seems crowded with many irrelevant stuff for user. Therefore, we decided to categorize each channels into 4 categories: Indomaret, ATM, Internet/Mobile Banking, Grab Driver.
This categorization also highlight Indomaret top up more, making it stand out compared to other channels.
This categorization also highlight Indomaret top up more, making it stand out compared to other channels.
This categorization also highlight Indomaret top up more, making it stand out compared to other channels.
Step 2
Step 2
Step 2
Enter the top up amount
Enter the top up amount
Enter the top up amount
After selecting Indomaret top up channel, user will be asked to enter the top up amount, either manually or by clicking one of the suggested amount. This is an existing pattern in Grab, so changes for this page is limited.
After selecting Indomaret top up channel, user will be asked to enter the top up amount, either manually or by clicking one of the suggested amount. This is an existing pattern in Grab, so changes for this page is limited.
After selecting Indomaret top up channel, user will be asked to enter the top up amount, either manually or by clicking one of the suggested amount. This is an existing pattern in Grab, so changes for this page is limited.
However, we do have some concerns from the existing design. Since there's a top up fee for Indomaret, then:
However, we do have some concerns from the existing design. Since there's a top up fee for Indomaret, then:
However, we do have some concerns from the existing design. Since there's a top up fee for Indomaret, then:
Total payment (that user needs to pay in cash) = Top up amount + Top up fee
Total payment (that user needs to pay in cash) = Top up amount + Top up fee
Total payment (that user needs to pay in cash) = Top up amount + Top up fee
We wondered if the user is aware of this total payment, to avoid error handing the wrong amount of cash to the cashier. To inform the user, we decided to add 'Total Payment' besides the 'Next' button. Other than that, we include an extra step for user to confirm their transaction detail as a precautionary.
We wondered if the user is aware of this total payment, to avoid error handing the wrong amount of cash to the cashier. To inform the user, we decided to add 'Total Payment' besides the 'Next' button. Other than that, we include an extra step for user to confirm their transaction detail as a precautionary.
We wondered if the user is aware of this total payment, to avoid error handing the wrong amount of cash to the cashier. To inform the user, we decided to add 'Total Payment' besides the 'Next' button. Other than that, we include an extra step for user to confirm their transaction detail as a precautionary.
Step 3
Step 3
Step 3
Generate code and show it to the cashier
Generate code and show it to the cashier
Generate code and show it to the cashier
After confirming the top up, the system will generate a top up code that user needs to show to the cashier. In top up code page, user can edit top up amount and view instructions on how to top up.
After confirming the top up, the system will generate a top up code that user needs to show to the cashier. In top up code page, user can edit top up amount and view instructions on how to top up.
After confirming the top up, the system will generate a top up code that user needs to show to the cashier. In top up code page, user can edit top up amount and view instructions on how to top up.
We design the page differently from the existing code page in OVO app by taking out relevant instructions. This is done to make it easier for user to find the instructions, instead of searching manually from the help center. We think it's necessary since most of our users will likely be a first-time user who never top up at Indomaret.
We design the page differently from the existing code page in OVO app by taking out relevant instructions. This is done to make it easier for user to find the instructions, instead of searching manually from the help center. We think it's necessary since most of our users will likely be a first-time user who never top up at Indomaret.
We design the page differently from the existing code page in OVO app by taking out relevant instructions. This is done to make it easier for user to find the instructions, instead of searching manually from the help center. We think it's necessary since most of our users will likely be a first-time user who never top up at Indomaret.
User can generate the code from home before heading out to a nearby Indomaret. If that's the case, they are likely to close the code after generating it, then re-open it again once they arrived at Indomaret.
User can generate the code from home before heading out to a nearby Indomaret. If that's the case, they are likely to close the code after generating it, then re-open it again once they arrived at Indomaret.
User can generate the code from home before heading out to a nearby Indomaret. If that's the case, they are likely to close the code after generating it, then re-open it again once they arrived at Indomaret.
To make it easier to re-access the code, we place the entry point in locations where users are likely to visit: Activity page, Recent Transactions in Payment page, and in the Indomaret channel entry point.
To make it easier to re-access the code, we place the entry point in locations where users are likely to visit: Activity page, Recent Transactions in Payment page, and in the Indomaret channel entry point.
To make it easier to re-access the code, we place the entry point in locations where users are likely to visit: Activity page, Recent Transactions in Payment page, and in the Indomaret channel entry point.
Step 4
Step 4
Step 4
Make payment
Make payment
Make payment
After showing the code, cashier will ask user to pay for their top up. Once it's done, normally system will detect the top up as successful, then redirect user to a successful state. If user has paid but still stuck in the code page, they could trigger the page to refresh manually and be redirected to successful state.
After showing the code, cashier will ask user to pay for their top up. Once it's done, normally system will detect the top up as successful, then redirect user to a successful state. If user has paid but still stuck in the code page, they could trigger the page to refresh manually and be redirected to successful state.
After showing the code, cashier will ask user to pay for their top up. Once it's done, normally system will detect the top up as successful, then redirect user to a successful state. If user has paid but still stuck in the code page, they could trigger the page to refresh manually and be redirected to successful state.
After payment for the top up has been confirmed, there are 3 possible scenario:
After payment for the top up has been confirmed, there are 3 possible scenario:
After payment for the top up has been confirmed, there are 3 possible scenario:
Top up is successful. User's OVO balance will increase and they can find the success receipt in recent transactions.
Top up is successful. User's OVO balance will increase and they can find the success receipt in recent transactions.
Top up is successful. User's OVO balance will increase and they can find the success receipt in recent transactions.
Top up is processing. User will be informed that their top up is still processing. User can check if the status is updated by accessing the processing receipt in recent transactions.
Top up is processing. User will be informed that their top up is still processing. User can check if the status is updated by accessing the processing receipt in recent transactions.
Top up is processing. User will be informed that their top up is still processing. User can check if the status is updated by accessing the processing receipt in recent transactions.
Top up has failed. User will be informed that their top up has failed. They can check the detail of the failed top up from the receipt in recent transactions.
Top up has failed. User will be informed that their top up has failed. They can check the detail of the failed top up from the receipt in recent transactions.
Top up has failed. User will be informed that their top up has failed. They can check the detail of the failed top up from the receipt in recent transactions.
Design Validation
Design Validation
Design Validation
To validate the design, we conduct a moderated usability testing with 4 respondents who fit our target user's description. The scenario will ask the participants to: 1) generate top up code from home, 2) close the code and go to Indomaret, 3) re-access the code, 4) show the code and pay to the cashier.
To validate the design, we conduct a moderated usability testing with 4 respondents who fit our target user's description. The scenario will ask the participants to: 1) generate top up code from home, 2) close the code and go to Indomaret, 3) re-access the code, 4) show the code and pay to the cashier.
To validate the design, we conduct a moderated usability testing with 4 respondents who fit our target user's description. The scenario will ask the participants to: 1) generate top up code from home, 2) close the code and go to Indomaret, 3) re-access the code, 4) show the code and pay to the cashier.
Goals for the testing
Goals for the testing
Goals for the testing
Determine what went well and what can be improved from the happy flow
Determine what went well and what can be improved from the happy flow
Determine what went well and what can be improved from the happy flow
Determine whether the enter amount page reduce chance of user handing the wrong amount of cash to the cashier
Determine whether the enter amount page reduce chance of user handing the wrong amount of cash to the cashier
Determine whether the enter amount page reduce chance of user handing the wrong amount of cash to the cashier
Determine whether the entry point placement for the code re-access is appropriate
Determine whether the entry point placement for the code re-access is appropriate
Determine whether the entry point placement for the code re-access is appropriate
Findings from the usability testing motivates us to fix our early design.
Findings from the usability testing motivates us to fix our early design.
Findings from the usability testing motivates us to fix our early design.
Removing total payment in enter amount
Removing total payment in enter amount
Removing total payment in enter amount
Turns out, non tech savvy users don't even realize the total payment in enter amount page. They only realized about it's presence and top up fee in the confirmation.
Turns out, non tech savvy users don't even realize the total payment in enter amount page. They only realized about it's presence and top up fee in the confirmation.
Turns out, non tech savvy users don't even realize the total payment in enter amount page. They only realized about it's presence and top up fee in the confirmation.
Since it's presence does not provide any additional benefit to usability, we decided to remove it.
Since it's presence does not provide any additional benefit to usability, we decided to remove it.
Since it's presence does not provide any additional benefit to usability, we decided to remove it.
Reducing crowdedness of the code page
Reducing crowdedness of the code page
Reducing crowdedness of the code page
Reviews from both test respondents and fellow designers says that the visual for this page is text heavy and hard to focus on. It will be difficult for user to quickly scan relevant informations in this page.
Reviews from both test respondents and fellow designers says that the visual for this page is text heavy and hard to focus on. It will be difficult for user to quickly scan relevant informations in this page.
Reviews from both test respondents and fellow designers says that the visual for this page is text heavy and hard to focus on. It will be difficult for user to quickly scan relevant informations in this page.
Therefore, we decided to simplify this page by regrouping informations and use visual affordance instead. We've also highlight the relevant informations only.
Therefore, we decided to simplify this page by regrouping informations and use visual affordance instead. We've also highlight the relevant informations only.
Therefore, we decided to simplify this page by regrouping informations and use visual affordance instead. We've also highlight the relevant informations only.
Changing the manual trigger into a button
Changing the manual trigger into a button
Changing the manual trigger into a button
None of the user realized that the callout is clickable. Further deep dive shows that the behavior of similar triggers in other Indonesian apps use button approach instead.
None of the user realized that the callout is clickable. Further deep dive shows that the behavior of similar triggers in other Indonesian apps use button approach instead.
None of the user realized that the callout is clickable. Further deep dive shows that the behavior of similar triggers in other Indonesian apps use button approach instead.
Therefore, we've decided to change it into a button since it's what our users will likely be familiar with.
Therefore, we've decided to change it into a button since it's what our users will likely be familiar with.
Therefore, we've decided to change it into a button since it's what our users will likely be familiar with.
Entry point to re-access the code
Entry point to re-access the code
Entry point to re-access the code
The test result shows the order of location user perceive the entry point will be: 1) Activity page, 2) Recent Transactions in Payment page, 3) Indomaret channel entry point.
The test result shows the order of location user perceive the entry point will be: 1) Activity page, 2) Recent Transactions in Payment page, 3) Indomaret channel entry point.
The test result shows the order of location user perceive the entry point will be: 1) Activity page, 2) Recent Transactions in Payment page, 3) Indomaret channel entry point.
Although it aligned with our initial design, we can't place it in Activity page due to time constraints. Therefore, we removed it for the first phase release.
Although it aligned with our initial design, we can't place it in Activity page due to time constraints. Therefore, we removed it for the first phase release.
Although it aligned with our initial design, we can't place it in Activity page due to time constraints. Therefore, we removed it for the first phase release.
Once the changes are in place, we iteratively test the design again to ensure usability. The final testing result shows that no additional design fixes are required.
Once the changes are in place, we iteratively test the design again to ensure usability. The final testing result shows that no additional design fixes are required.
Once the changes are in place, we iteratively test the design again to ensure usability. The final testing result shows that no additional design fixes are required.
Final Design
Final Design
Final Design
Indomaret top up in Grab is done in 4 steps: access the feature, enter the top up amount, generate code and show it to the cashier, make payment. Here's how the final design look like.
Indomaret top up in Grab is done in 4 steps: access the feature, enter the top up amount, generate code and show it to the cashier, make payment. Here's how the final design look like.
Indomaret top up in Grab is done in 4 steps: access the feature, enter the top up amount, generate code and show it to the cashier, make payment. Here's how the final design look like.
The Takeaway
The Takeaway
The Takeaway
Things learned & things
to be improved
Things learned & things to be improved
Things learned & things to be improved
A large feature should be released in stages
A large feature should be released in stages
A large feature should be released in stages
Often, the development time may take more than initially predicted. Delay in release may cause the company to lose a significant revenue. Therefore, to keep up with release date, larger features are released in stages.
Often, the development time may take more than initially predicted. Delay in release may cause the company to lose a significant revenue. Therefore, to keep up with release date, larger features are released in stages.
Often, the development time may take more than initially predicted. Delay in release may cause the company to lose a significant revenue. Therefore, to keep up with release date, larger features are released in stages.
Provide user's background in design workshops
Provide user's background in design workshops
Provide user's background in design workshops
During design workshops, Grab designers questioned why we choose certain decisions in our design. What they don't understand is that the behavior of our Indonesian target user is different from in Singapore. I should've explained first our user's background.
During design workshops, Grab designers questioned why we choose certain decisions in our design. What they don't understand is that the behavior of our Indonesian target user is different from in Singapore. I should've explained first our user's background.
During design workshops, Grab designers questioned why we choose certain decisions in our design. What they don't understand is that the behavior of our Indonesian target user is different from in Singapore. I should've explained first our user's background.
Less steps does not equal to better usability
Less steps does not equal to better usability
Less steps does not equal to better usability
Less steps is often achieved at the expense of highly condensed information in a single page. Usability testing shows that it isn't the best approach in our case. It is better to have more steps to highlight each crucial information in every step for better information absorption.
Less steps is often achieved at the expense of highly condensed information in a single page. Usability testing shows that it isn't the best approach in our case. It is better to have more steps to highlight each crucial information in every step for better information absorption.
Less steps is often achieved at the expense of highly condensed information in a single page. Usability testing shows that it isn't the best approach in our case. It is better to have more steps to highlight each crucial information in every step for better information absorption.
Heading out already? 👋
Thanks for sparing your time to read my study case. Let's get in touch for opportunities!
Heading out already? 👋
Thanks for sparing your time to read my study case. Let's get in touch for opportunities!
Heading out already? 👋
Thanks for sparing your time to read my study case. Let's get in touch for opportunities!