Asos Bag and Checkout Pages- Study Case
Cart abandonment is a real problem retailer need to address since it's one of the biggest chokepoints. About 69% of e-shoppers will abandon the cart without completing the purchase. The main goal of the design team is to compel the shoppers to check out and buy the merchant. while we can not avoid organic abandonment, we can optimize some of the elements in the shopping bag and checkout page to impact and maximize conversion among the “ready to buy”, users. The UX design team is to enhance user satisfaction by improving the usability, accessibility, and efficiency of the user experience with the app, and in this case with the buying flow.
Examing the Bag Page
Before diving into the page itself. The app uses a grayscale color palette which ensures all users can use the app and will be able to read important info including color blind people. The Bottom nav bar gives me a great indication of where I am on the app. and the loading of the page was quick with the use of ghost elements. I fill it is important to indicate it because in today's market users are looking for a quick reaction and the ghost elements give the sense of “something is happening”. One of the main purposes of this kind of page is to allow the user to review his order. To help him it is important to show him a detailed summary, which what Asos does so well.
Page Breakdown
On the Top of the Page the designer chouse to place the total amount of the items and the call to action button. I believe the designer decided to have these
specific elements at the top since users are more likely to notice items near the top of the page, because of their importance. When it comes to the user, money is a huge part of decision making, so it's important to let hin now where he stands money vise. This upper menu preforms a sticky menu so as we scroll and take a look at the cart we can see how much money it will cost us, and more importantly, we’ll have quick access to the checkout page.
The checkout button
the button is large, green and always at the top right corner of the page. the choice of the color makes it stand out, as CTA buttons are supposed to be. we should see him at all times and have quick access to him. they also chose a large font to make it visible and clear. the button is large enough to press and make the action to the next step extremely easy which makes it useful.
Item Section
In every list item on this screen section, the UX team decided to have a thumbnail photo of the product, the item price, a short description, and some key pieces of information that the user can edit.
Thumbnail Picture
The use of a thumbnail photo on the bag page is for the user to see what he’s buying, he has a second chance to see that this is the item he wanted. some users use the cart/ bag page like the wish list page so it is important to let them have a second look on the items.
The Price
The Price is bold and easy to see. the user can easily detect the price. and then the description, since It’s secondary to the price.
Short description
Here the designers chouse to give us information about the color of the item, the quantity, and the size. More so they gave an option to change those parameters without the need of going back to the item page. The summary itself is required to help us build the users' confidence and increase conversion rates. They gave the user an option to easily edit the product from here instead of sanding me back to the item page or worse make him delete the item and then look for him back all over again, also helps with better conversion rates.
Checkout Page
Page Breakdown
Top Menu
In this section we can see the country to which the items will be sent, we have both the name and the flag as a visual aide. and an arrow that states that I can press it and change the delivery country if needed. if you go and try to change the country you will see they gave us a list of countries to choose from but more importantly we have a search bar that autocompletes according to our writing. autocomplete is a better use than scrolling through 200+ countries which can be agencies.
After that, we have the, “My Bag” chunk where we can see what we are buying. Clicking on it will open the, "my bag" page where we can double-check our order.
Then we have the “Promo Code” chunk. We stated before that money is a very big deal for the user so we don’t want him to search for this place. There is a good chance if he won’t find it, and he has a coupon he will leave the app without buying.
The My Bag page where I can double
check my order summary
Delivery Adress and Delivery Option
The Delivery address is saved from my previous churches which makes a great user experience because it’s time-saving. we also have a big caption that tells us where we at and what is needed here, and I have the change button in case I would like to send my order elsewhere. Again they chose a big enough button that is easy to press and also the use of the button is very clear. they didn't use the green stand out color that we saw in the “checkout” button because this is not a CTA button. We have the use of an icon on the side of the caption. The icon should describe its functionality and purpose. we can see they used a simple and familiar house icon. normally we use icons only where needed, and this is a great example for it because on this page we have several address and the house icon makes it clear this address is for your home address (usually the delivery address).
Ander this chunk we will see the Delivery option. that makes sense in the hierarchy of the page because it’s regarding the delivery address. they chouse the use of radio button. the radio button is a convention for single select options under 5 items.
Payment Section
For the payment type, Asos gave the user as default the PayPal option and of course, I can change it if I want to. The UX team chose PayPal as default because entering credit card and details are hard work for our user. It's intensive, annoying and more importantly can end in errors especially on mobile devices. also, the users don't always have their credit card and some users will fill more secure with these kinds of third party payment.
Ander the PayPal payment method we will see a hint that signal the user that they will be taken away from the app for the payment proccing before brought back to the end. this is so the user knows what will happen and won’t fear when the app will take him out.
They indicated what other credit cards are acceptable so the user won’t try to change to a credit card just to discover his type is invalid.
Last we have the payment summary. unlike the sub-total and the delivery, the total pay is highlighted with bold characters so there will be no surprises for the user.
and a big can’t miss the CTA button with the same color as always. the button also indicates that the payment will be in PayPal if the consumer hasn’t noticed.
My Design- Bag Page
I've kept the general look and fill of the page because as I stated, UX was definitely on the designer's mind.
Some changes I added anyway:
1. I’ve changed the headlines from all caps because it makes it so much harder to read especially for dyslectic people. 1 out of 5 is having some sort of disability, and this way the app is a bit more accessible to people.
2. top menu- I’ve added two new buttons to the top menu of the page. one that states your country and the other your currency. so if necessary I can change my delivery country and the currency I'm intended to pay from this page. That way if the change will create a change of my total amount I will see it here and it won’t come as a surprise on the checkout page.
I’ve also added below the total amount the cost of the shipping (in this case it’s free). shoppers do not appreciate inaccuracies or unclear prices and they may abandon the cart if they’ll discover extra fees at the checkout.
3. On the item List, I’ve added an error in red that stands out and makes it clear that this particular item doesn't ship to this country. this day on the app if an item can’t be delivered to your address you won’t find out about it till you go to the checkout page which can cause frustration and cart abandonment. The quantity button changed from dropdown to plus and minus. If I can think of a better solution then dropdown especially for mobile I will prefer it. the dropdown will take half of the screen and will saw you just a few items (numbers in this case) at a time and you most likely to make a mistake that it will make you go through the process all over again or worse it can make you order the wrong amount of items.
4. I’ve also added a new delete button to this section. I had a really hard time understanding how to delete an item or save it in my wishlist for my next purchase. finally, I’ve found out I can delete by swiping from right to left and save from left two right. two problems I had with it were that I couldn't found it and that it made me delete items by mistake. so I found this convention better. and I think when pressing the delete button it should show the user a confirm modal asking him if he is sure he wants to delete the item and have to go look for him all over again. The save option I’ve kept on the swiping from right to left, because it keeps the page clean and not overwhelming, and if the user will make a mistake saving is reversible.
5. One Other thing I’ve added for my design is the need help button at the bottom. After all the hard work some people will still need help and I don’t want to lose them at this point, I want them to fill they have a way to communicate with the app and they don't need to leave the cart and go look for help elsewhere.
My Design Checkout Page
On this page, I’ve made a few changes I felt could benefit the UX of the page.
1. You can see under the deliver to chunk I’ve added a currency chunk so if a user still wants to change the currency his using to pay he would be able to do so here and not from other places in the app ( the function is currently available inside the settings).
My Bag chunk has two changes: I’ve added the numbers of items in the bag because it felt unclear is it 6 or 7?
Also when you press on the view bag I’ve made it available for changes. In case the user still fills the need to change or erase items, he won’t have to go back.
Lastly, I’ve changed the, “Continue With PayPal”, button to a sticky bottom chunk that goes all the way with the user when he scrolls down. Since Asos keeps the users' info I don’t need to fill anything else and I want the user to have the option to quickly engage and make the purchases. also, we have here the “Need Help” button in case something wrong.
The new my bag page with the editing option