Open full project

The Burton.com checkout experience inspires this project. To avoid violating the brand, I used Imagine - my fictional brand- created to showcase various personal, educational, or freelance projects.

I designed two interactive flows (A and B) and tested them with real users. Variant A is more classical. In the B flow, I reduced the number of screens and presented the steps in an accordion-type structure. Both options provide three input scenarios – guest checkout, login by filling in input fields manually, and login by using auto-save data.

As for my testing, users prefer faster processes with clear guidelines. They need constant order information and visual cues about steps. Even if they rely on the “load saved data” option to speed up the process, they want to check their data carefully since the entire process is related to payment.

Imagine: Checkout Page for E-Commerce Platform 1

MY PROCESS

1. Let’s do it simpler

Compared to Burton.com, I skipped redundant fields and offers. Labels are placed above the input fields, where required, and optional elements are indicated.

2. What can be optimized?

I designed inputs with real-time validation to enhance form field usability, following different scenarios. I also used intelligent form features, such as auto-detection of the postal code and pre-filling the city.

Imagine: Checkout Page for E-Commerce Platform 2

3. Be my guest

Providing a guest checkout option prevents abandonment due to forced account creation.

Imagine: Checkout Page for E-Commerce Platform 3

4. Let everything be transparent

By offering clear and comprehensive order information, I avoid unpleasant surprises that can lead to abandonment. Order review steps allow users to catch and correct any errors before finalizing their order.

Imagine: Checkout Page for E-Commerce Platform 4

5. Pay as you wish

Although only “credit card payment” is presented interactively in the prototype, other options are also provided.

6. Let’s be easy but secure

Card input details are simplified, and those that require extra guidance, such as CVC code, are equipped with a tooltip. “Secure checkout” and stamp “… secured by” are added to emphasize trust.

Imagine: Checkout Page for E-Commerce Platform 5

7. Be sure all is correctly done

All order details and an estimated delivery time are included in the confirmation email to serve as a reference and proof of purchase.

Imagine: Checkout Page for E-Commerce Platform 6

Reviews

3 reviews


Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in i

Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida nascetur. Ut vestibulum elit pulvinar netus in ante lectus turpis auctor. Nulla purus morbi adipiscing quisque in sodales aliquet. Ultricies a elit quis metus. Aliquet cras pretium platea lacinia mi et orci volutpat vulputate. Bibendum massa fusce...

Nice! I really like how you added all the steps.


19
Claps
Average 4.8 by 4 people
5 claps
4 claps
3 claps
2 claps
1 claps
Create your very own Design a Checkout Page project and get mentor feedback.
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>