Making Your Checkout Process Better

Nowaday we live the 4.0 century and using technology is the importance part in our life. It’s doing a good job in our life from eating, traffic to shopping, travel. Because of convenience so many many E-commercial websites was born to serve for their bussiness.

In this article I will analys the current checkout process from the big E-commercial websites.

This article include:

• Needed elements for a checkout process
• Analysing big E-commercial websites
• Solution for the better process

A. Needed Elements For A Checkout Process

I. Form

Follow Wikipedia A form is a document with spaces (also named fields or placeholders) in which to write or select, for a series of documents with similar contents. The documents usually have the printed parts in common, except, possibly, for a serial number.

Form on Google

A Form always has 2 elements are Field Title and Place Holder Text. The first one plays the role as the question which can not change and the second one as the answer. To make the best form you can follow some rules in the article below https://uxplanet.org/the-18-must-do-principles-in-the-form-design-fe89d0127c92

II. Stepper

Stepper is just the way to show how many step user need to complete. It helps designer group the many questions in the form into each section and make user don’t feel uncomfortable when they fill the form.

Stepper from Google Material

In each stepper ussually include these elements.

• Bill Summary: This is the product summary which user choose and decided to buy.
• Customer Information: Just a form gather personal information like name, phone number, email, shipping address.
• Shipping Method: This part let user choose the way and time they want to delivery their goods, each method may have each price and the way the charge for this.
• Payment Method: Just choose the way user want to pay

B. Analysing The Big E-commercial Websites

I will analyse 3 e-commercial websites for 3 different areas. These are Ebay(UK), Amazon(US) and Lazada(Asia)

I. Ebay

I tried to buy a product on Ebay and see these points

Capture for the Ebay checkout screen

• Instead of using steppers they put all fileds and information in one page. This make the websites run slower and user will see they must to fill too much information out.
• They have 2 steps only. Login then go to fill all the text fileds and finish.
• At the login page they give user 2 option login or buy as a guess. Actually I think this is the good point. This really helpful for user who rarely use the website.
• Ebay structured the form follow the ziczac pattern and this is totally not good for form, make the form hard to read and not good for eye tracking.

II. Amazon

• As many other websites Amazon have these steppers: Login. Shipping & Payment, Gift Option and Place Order.
• Login as the required fields, user can't buy anything if they don’t login

Amazon shipping address page

• Amazon merged the shipping details and payment into one step include 3 small steps. In the first step user must fill out the shipping address and go to the address summary listing page. After choose the address for shipping user leaded to the payment page in this section user must to choose the payment method to continue but user can't go back anymore.

Amazon shipping method page

III. Lazada

Lazada is the famous E-commercial website in some asia countries. In asia we have the simple and very clean process. This is follow step by step with clean content and very optionally

Lazada Checkout Process with hided my information

• I see Lazada have the these step: Login, Shipping Details and Payment. This is independent each other.
• I can’t find any stepper here but the information still clean, easy to catch up and comfortable for users to fill out. I think the main problem is user don’t know where they are, when they complete and while we add steppers to our form it may increase 53% user complete the checkout process.

C. How To Make The Better Process

So how to have the better checkout process?

Base on what we got and my experience while used these 3 websites. I make these layouts. This design just for user who login the first time.

At the header I removed the menu, search icon and cart icon, just keep the logo and login icon because I want user just focus for their checkout process.

I divided into 3 steps: Login, Shipping Details and Payment Method. This is enought step and enought information.

In the Login page I give user 2 option login by email or via social network account. By using social network account helps user login faster by email.

Following a research on 150,000 websites there are 80% of users dislike traditional registration forms and 73% prefer to log in using their social accounts. With 51% of user login via Facebook and 26% via Google.

My design for login page

In the Shipping Details, I divided into 4 sections includes: Recipient Information, Shipping Information, Shipping Method and Order Summary.

• I designed the form follow the rules enought and needed. Just require user the basic informations which help supplier know exactly where they need to ship.
• In the Order Summary section I put the edit button for user can edit their order easily.

My design for shipping details

The last screen is the Payment Method which let user choose the way to pay for the order.

With all I wrote above I do believe that you can make your checkout process better. If you like this article or have something want to talk just comment below or send me an email via duchoa201093@gmail.com

Again Thanks for your time.