Overview
Imagine… A checkout process inspires you to redesign an experience. This project is inspired by burton.com
My Process
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.
Focus
Tools
Figma
To enhance form field usability, I designed inputs with real-time validation, following different scenarios. I also used intelligent form features, such as auto-detection of the postal code and pre-filling the city.
2. Let’s Do It Simpler
I skipped redundant fields and options compared to burton.com. Labels are placed above the input fields, where required and optional fields are indicated.
3. Be My Guest
By providing a visible guest checkout option, I prevent 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. Choose How to Pay
Although only “credit card payment” is presented interactively in the prototype, other options are also presented.
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 are included in the confirmation email to serve as a reference and proof of purchase.
8. Usability Testing
As for my testing, users prefer faster processes with clear guidelines. They need constant order information and visual cues about steps. Even if relying 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.
Check out the Figma prototype.
