Crocs-checkout flow
--
Introduction
The checkout process is the most crucial part of the e-commerce experience because it affects sales and conversion. Therefore, there are many factors which affect the abandonment rates. CROCS online shop is receiving several complaints from customers about how the checkout process page is performing bad, and it’s difficult to complete.
This post reviews and analyzes the current checkout flow on the Crocs online shop, identifies some of the most critical usability issues, and suggests improvements for the ultimate purpose of increasing revenue and ROI.
Most likely, checkout abandonments happen after the purchase decision has been made, which means there’s something in the checkout process, causing ready-to-buy customers to get frustrated and leave without making a purchase.
The checkout process starts when the customer clicks the Checkout button in the shopping cart or the shopping cart summary, or the Buy Now button.
Review and analyze
Here it comes the checkout process, as soon as the user has added the chosen item to the cart, this is the first screen which is popping up on the screen. This seems to be a detailed screen which contains some of the most important information about the product which will presumably convince the user to go on with the order.
There are already from the beginning, some issues to be identified and which could be optimized for better User experience. Let’s begin with the analysis of the current checkout process and then let’s concentrate on the possible ways of optimization.
Checkout process CROCS
When the client is in the checkout process of the crocs online shop, he/she can see some important information such as:
· Product photo
· Product name
· Price
· Color
· Size
· Quantity
· Email my cart
· Edit or Remove the product
· CTA buttons
When viewing the shopping cart, it is necessary to see a photo of the product, name, price, color, size, quantity, and taxes. Therefore, it should be easy and obvious to understand what is the final cost, including shipping. There should be no surprise costs down the line that can make people abandon carts.
Cart activity
According to a few talks I had with sworn users of online shopping, it is necessary for the user to be able to change the color and quantity, and to remove the product from the cart. This will reduce cognitive load as the user does not have to go back to the product details page to make changes.
The CTA buttons in CROCS checkout process are two as we can see. One black and a white one. Usually, CTA buttons should be in a vivid color to attract the user.
Besides, the wording of the CTA button is significant. Users sometimes are complaining because they can’t easily find the way which leads to the final purchase. With the text “continue” here, the user could feel like there are more things to see, that he will go back to the shop, that the process of the checkout is long, etc. But, how about changing the word “continue” with the words “buy now” or “go to checkout”? Don’t these little changes add clarity to the process?
The fact that the user can share this shopping cart with a friend through e-mail is worthy. Adding elements like this make the user feel important and keep their interest alive. The same is happening with the ability to remove a product or change the color.
The truth is that the project manager informed me that they are receiving several complaints from customers about how the checkout process page is performing bad and it’s difficult to complete, compared to other companies that offer the same solution.
As a UXer, I would like to identify the problems and offer a better user experience. So, changing a few small things and adding a few great importance choices would be the solution to this design problem. Let’s have a look at the things that it would be necessary to add on this stage.
Adding or changing Important information to increase conversion
· Ability to save for later- Wishlist
· Extra delivery charges
· Show total price- product price + shipping charges + taxes
· Add payment methods
· Estimated date of delivery
· Clear call to action
Add “Wishlist” feature to the shopping cart
Some users, based on experiences with competitor apps, might assume app uses persistent shopping carts in which their cart information will be stored, and upon returning to an empty cart, be too frustrated to even bother re-locating the products which result in poor conversion rate.
A “whishlist” feature can reduce the number of cart abandonments and will enable shoppers to save items for a later purchase. Persistent shopping carts will allow customers to continue their shopping without the need to search for the desired product on their return. For example, if the user bookmarks a product on Monday by saving it to cart, and returns on Sunday to purchase, she doesn’t have to locate the product again. This is a nice customer service feature that can save sales.
Add extra charges
As surprises about additional charges (shipping or payment method) are not pleasant at all, there should be somewhere on this screen the appropriate information about additional delivery cost or delivery ways and payment methods.
Add detailed price information
By separating the price details into taxes price, delivery cost, and product cost, the user feels sure and secure about the product and the money he spends.
Estimated delivery date should be mentioned on the cart screen.
Give the user an option to check the estimated date of delivery. This helps reduce anxiety as it confirms that the product is available and will reach the user well in time.
Checkout CTA
As I mentioned before, an attractive and clear CTA button could help on this design problem.
As the first stage of placing an order is ready with identifications and potential solutions, the user is ready to go on the personal details that are necessary to buy the product.
At the e-commerce crocs site now you can see a long-form to fill.
The user can see a few numbers like 1 which asks for the shipping address and 2 which asks for the shipping method. However, what the user doesn’t know is how many are these steps. He only knows that if he scrolls down. Scrolling down, in general, frustrates the user when he wants to complete a process. A solution would be to describe on the top of this page the steps that the user needs to follow to place this order. In that way, you eliminate any confusion.
At the crocs website, we can see that the user can use shipping address as billing address. Allow the customer to use the same address for shipping and billing without additional typing. In the billing step, summarize shipping address as static, editable content.
Also, we can see that crocs indicate each required field clearly with an asterisk, so the user knows what is necessary to complete.
Moreover, crocs places form labels above the input field. Usability studies show that labels placed above fields are easier and faster to scan. Labels above the input fields also make localization easier because there is more space for longer translations.
Crocs makes the error messages stand out by using thick red borders around form fields and text with an explanation below the errors. If the shopper skips a required field, display a message right away and take the user to the exact spot where the problem is because they should not discover there’s a problem after they click the call to action.
Also, the crocs website allows users to checkout as Guest by asking sign in or use the guest checkout. Guest checkout is fast and easy and customers prefer to checkout as guests. Logging in requires more commitment — and (gasp) the sharing of your personal information. Most of the consumers would abandon checkout if they thought the site creation of account needed. Once you overcome the hurdle of getting customers to start a checkout, converting the sale becomes more important than collecting data.
Delivery address form optimization
To make the checkout process easier, users should be able to fill in the form quickly without making any errors. That’s why, every step in the checkout process must not only be concise and clear, but also necessary. The form should ask for information that is required for a transaction.
Here are a few more best practices for website form usability:
Limit number of input fieldsto reduce typing effort. Fewer input fields will generate a less loaded form and will improve the UX checkout flow.
Use intelligent Auto-suggestion, Auto-detection, Address Lookup, and Errors. With auto-suggestion you make it easier and faster for users to fill out forms. The lack of speedy performance is a significant frustration for eCommerce shoppers and can severely affect conversion. Address assistance and autofill save time and reduce errors. By using zip code lookup you can autofill country, state, and city. Address lookup and validation accelerate the checkout process by reducing user load and typing errors.
Match the text inputs with the appropriate keyboard.Display a text-pad when inputting addresses and text digits, and a dial-pad when inputting phone numbers and credit cards. This will accelerate form completion and reduce user mistakes.
Automatically highlight each field up the screen when completed. Doing this will not obstruct any view of the incomplete fields.
Providing inline input validation for errorsis a best practice in mobile UX design, too. The lack of speedy performance is a significant frustration for eCommerce shoppers. This can be helped by providing users live feedback on their progress, especially when they make a careless mistake. This allows users to fix their errors immediately, which positively affects usability.
The solution
As you can see on this screen, I created a high fidelity prototype with InVision.
· I brought the menu bar on the left side of the page
· Added Wishlist, shopping cart and chat all together as a group on the right side of the page, while before, the “chat” option was placed separated in blue color
· By changing the position of all the above, I created a superficial delimitation of the shopping cart which follows below.
· I used the product photo in a bigger size, as bigger images are always attractive.
· Changed the color of the product name into the color of the product
· Added the estimated delivery time.
· Added payment methods.
· Added CTA button with vivid color and different text. The previous text was “continue”, while the text in the optimized version is “go to checkout”
· Created tiles for each of the information and placed all of the smaller tiles in a bigger light grey tile to create the illusion of a cart.
You can find the prototype from InVision if you visit the following link:
https://projects.invisionapp.com/prototype/ck0lysqi20027ru016x8hg1e4/play
References
eCommerce UX for the Mobile Experience — 推酷. https://www.tuicool.com/articles/6rE36va
eCommerce UX for the Mobile Experience | Toptal. https://www.toptal.com/designers/ux/ecommerce-ux-mobile-experience
Building the perfect UX for mobile checkout that converts. https://uxdesign.cc/building-the-perfect-ux-for-mobile-checkout-that-converts-527159ef48cd
UX for the Checkout User Flow — Salesforce Blog. https://www.salesforce.com/blog/2018/02/ux-best-practices-checkout-flow.html
