Card Check Out Design
SERVICES
ART DIRECTION
Heirarchy
WEB DESIGN
YEAR
2026
INFO
This 20-minute UI exercise focused on designing a familiar credit card checkout experience from scratch. I wanted to practice creating an efficient Add Payment flow and understanding how that information carries into the Checkout experience. I explored how card previews, form fields, payment methods, order details, and shipping information could be organized into a clear visual hierarchy. The exercise allowed me to practice making quick design decisions while keeping the experience familiar, functional, and visually polished.
PROBLEM
How can I create a simple, efficient credit card checkout experience? I wanted to practice designing a UI pattern that people interact with all the time: adding a payment method during checkout. Rather than designing for a specific brand or website, I focused on understanding how the Add Card experience could work alongside the Checkout summary while keeping the process clear and easy to scan. The goal was to create something that felt familiar enough to understand immediately, while still giving the interface a polished visual hierarchy.
SOLUTION
I created two connected states: Add Payment and Checkout. The Add Payment screen allows users to enter their card information while previewing the card as it is being added. Once saved, the card becomes the selected payment method on the Checkout screen, where it sits alongside the order summary, promo code, and shipping information. I kept the overall structure intentionally familiar so the interface could be understood quickly, while using visual grouping, hierarchy, spacing, and card previews to make the experience feel organized and polished.
