<?xml version="1.0" encoding="utf-8"?>

The suggested design is aiming to prevent cart abandonments on the website that happen at the Checkout page. The page was optimized ensuring the customers can successfully complete their purchase.

The goal was to reduce friction during the checkout process, which is accomplished by keeping only relevant and necessary steps of the checkout. The suggested design solution is to keep all the steps of the checkout on the same page but split into steps that customers go through: from selecting the delivery country to delivery address and to payment. The sections are designed with progressive disclosure in mind - so users will see only relevant inputs for the current step, instead of being overwhelmed by filling an endless form. Additional elements are provided to further reduce the cognitive load: progress timeline, access to the previous completed step, ability to review the order details, selection of different payment methods starting from the most accessible one (Apple Pay) to other methods available to user.

Share your insights — leave a project review and help others grow their skills

Reviews

2 reviews


It's a well-designed checkout process! The number of steps is just right, gathering necessary information for purchase and delivery without overwhelming users. The inclusion of the security badge instills trust.

However, it would be beneficial to see the entire flow, starting from "Go to Checkout" and ending with the success screen confirming the purchase. This comprehensive view would provide a better understanding of the user journey and your design rationale.

Other than that, well done!


Overall, the design demonstrates that you have a solid understanding of key UX principles, effectively reducing friction, minimizing cognitive load, and offering multiple payment options to meet diverse user needs. However, there are a few areas that could be refined to further enhance the user experience.

Currently, the primary call-to-action (CTA) button blends too much with the surrounding UI, making it less noticeable. Given that the design is in greyscale, using a distinctive color or adjusting the placement of the button could improve its visibility and encourage users to proceed with their purchase.

Additionally, the form fields should be tailored to the selected region. For example, in the UK, "post codes" are used instead of "zip codes," so local terminology should be displayed to ensure clarity and reduce user confusion.

It might also be worth considering a guest checkout option, especially if the goal is to minimize cart abandonment. Many users may leave the checkout process if forced to create an account before completing their order.

Another important addition would be adding real-time, inline validation for form inputs, including error handling. This approach can help reduce user frustration by providing immediate feedback and preventing errors from being discovered only at the final submission stage.


12 Claps
Average 4.0 by 3 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>