Arrow Checkout
Uplifting the checkout rate of direct-to-consumer brands in Indonesia
Timeline
Q4 2022 - Q1 2023
Scope
Product Design • Research • Design System
Arrow runs the checkout layer for D2C brands across SEA, mainly in Indonesia. It gives merchants a localised checkout experience with password-less login, hyperlocal payment methods, and a headless checkout that works wherever shoppers prefer to buy.
Merchant base was growing. What wasn't growing was conversion rate. I led the redesign by leveraging on an established design system, robust address API, and sound design principles.
What did we achieve?
Checkout rate increased to
47.2%
From 26.4%
Avg. time taken reduced to
98s
From 158s
Preview
Why did we redesign the checkout experience?
The previous checkout used a single-page checkout design that was familiar to users. It has the same concept as marketplaces' apps like Tokopedia, Lazada and Shopee in its earlier years.
However, our checkout rate was almost half the global average.
The data pointed to one place. The address input
Looking at the data, roughly 37% did not pass through the address input. We reached out to 8 users who had dropped off. Every single one gave the same reason. The system failed to load shipping options.
37%
Drop-off
The design audit revealed why. The checkout relied on manual address entry with no auto-fill. Google Maps that was used for address lookup wasn't well supported in Indonesian cities. If a user typed an address that didn't match the delivery database exactly, shipping fees couldn't load. The form will just fail.
10 participants. One consistent finding.
We recruited 10 participants in Jakarta for user testing. They were to make a purchase using their own personal details.

One question that kept coming up was why can't I use the address that I use everywhere else?
Completion Rate
60%
Average Time
158s
Failure Rate on Address
40%
Two problems to solve
The usability testing and data evaluation pointed to two distinct problems that needed addressing in parallel.
How might we help shoppers...
Reduce failure rates on address lookup?
Recover from errors when it occur?
Feel confident when checking out with Arrow?
How we might help engineers...
Uncouple the business and UI logic?
Implement changes easily?
Cut development time due to lack of resource?
The solution had to fix both layers at once
Biteship address API
Replaced Google Maps with Biteship that is built for Indonesian logistics, with accurate auto-fill and provincial/city/district matching.
Vuetify front-end library
Runs on Vue3 and it matches engineering requirements. It is themeable with good components. Separated UI from business logic so changes could be shipped fast.
With the new address API, users have 2 options
Option 1: Auto-fill
‍With better accuracy mapping, users can have their addresses auto-filled and the chances of committing error significantly reduced.
Option 2: Manual entry with guidance
User can input delivery address by using appropriate options that correspond with one another. This purposeful restriction is a form of error prevention.
Introduced progressive disclosure design
By incorporating best practices, such as displaying form labels and adding margins between form fields for errors and helper text, the checkout page began to look like a lengthy process, which could potentially increase drop-offs. To mitigate this, we reveal information and functionality gradually, showing users only what is necessary at a given moment.
Inline progressive disclosure checkout flow
User testing
We used the same parameters, requirements and tasks as before. The test result showed huge improvements on usability.
Completion Rate
100%
↗ 40%
Average Time
98s
↗ 62%
Failure Rate on Address
0%
↗ 40%
We implemented the new design and we saw a huge improvement on the checkout conversion rate
Previous Average
26.4%
Our New Average
47.2%
About Me

I sailed on an oil tanker at 19, became a cook and somehow ended up as a product designer. The through-line, if there is one, is that I've always been more interested in how things actually work than how they look like they work.

I build things with my hands when I'm not designing. It's taught me that good craft isn't about the visible surface, it's about the decisions underneath it that nobody ever sees but everyone feels.

I bring the same thinking to interfaces. Designs that are intentional, patterns that don't need to be relearned and conversations between people and machines that feel like they were thought through rather bolted on together.

WORK EXPERIENCE
UR
Aug 2025 - Present
Product Design Lead
PropertyGuru
Aug 2024 - Jun 2025
Sr Product Designer
Arrow (YC21)
Apr 2022 - Aug 2024
Product Design Lead
View Full CV
© 2026 Haikel Zaini