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

Here's a refined version of your checkout page design description:

"I've meticulously crafted a desktop iteration of the checkout page design, meticulously considering user experience and convenience. Supporting Visa, MasterCard, and Amex, the page is intuitively structured to minimize cognitive load and friction, streamlining the purchasing process.

At the forefront, a convenient one-click Apple Pay button stands, enabling users to bypass the laborious task of manually filling out checkout fields. For those without access to Apple Pay, the address section features a self-populating address field, sparing users from manual input. Should users prefer or require manual entry, the 'Enter address manually' link below the address fields provides that flexibility.

Diverse payment methods are readily available, from traditional credit cards to alternative options like Affirm and Cash App, ensuring a seamless and swift payment experience for all users.

To guide users through the checkout process effectively, the design incorporates Warning, Error, and Success states denoted by red and green highlights, accompanied by appropriate icons (checkmark, exclamation mark). Concise messages beneath affected fields promptly direct users to resolve issues and complete their purchases.

On the left side of the page, users can view essential details such as price, product code, and item image, alongside options to adjust quantities or remove items, catering to those reconsidering their choices.

Lastly, a 'Need Help?' hyperlink positioned at the bottom of the checkout page offers users an additional avenue for support if required, prioritizing user assistance and satisfaction at every stage of their journey.

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

Reviews

2 reviews


Hi

Overall the check-out page looks very nice and the buildup is in a logical structure.

But I do wonder. You mention in your introduction that there are 3 payment options. Why the 3 dots? And if there are more than 3 options does it need to be hidden?

A person wants to check out as quickly as possible with the minimum friction possible.

Don't hide the payment option make smaller cards and put them all underneath each other or leave the 3 dots behind if there are only 3 options.

And second, maybe search for a more clear visual way to see which payment option you have chosen.

I couldn't have a closer look because you're Figma file required access permission.


Hi Hena,

Thank you for your submission.

Your presentation and design rationale are good. Especially the attention to detail like the discreet use of the "Need Help" hyperlink, the use of colors, and underneath messages to guide the stages. However, there is room for improvement in certain areas.

Firstly, the use of two different prices in the payout process is confusing and may mislead the user. Try to use the same amount on the CTA and the final price.

Secondly, Showing all the information required for the user to fill out at once may overwhelm and cause possible abandonment. I would suggest to progressively show the form to be filled and its steps to complete the purchase. Setting the first step is an easy checkout using Apple Pay was a great input from your side!

Dont forget to set your Figma file to be shared by "anyone with the link" so we can have greater room for avaluation.

Keep up with the great work!


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