In order to support booming international business, various shipping, billing and customs modules were added to existing checkout flow without an in-depth plan. Choosing a value shipping method, figuring out customs rules, and managing products have become challenges before international users could press the "Place Order" button. It's not only lowering the conversion rate but also causing maintenance problems. In Sept. 2018, we redesigned the entire checkout flow making it a simple, helpful and controllable experience. We firstly rolled out the new design in Dec. 2018 in China and the conversion rate increased by 14% in average.
Below is the 1st version prototype, more iterations and details in following paragraphs.
64% of our customers are female and the age falls between 25-44.
70% are international orders.
Rich selections is the No. 1 reason why shopping at iHerb.
Current experience is lacking...
Consistency
Navigation labeling is confusng. Also, it's hard to enter and amend information precisely and quickly.
Guidance
Users need to figure out customs rules and fill out forms on different sites with little instructions. General and technical error messages create breaking points during checkout.
Customer confidence
Not be able to review shopping information until the last step and difficult to manage personal information.
Core design concepts
Simple mobile friendly and consistent
Be helpful, we do all the heavy lifting.
Giving control over the process to users.
Design Focus
Always Be Informed
Getting lost in checkout journey due to amending order and no shopping context until reviewing order are 2 most frustrating factors causing checkout abandonment. We designed an one-page interaction model which always presents all steps and information on screen.
iHerb checkout information architecture
One-page checkout landing screen
Shipping address module
Shipping method module
Payment selection module
Customer ID module
Orders module
Building Consistency
Create iHerb UI library
Collect and trace all used logos in SVG formart
Quick and Localized Address Input
Except for properly translating all input labels and combining first and last name fields (Chinese names put last name first and don't separate them when writing.). We adopted this commonly seen UX pattern in China to help our customers quickly and percisely fill out their addresses.
Province selection
District / city selection
Quick selection done
Easy Customs Clearance
In the past, Chinese customers need to finish few forms on both carrier's and government's websites before we could ship out their orders. We integrated all APIs in the back-end and simplified information requests at front-end. Now, customers only need to enter their ID information during checkout and we can ship out their orders. Besides, they are able to view all shipping and customs rule details when making a shipping method selection.
Shipping methods with info icons
Shipping / customs rule details
Simple customer ID input
Product Adjustments & Error Handling
Due to government rules, some items are not shippable or have quantity limit. We didn't explain this clearly to our users why they couldn't proceed. The worst was they had to exit checkout to make product adjustments. We refined all error messages to provide clear reasons and instructions. In addition, we added an order module that allows customers to make necessary product adjustments during checkout.
Conversational error message
Order module
Remove product confirmation
Outcome & Thoughts
I am very proud of that we conquered all design challenges and made it happen in 3 weeks. We launched the new Chinese checkout in Dec 2018 and the results during the following 3 month testing are encouraging:
The conversion rate increased 14% in average.
Customer service requests for checkout help decreased by 20%.
Checkout time spent was 15% shorter.
There is still a lot of room for improvement. For example, credit card scanning and voice data input to speed up data entry. Also, further iterations for customs clearance is needed.
