UNIQLO: Cart Abandonment
UNIQLO: Cart Abandonment
Introduction Cart Abandonment
Introduction Cart Abandonment
According to the Baymard Institute, a leading UX audit organization that has been recognized and works closely with well-known technology companies such as Google, conducted a survey in 2022 that there are many factors that can influence users not to checkout, here is the data:
According to the Baymard Institute, a leading UX audit organization that has been recognized and works closely with well-known technology companies such as Google, conducted a survey in 2022 that there are many factors that can influence users not to checkout, here is the data:
From the top 10 reasons why users do not checkout, the author took 5 reasons for this design test. The 5 reasons that the author took to be used as design test material this time are:
Extra cost too high
Create Account First
I didn't trust the site with my credit information
Complicated Checkout Process
There weren't enough payment methods
From the top 10 reasons why users do not checkout, the author took 5 reasons for this design test. The 5 reasons that the author took to be used as design test material this time are:
Extra cost too high
Create Account First
I didn't trust the site with my credit information
Complicated Checkout Process
There weren't enough payment methods
Let's Start
Let's Start
The author takes a well-known retail company that is now also engaged in the digital world (E-Commerce), namely UNIQLO. The author only dissects UNIQLO Indonesia with a desktop or website platform.
The author takes a well-known retail company that is now also engaged in the digital world (E-Commerce), namely UNIQLO. The author only dissects UNIQLO Indonesia with a desktop or website platform.
As Is Design
As Is Design
Userflow & Wireflow
Userflow & Wireflow
The current user flow at UNIQLO Indonesia
The current user flow at UNIQLO Indonesia
When looking at the userflow above, there are 3 conclusions that can be drawn:
There are still many distractions given when the user adds products to the cart and when the user checks out by giving the continue shopping option.
Users cannot checkout products when they are not logged in.
Users must put items into the cart first, before checkout.
When looking at the userflow above, there are 3 conclusions that can be drawn:
There are still many distractions given when the user adds products to the cart and when the user checks out by giving the continue shopping option.
Users cannot checkout products when they are not logged in.
Users must put items into the cart first, before checkout.
Proposed Design (To-Be)
Proposed Design (To-Be)
Let's discuss one by one what the author proposes for improvement from the user flow to the design side. Let's go.
Let's discuss one by one what the author proposes for improvement from the user flow to the design side. Let's go.
Looking at the current userflow, there are several flows that can cause users to fail and get bored to checkout. With that, the author proposes the latest userflow as follows:
Looking at the current userflow, there are several flows that can cause users to fail and get bored to checkout. With that, the author proposes the latest userflow as follows:
The proposed new user flow is to provide the following options:
Reduce user distraction to go directly to the final destination, checkout of goods.
Provide convenience for users to checkout directly without having to put it in the basket first.
Giving users the freedom to checkout items without logging in or registering first.
Now let's talk about the design. All the changes in the design are based on the results of desk research through the Medium platform and UX auditors, Baymard Institute. Let's go through it, let's go!
The proposed new user flow is to provide the following options:
Reduce user distraction to go directly to the final destination, checkout of goods.
Provide convenience for users to checkout directly without having to put it in the basket first.
Giving users the freedom to checkout items without logging in or registering first.
Now let's talk about the design. All the changes in the design are based on the results of desk research through the Medium platform and UX auditors, Baymard Institute. Let's go through it, let's go!
Design
Design
Search Input
Search Input
As an E-commerce, the feature that people use the most is search. Therefore, the author changed the search input to be more obvius when users open the UNIQLO page for the first time.
As an E-commerce, the feature that people use the most is search. Therefore, the author changed the search input to be more obvius when users open the UNIQLO page for the first time.
Item Detail Page
Item Detail Page
Some of the things that the author changed in the design of the product detail page:
Provide a 'Buy Now' button for users to checkout without having to put items in the cart. This is related to one of the causes of cart abandonment, namely the 'complicated checkout process'.
Provide information that this item at this price includes VAT, so that users are not surprised when they want to checkout when there is an additional price. This is related to one of the causes of Cart Abandonment, namely 'Extra cost too high'.
Consider Above the fold to display all the things that make it easier for users without having to scroll down the website page, such as the add cart button, buy now button, select color, size and quantity.
Change the input for quality, from dropdown to counter input. This aims to ensure users can quickly change the desired quantity and proceed to their main goal, which is checkout - Baymard Institute
Some of the things that the author changed in the design of the product detail page:
Provide a 'Buy Now' button for users to checkout without having to put items in the cart. This is related to one of the causes of cart abandonment, namely the 'complicated checkout process'.
Provide information that this item at this price includes VAT, so that users are not surprised when they want to checkout when there is an additional price. This is related to one of the causes of Cart Abandonment, namely 'Extra cost too high'.
Consider Above the fold to display all the things that make it easier for users without having to scroll down the website page, such as the add cart button, buy now button, select color, size and quantity.
Change the input for quality, from dropdown to counter input. This aims to ensure users can quickly change the desired quantity and proceed to their main goal, which is checkout - Baymard Institute
Modal Added Product to Cart
The author removes the 'Lanjut Belanja' button to minimize distraction from the user's goal to checkout items. Also provide images, product names and prices of items that have been added to the cart.
The author removes the 'Lanjut Belanja' button to minimize distraction from the user's goal to checkout items. Also provide images, product names and prices of items that have been added to the cart.
Cart Page
The author considered 2 things in the new design of the cart page:
Pay attention to the above the fold of the cart page. When the user opens this page, the user can immediately see the 'continue payment' button.
Change the input for quality, from dropdown to counter input. This aims to ensure users can quickly change the desired quantity and proceed to their main goal, which is checkout - Baymard Institute
The author considered 2 things in the new design of the cart page:
Pay attention to the above the fold of the cart page. When the user opens this page, the user can immediately see the 'continue payment' button.
Change the input for quality, from dropdown to counter input. This aims to ensure users can quickly change the desired quantity and proceed to their main goal, which is checkout - Baymard Institute
Allow Checkout Without Create an Account
Order number 2 according to Baymard Insitute (2022), why people ignore or do not continue to checkout items is that they are asked to log in or create an account first.
Therefore, the author provides an option for users to be able to checkout without having to log in or register an account.
Order number 2 according to Baymard Insitute (2022), why people ignore or do not continue to checkout items is that they are asked to log in or create an account first.
Therefore, the author provides an option for users to be able to checkout without having to log in or register an account.
Login Form
The author provides options for users to log in through several social media, such as Facebook and login. To make it easier for users if they want to log in first before they checkout.
This is also one way if the user must be required to log in first before checking out.
The author provides options for users to log in through several social media, such as Facebook and login. To make it easier for users if they want to log in first before they checkout.
This is also one way if the user must be required to log in first before checking out.
Register Form
The author realizes that not everyone who registers will checkout or buy an item. Other information such as date of birth, gender and others are optional and can be filled in when the user has entered the system. Therefore, the author summarizes the registration form into only 3, email, password, and full name.
Do not forget to also provide convenience to be able to register using social media accounts such as, google, and facebook.
The author realizes that not everyone who registers will checkout or buy an item. Other information such as date of birth, gender and others are optional and can be filled in when the user has entered the system. Therefore, the author summarizes the registration form into only 3, email, password, and full name.
Do not forget to also provide convenience to be able to register using social media accounts such as, google, and facebook.
Checkout Page
Let's first take a look at UNIQLO's existing checkout page.
Let's first take a look at UNIQLO's existing checkout page.
From the design above, the author feels that there are still many distractions that can interfere with users to checkout, starting from the search feature, navigation, to the footer. So the author eliminates it all to make users more focused on doing checkout.
From the design above, the author feels that there are still many distractions that can interfere with users to checkout, starting from the search feature, navigation, to the footer. So the author eliminates it all to make users more focused on doing checkout.
Now, le'ts break it down for each page and the processes.
Now, le'ts break it down for each page and the processes.
Customer Information
The current page has too many forms, which makes the checkout process complicated for users. So, the author created a new design with the following improvements:
Combined the 'First Name' and 'Last Name' fields into a single 'Full Name' field.
Used auto-detection for the Postal Code, so users don't need to enter the province, city, or district manually.
The promo code field is hidden by default to avoid distracting users from filling out the form first.
Instead of showing how fast the delivery is, it's better to show the estimated date the item will arrive.
The current page has too many forms, which makes the checkout process complicated for users. So, the author created a new design with the following improvements:
Combined the 'First Name' and 'Last Name' fields into a single 'Full Name' field.
Used auto-detection for the Postal Code, so users don't need to enter the province, city, or district manually.
The promo code field is hidden by default to avoid distracting users from filling out the form first.
Instead of showing how fast the delivery is, it's better to show the estimated date the item will arrive.
Otherwise, the author created 3 state for Customer Information page.
Otherwise, the author created 3 state for Customer Information page.
Image 1 (look from left to the right). When user doing guest checkout or checkout without login.
Image 2. When user has logged in to checkout for the first time in website, or user already not yet fill Information Address form
Image 3. When user has logged in and already checked out
Image 1 (look from left to the right). When user doing guest checkout or checkout without login.
Image 2. When user has logged in to checkout for the first time in website, or user already not yet fill Information Address form
Image 3. When user has logged in and already checked out
Payment Method
It turns out that the two reasons why Cart Abandonment occurs are related to the payment method.
Not enough payment methods are offered
The use of credit cards is very sensitive, especially about security. Users often think 'is this website safe, if I use a credit card payment system?'
To answer these two reasons, the author created a design like the image on the right below.
It turns out that the two reasons why Cart Abandonment occurs are related to the payment method.
Not enough payment methods are offered
The use of credit cards is very sensitive, especially about security. Users often think 'is this website safe, if I use a credit card payment system?'
To answer these two reasons, the author created a design like the image on the right below.
The fact is, user can be trust the payment system from a website with attach several logo from several service providers in the security department (payment), especially in credit card.There is data on user trust in logos when making payments using credit cards.
The fact is, user can be trust the payment system from a website with attach several logo from several service providers in the security department (payment), especially in credit card.There is data on user trust in logos when making payments using credit cards.
Besides, there are several factor that must be considered when create form to input credit card data.
Besides, there are several factor that must be considered when create form to input credit card data.
Provide luhn validation so that users can immediately know that the credit card they input cannot be used.
Provide auto format spacing of 4 numbers when inputting credit card numbers.
Provide auto detection when users input their credit card number and remove credit card icons or logos (visa, master card, etc) so that there is no misunderstanding that the logo or icon can be selected.
The information architecture of the form for credit card input should match that of a typical physical credit card.
Provide luhn validation so that users can immediately know that the credit card they input cannot be used.
Provide auto format spacing of 4 numbers when inputting credit card numbers.
Provide auto detection when users input their credit card number and remove credit card icons or logos (visa, master card, etc) so that there is no misunderstanding that the logo or icon can be selected.
The information architecture of the form for credit card input should match that of a typical physical credit card.
Summary Checkout
It's good that before the user actually checks out, the user is given the last step, namely the Order Summary of the order to be paid. The author provides a few changes for this page, including:
Display a button to continue payment Above the fold, so that users don't have to bother scrolling down.
Eliminate all distractions so that users focus on continuing the item checkout process.
And finally we arrive at the last page of the checkout process,
It's good that before the user actually checks out, the user is given the last step, namely the Order Summary of the order to be paid. The author provides a few changes for this page, including:
Display a button to continue payment Above the fold, so that users don't have to bother scrolling down.
Eliminate all distractions so that users focus on continuing the item checkout process.
And finally we arrive at the last page of the checkout process,
Thank You Page
There are not many changes on this page, but the author only makes the current design more concise and dense but still looks simple, so users don't need to scroll too far.
There are not many changes on this page, but the author only makes the current design more concise and dense but still looks simple, so users don't need to scroll too far.
Summary and Closing
The scope for this case study is limited only in website desktop, meanwhile for mobile version also can be following with some adjustment
The scope for this case study is limited only in website desktop, meanwhile for mobile version also can be following with some adjustment
Thank you for reading and have a nice day! 😎🤙
Thank you for reading and have a nice day! 😎🤙