<?xml version="1.0" encoding="utf-8"?>

For this exercise, I have chosen to design a desktop checkout flow for the imaginary store, Cats-in-Hats.

Cats-in-Hats: Checkout Page 1

In this design, I strived to create an experience to be able to buy incredibly cute hats for your cats as quickly as possible. The breadcrumbs at the top of the page give the user the idea of where they are in the process as well as allows them to be able to go back to any section.

Cats-in-Hats: Checkout Page 2

I was able to create simple, clear labels and a logical, step-by-step process help prevent overwhelming the user. Each field and button has a purpose, and actions such as Continue to Payment are bold and easy to tap.

Cats-in-Hats: Checkout Page 3

Users have the flexibility to be able to get their order delivered to them, or pickup at one of the many Cat-in-Hats locations across the U.S. They will also have the flexibility to make the checkout process even faster with using PayPal or Apple Pay.

Cats-in-Hats: Checkout Page 4

And finally, everyone's favorite part, the user will immediately get confirmation of their order as well as information on how to track the delivery (or pickup).

I appreciate any feedback!

Tools used

Figma
Adobe Photoshop

From brief

Topics

Share

Share your insights — leave a project review and help others grow their skills

Reviews

1 review


Your "Cats-in-Hats" checkout flow is well-structured, intuitive, and easy to follow. The step-by-step approach ensures users "never feel lost," and the "clean, scannable layout" makes navigation effortless. How you’ve designed the "progress tracker, form fields, and order summary" shows a strong understanding of usability.

One thing that stands out is how "well-presented" everything is. The interface feels "thoughtful and polished," with "clear labels, logical grouping, and strong CTAs" that guide users through the process. The "persistent order summary is a great choice, keeping users informed at all times and reducing hesitation. Payment options like "PayPal and Apple Pay add flexibility, making checkout even faster for users who want a one-click experience.

To make it even better, here are a few areas to refine:

  • "Shipping cost clarity:" The cart step shows "FREE" shipping, but in the shipping step, there's a charge for "Priority Shipping ($9.82)." If "FREE" applies only to standard shipping, "it should be explicitly mentioned upfront" to prevent confusion.
  • "Saved for later access:" The "Saved for Later" section disappears after the cart step. If a user wants to "add a saved item back while checking out, they shouldn’t have to leave the flow." A "Saved Items" link in the order summary would make it more accessible.
  • "Payment selection contrast:" Right now, "Credit Card, PayPal, and Apple Pay are visually grouped." They could use "better separation"—maybe a subtle background color or border—so users can scan and select them faster.
  • "Estimated delivery timing:" Shipping speed can influence decision-making, but "delivery estimates only appear at the end." Adding "Arrives in X days" during the shipping selection step would help users make informed choices earlier.
  • "Discount code clarity:" Some users might not realize they need to "click 'Apply'" to update the total. A small microcopy like "Click Apply to update the price" would make it clearer.

Your "presentation is top-tier"—everything is structured "logically and cleanly," making it easy to understand your design decisions. It looks "professional, conversion-focused, and well-researched." If you want to "level up your submission," adding a "simple user flow diagram" could reinforce how seamless the experience is.


9 Claps
Average 4.5 by 2 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>