Designing a new top up interaction that contribute 10% GMV
Designing a new top up interaction that contribute 10% GMV
2024 • Bukalapak • Online-to-offline • 4 min read
2024 • Bukalapak • Online-to-offline • 4 min read
Overview
Overview
SmartSari is Bukalapak's online-to-offline product for the Philippines market. We aim to enhancing the livelihoods of sari-sari store owners across the Philippines by transforming their businesses with cutting-edge digital tools. With our user-friendly app, store owners can seamlessly offer a wide range of digital products and services, including e-load/credits, game vouchers, groceries, bill payments, and working capital support.
SmartSari is Bukalapak's online-to-offline product for the Philippines market. We aim to enhancing the livelihoods of sari-sari store owners across the Philippines by transforming their businesses with cutting-edge digital tools. With our user-friendly app, store owners can seamlessly offer a wide range of digital products and services, including e-load/credits, game vouchers, groceries, bill payments, and working capital support.
Executive Summary
Executive Summary
Currently, 75% of SmartSari's top-up GMV comes from the GCash channel. However, GCash incurs the highest transaction fees at 2.2%. To reduce costs and improve margins, we aim to enabling a new top-up option via QRPH (a standardized quick-response code system in the Philippines), which has lower fee.
Currently, 75% of SmartSari's top-up GMV comes from the GCash channel. However, GCash incurs the highest transaction fees at 2.2%. To reduce costs and improve margins, we aim to enabling a new top-up option via QRPH (a standardized quick-response code system in the Philippines), which has lower fee.
Results: 10% GMV / 8% increase of daily top-ups / ~35% reducing cost
Results: 10% GMV / 8% increase of daily top-ups / ~35% reducing cost
Due to some of the data & work is confidential, the following designs, numbers, text,
have been modified, blurred, or omitted on purpose.
Due to some of the data & work is confidential, the following designs, numbers, text,
have been modified, blurred, or omitted on purpose.
1
1
Context
Context
Users need to top-up using one of the available payment channels to use SmartSari. Among these channels is GCash, an e-wallet platform owned by a telco company in the Philippines. Currently, 75% of SmartSari's top-up GMV comes from the GCash channel. However, from a business perspective, GCash incurs the highest transaction fees at 2.5%.
To address this, we aim to enabling a new top-up option via QRPH (a standardized quick-response code system in the Philippines), which has a significantly lower fee at 1.5%. This shift would help reduce costs and improve profit margins while providing users with an alternative payment solution.
Users need to top-up using one of the available payment channels to use SmartSari. Among these channels is GCash, an e-wallet platform owned by a telco company in the Philippines. Currently, 75% of SmartSari's top-up GMV comes from the GCash channel. However, from a business perspective, GCash incurs the highest transaction fees at 2.5%.
To address this, we aim to enabling a new top-up option via QRPH (a standardized quick-response code system in the Philippines), which has a significantly lower fee at 1.5%. This shift would help reduce costs and improve profit margins while providing users with an alternative payment solution.
2
2
Understanding Approach
Understanding Approach
Desk Research
Desk Research
I began this process by conducting desk research on QRPH feature in the Philippines. This included observing how QR payments function in there, identifying the key information displayed within the flow, and understanding user behavior when utilizing QR payments. This includes conducting a competitive analysis of competitors
I began this process by conducting desk research on QRPH feature in the Philippines. This included observing how QR payments function in there, identifying the key information displayed within the flow, and understanding user behavior when utilizing QR payments. This includes conducting a competitive analysis of competitors
Gather Insights from Business
Gather Insights from Business
While conducting desk research, in parallel we discussed with the business team to explore the QRPH scheme. We held a series of checkpoints and threads to align and refine our findings .
While conducting desk research, in parallel we discussed with the business team to explore the QRPH scheme. We held a series of checkpoints and threads to align and refine our findings .
These discussions brought unique perspectives to the table, allowing us to exchange ideas and complement each other.
These discussions brought unique perspectives to the table, allowing us to exchange ideas and complement each other.
Flow Audit
Flow Audit
Since this project impacts one of the main flows that users are already familiar with and have an established mental model, I revisited our top-up flow. During this process, I looked for the right opportunities to seamlessly integrate QRPH.
Since this project impacts one of the main flows that users are already familiar with and have an established mental model, I revisited our top-up flow. During this process, I looked for the right opportunities to seamlessly integrate QRPH.
3
3
Ideation & Design
Ideation & Design
The Challenges
The Challenges
As previously mentioned, the majority of SmartSari users who perform top-ups are GCash users. They complete their top-ups seamlessly each day without needing to select a payment channel, as we prefill the payment channel based on their last transaction. This approach has indirectly reinforced a mental model and behavior for users who regularly top up with GCash.
As a result, there are a few considerations we need to address:
When introducing QRPH as a new payment channel, it is likely that only newly onboarded users or users looking to change their payment channel will notice it.
Since the payment channel is prefilled with their last transaction, GCash users will not see QRPH at all unless they decide to change their payment method.
The business team plans to offer cashback for users who use QRPH, so we also need to ensure that this information is clearly communicated to the users.
As previously mentioned, the majority of SmartSari users who perform top-ups are GCash users. They complete their top-ups seamlessly each day without needing to select a payment channel, as we prefill the payment channel based on their last transaction. This approach has indirectly reinforced a mental model and behavior for users who regularly top up with GCash.
As a result, there are a few considerations we need to address:
When introducing QRPH as a new payment channel, it is likely that only newly onboarded users or users looking to change their payment channel will notice it.
Since the payment channel is prefilled with their last transaction, GCash users will not see QRPH at all unless they decide to change their payment method.
The business team plans to offer cashback for users who use QRPH, so we also need to ensure that this information is clearly communicated to the users.
The Idea
The Idea
Based on the insights and challenges above, our solution approach focused on tweaking the interaction within the user flow for existing users who use GCash.
Smoothly offer QRPH into the flow to ensure minimal friction.
Dynamically inform users about the cashback offer.
Simplify the flow and make it less additional steps.
Based on the insights and challenges above, our solution approach focused on tweaking the interaction within the user flow for existing users who use GCash.
Smoothly offer QRPH into the flow to ensure minimal friction.
Dynamically inform users about the cashback offer.
Simplify the flow and make it less additional steps.
Final Design
After a series of discussions, brainstorming sessions, and design reviews, here is the final design:
After a series of discussions, brainstorming sessions, and design reviews, here is the final design:
Here are key design updates at a glance:
Adding new recommended section to the payment method list to introduce and highlight new top-up methods.
Optimizing form hints to informing and offering about QR and cashback benefits.
Adding dynamic secondary button to showing the cashback calculation and also as a shortcut to instantly switch to using QR for top-ups.
Here are key design updates at a glance:
Adding new recommended section to the payment method list to introduce and highlight new top-up methods.
Optimizing form hints to informing and offering about QR and cashback benefits.
Adding dynamic secondary button to showing the cashback calculation and also as a shortcut to instantly switch to using QR for top-ups.
4
Outcome & Takeaways
Outcome & Takeaways
After a month of release, the adoption rate has been promising. We’ve achieved a 8% increase in daily top-ups, surpassing non-GCash users by 10%, and successfully reached a 10% GMV contribution and based on our business calculations, we successfully reduced costs by ~35%.
Beyond the numbers, we've received valuable insights from the community. Users have been actively discussing the cashback feature, asking questions and showing interest in optimizing it.
Kudos from our AVP of Business SmartSari
Kudos from our AVP of Business SmartSari
Key Takeaways
Key Takeaways
We can’t maintain a seamless experience if it doesn’t contribute to revenue. So, let’s avoid bias and continue iterating.
Offering something new doesn’t always require creating entirely new. Leveraging and maximizing what already exists can be a great option—and can even have a significant impact!
You're reading the simplified process. If you'd like to learn more about the project, feel free to get in touch.
Back to home
Back to home
Let’s talk &
Get in touch.
thalhah.crdv@gmail.com
Thalhah S. Robbani © 2024
Let’s talk & Get in touch.
thalhah.crdv@gmail.com
Thalhah S. Robbani © 2024