Imagine: Checkout Page for E-Commerce Platform

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.

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 across various scenarios. I also used intelligent form features, such as auto-detection of the postal code and pre-filling the city.

3. Be my guest

Providing a guest checkout option prevents abandonment due to the requirement of creating an account.

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.

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.

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.