Elevating the Checkout Process

Redesigning the credit card checkout page

February 9, 2021


Design Challenge

Elevating the Checkout Process

Because who says product pages should get all of the attention?

"Design Hint...Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc." -- Daily UI Challenge

This is a quick redesign of the payment information screen found within the e-commerce checkout process. The design features a clean, minimalist design that allows the user to focus on the task at hand - entering payment details in order to complete a purchase.


Although I enjoy minimalism within user interfaces, I wonder how successful this design would hold up in a user test. The design is visually appealing, yet it does not include all of the critical information a person would need on each page of the checkout process. For example, in order to review all of the items within the order, the user would have to click back not once, but twice, in order to review the purchase.

Considerations for revisions:
  • Add space to input discount codes
  • Show itemized list of items in order, their price, as well as tax and shipping information for transparency
  • Revise button copy

A standard Shopify payment screen

In comparison, the Shopify checkout process includes a dedicated space where users can review items within their order at any point of the checkout process. Nevertheless, this design challenge provided an interesting opportunity to study, review, and remix an often overlooked part of the e-commerce user experience.