Checkout Page for E-Commerce Platform

Open full project

Design Rationale

For this design task, I chose to create a checkout flow for a small candle business called KayBee Kandles. The design process aims to provide a seamless and engaging checkout experience that optimizes simplicity and an error-free transaction process.

Designing for usability

  • A guest checkout option was implemented for a friction-free process, along with the option to use express checkout or sign in.
  • Clear and concise form fields were included and placeholders continue to be visible after inputting information.
  • The option for users to use the same address for their billing and shipping without having to repeat information is automatically checked.
  • Multiple payment options are available during the checkout process
  • Order summary is visible throughout the entire checkout process to ensure trustworthiness.
  • A confirmation screen with follow up order instructions is also available at the end of the checkout flow

Visual Hierarchy and Scannability Considerations

  • Large fonts for the order summary section and the use of bold and grouping prices together signify related items.
  • Error messages are shown when a section is incomplete.
  • Pay now button is distinct and visible at the end of the checkout process to ensure confidence and signify the completion of the checkout flow.
  • A progress bar is visible after each section is completed.

The overall design rationale centers around creating a simple and seamless checkout flow. By balancing simplicity, transparency and security, the checkout process aims to reduce friction, build trust, and enhance the overall shopping experience.

Reviews

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...
4
Claps
Average 4.0 by 1 person
5 claps
4 claps
3 claps
2 claps
1 claps
Create your very own Checkout Page for E-Commerce Platform project and get mentor feedback.
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>