Uplifting the checkout rate of direct-to-consumer (D2C) brands

The redesign of Arrow Checkout solved merchants' and users' problems by leveraging an established design system, robust address API, and intuitive progressive design principles.

ROLE:
Product Design
TIMELINE:
4.5 Months
CROSS-FUNCTIONS:
Product Manager
Front & Backend Engineers
Freelance Researcher
IMPACT
20.4% Uplift in conversion rate
Background

Arrow provides a checkout layer for Direct-to-Consumer (D2C) brands in Southeast Asia, mainly in Indonesia and it offers:

1
Password-less login and account creation
Arrow uses OTP to verify and provide a more convenient sign-in method
2
Fast checkout on Arrow’s network of merchants
Users can enjoy fast checkout solution on any merchants on Arrow’s network
3
Diverse payment methods relevant to market
Users can enjoy fast checkout solution on any merchants on Arrow’s network
4
Headless checkout in chat
and social spaces
Users can shop and make purchases at the point of inspiration
PROBLEM

However, our checkout rate was far from global average

The design of the checkout uses a single-page checkout design that is familiar to the markets. It has the same concept as marketplaces' apps like Tokopedia, Lazada and Shopee in their earlier years.
46.1%
Global Average *
26.4%
Our Average
* Global Average is based on Littledata.io (an e-commerce data tool)
Challenges

Appetite for change was low due to these factors:

1
Lack of resources
We were at the seed stage and there were four engineers and I supporting all business areas, including checkout, the merchant's portal, and onboarding
2
Low UX maturity
Founders were focused on acquiring merchants for growth and unaware about the reasons behind the poor checkout rate
3
The current design and build is hard to change
Implementing changes were difficult as there were no separation between the UI layer and business logic
IN-DEPTH ANALYSIS

To understand the problem better, we conducted an in-depth analysis of the checkout process by using a mixed method usability evaluation.

1
Data evaluation
Uncover where the drop-offs happens
2
Design audit
To identify potential usability issues in accordance to the 10 general principles for interaction design
3
Usability testing
Using users who represent the target audience to identify any usability issues
IN-DEPTH ANALYSIS

Data evaluation

~30%
Drop-offs at the start of the
checkout process
~37%
failure rate of fetching shipping
options due to address input
IN-DEPTH ANALYSIS

Design audit

The design audit was based on 10 key interaction design principles, revealed several significant usability problems. Here are some of the most critical issues we discovered that affected the performance of the checkout experience.
1
Inability for users to change email address
This meant they didn't get order confirmations, updates, or other key information. It made the whole buying experience much worse and could cause problems with deliveries and customer service.
2
Delivery address did not support auto-fill
The lack of auto-fill support forced users to manually type in their address. If the address didn't match any in the delivery address database, the system couldn't calculate shipping fees. This made checkout time-consuming and potentially cause drop-offs.
3
Poor error handling
Error messages were poorly placed and unhelpful. They didn't appear near the problem areas, explain what went wrong, or provide guidance to fix issues.
IN-DEPTH ANALYSIS

Usabilty testing

We recruited 10 participants in Jakarta for the test. They were to make a purchase with their own personal details and repeat the purchase again as a returning users.
WHAT USERS MENTIONED
1
Delivery address
Unable to locate the delivery address was the sole reason for the failure to complete the checkout process. Jakarta is a Tier 1 city; hence, it is safe to conclude that users from cities in lower tiers are likely to face a higher rate of failure.
2
Returning user experience
Participants felt that the OTP screen appeared suddenly as a returning user after entering their mobile number, making them feel that a payment was about to go through.
3
Lack of summary page
We noticed that participants spent a considerable amount of time scrolling through the form to review their entries before proceeding with payment.”
USER TESTING RESULTS
60%
Completion Rate
158s
Average Time Taken
40%
Error Rate on Address
PROBLEM STATEMENT

How might we design an efficient and effective checkout experience, that increases both satisfaction and completion rates?

Design

The redesign of the checkout experience comes in 4 parts

1
UI and front-end library
2
Delivery address API
3
Progressive disclosure design
4
Usability testing
UI & Front-end library

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:


1
Run on Vue3.js
2
Have a strong user base and community for support
3
Be theme-able to match our branding
4
Based on good design principles
DELIVERY address api

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.

Delivery address API
Option 1: Auto-fill
With better accuracy mapping, users can have their addresses auto-filled and have the chances of committing an 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 restrictions is a form of error prevention.
PROGRESSIVE DISCLOSURE

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

Progressive disclosure
To overcome this, we used progressive disclosure by presenting only the actions required to move forward, thereby making it easy for users to complete tasks while minimising error rates.
login / sign up flow
DISPLAYING ONLY WHAT IS REQUIRED TO REDUCE COGNITIVE LOAD
CHECKOUT FLOW WITH PROGRESSIVE DISCLOSURE DESIGN
USABILITY TESTING

User testing

We used the same parameters, requirements and tasks as before. The test result showed huge improvements on usability.

100%
Completion Rate
↗ 40%
98s
Average Time Taken
↗ 62%
0
Error Rate on Address
↗ 40%
Iteration
We made changes to the design based on feedbacks
Highlighting the cheapest shipping option
Indicate clearly that user is signed in
and a clear way to sign out
IMPACT

We implemented the new design on one of our merchants and saw a huge improvements in the conversion rate

47.2%
Our New Average
26.4%
Previous Average
46.1%
Global Average