The redesign of Arrow Checkout solved merchants' and users' problems by leveraging an established design system, robust address API, and intuitive progressive design principles.
Arrow provides a checkout layer for Direct-to-Consumer (D2C) brands in Southeast Asia, mainly in Indonesia and it offers:
However, our checkout rate was far from global average
Appetite for change was low due to these factors:
To understand the problem better, we conducted an in-depth analysis of the checkout process by using a mixed method usability evaluation.
Data evaluation
Design audit
Usabilty testing
The redesign of the checkout experience comes in 4 parts
Vuetify - A vue component framework
We needed our redesign to be faster and easier due to the lack of resources. The engineering team and I set requirements for a library. It had to:
Biteship
Fetching of shipping rates requires precise matching of provincial, municipal, and postal parameters. Biteship's flexible address validation system streamlines the delivery process and ensures more accurate rate calculations.
Overwhelming form fields
By incorporating best practices, such as displaying form labels and adding margins between form fields for error and helper text, the checkout page began to look like a lengthy process, which could potentially increase drop-offs. The previous design used a more compressed version of the form fields, which sacrificed usability.
Current Design
Design exploration
User testing
We used the same parameters, requirements and tasks as before. The test result showed huge improvements on usability.
We implemented the new design on one of our merchants and saw a huge improvements in the conversion rate