Grocery Shopping Checkout

Daily UI #2

Simple flow of E-commerce credit/debit card checkout.

Fully Created in figma

Thoughts :
Most common e-commerce component of cart is not as straight forward as it looks. Based on what goods are you selling it needs change in placement of elements. For example in grocery shopping app I have to make it easier to increase quantity of an item because at end moment you might like to buy more or less of it. You also need delete easier there since you can change your mind about that last chocolate you bought.

Card based Checkout is similar looking to actual card, here I use that element because its easier for people interact the digital object with similar functionality as real world ones.

It is also important to highlight delivery method and time, so one can be at home to receive it. Here one can change the delivery method as well to expedite or delay the parcel.

Then a simple animation with easing showing confirmation. This motion gives appearance of a smooth and firm function.

Checkout figma prototype
shorturl.at/lwL49