Mobile Apps

The Ultimate Guide to Mobile App Design Chapter 4: Shopping Cart

Continued from Chapter 3: Product Catalog & Customer Account >>

Shopping Cart

Cart abandonment remains the no.1 problem for online retailers. A high cart abandonment rate signals a poor user experience, especially on mobile. Optimizing mobile cart page is among the core areas of focus for most brands to resolve this issue and maximize mobile revenue. 

17. Allow users to edit cart items

The ability to edit items directly from the cart is critical for users at the point of conversion. Allow users to easily and efficiently change quantities, delete cart items so they don’t have to go back in the purchasing flow to adjust items to their preference.

Allow users to edit cart items
✖ Users become frustrated if they can not adjust the item quantity while reviewing order details.
✓ Users can make corrections easily from the cart using quantity selector or delete unwanted items.

18. Show users checkout is secured 

Security is among the top concerns for online shoppers – especially when it comes to sharing their personal information and financial credentials during the checkout process. Ensure that the app follow modern data security measures and visually reassure the users that their information will be transmitted securely.  Add a security icon to the checkout button is a great way to give users more confidence to proceed.

Show users checkout is secured
✖ There is no visual security indicator to show that in-app transactions are secure.
✓ The presence of a security icon provides assurance that the app protect users’ privacy.

19. Simplify the cart page header

The more distracted a shopper is during checkout, the less likely they are to complete checkout. To eliminate unnecessary distractions from checkout, minimizing the number of elements in the cart header can increase the likelihood of completed purchases. Simplifying the cart header is the key to create the easiest path for user to either proceed to checkout or continue shopping. Remove all elements not directly related to the checkout process or continue shopping experience to create a simplified view.

✖ Multiple items in the cart header can create unnecessary distractions during checkout.
✓ A simplified cart header keep users focused towards checkout path or quickly go back to shopping.

20. Enable cart auto-update

A growing number of ecommerce stores has implemented automatic cart update to reduce the manual steps users have to take as they make changes to the cart. Automatically updating cart items help providing real-time feedback to the users at all times. The improvement in cart update can elevate the shopping experience and ultimately increase conversion and sales.

Enable cart auto-update
✖ Users have to hit the update shopping cart button every time they make a change to the cart items.
✓ Automatically refresh cart grand total when users change the quantity of items in their cart.

21. Remove continue shopping button from the cart page

Often displayed near the critical call to action on the cart page, the continue shopping button takes up valuable space on the small mobile screen. More importantly, the button directs users away from the checkout funnel. Remove the continue shopping button from the cart page can be a good solution to reduce distractions for the users and nudge them to checkout.

Remove continue shopping button from the cart page
✖ The continue shopping button can be a visual distraction on mobile screens, driving buyers away from checkout.
✓ The continue shopping button is suppressed to keep users focused on the important checkout call to action.

22. Show users how many reward points they’ll earn 

Make the most out of your reward program by showing users how many points they’ll earn. If the app have a point rewarding system in place, make sure they have a clear understanding of how many points they can receive for their cart total. Letting shoppers know how they can benefit from your reward program right on the cart page is the best way to prompt them to complete checkout.

Show users how many reward points they’ll earn
✖ There is no indication that users can earn points for their purchases. 
✓ Showing users how many points they’ll earn for their cart total gives them more reasons to proceed.

23. Show estimated shipping cost before checkout

One of the most common reasons for cart abandonment is unexpected shipping cost. Shipping and handling charges should be presented to them earlier in the checkout process in order to help them make decisions. To address this issue, estimating total shipping cost prior to checkout  (eg. Enable shipping cost estimation directly from the cart page,..) is a great solution.

Show estimated shipping cost before checkout
✓ Real-time shipping cost is estimated on the cart page, allowing users to have a clear understanding of their total cost.