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, following different 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 forced account creation.
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.
Tools used
From project brief
Topics
Share
Reviews
3 reviews
Nice! I really like how you added all the steps.
You might also like

Lao In America

FlexFlow Landing Page

Empty State Page - After finishing a course

UX Writing. Ice Skating school

Zameer a Mental health project
