Daily UI Design Challenge #002 Credit Card Checkout

Let´s go for the second!

This time I´m gonna have a look a these reference sites:

• CollectUI
• Pttrns
• UI Patterns
• 12 e-Commerce Sites with the Most Inspirational Checkouts

I will also look on some articles:

• Smashing Magazine: 12 tips for designing an excellent checkout process
• Crazyegg: The Anatomy of The Perfect Mobile E-Commerce Checkout Page
• Nielsen Norman Group: Decision Making in the Ecommerce Shopping Cart: 4 Tips for Supporting Users

Some things to be considered:

• Is it a single page checkout? Double page checkout? Three steps checkout?
• There should not be pain points on the main elements: Progress, Add to cart button, trustmarks, checkout accesibility, forms (data entry), navigation, guest access, modify items and back button, simple billing, shipping address.

So here is my moodbar, you can see online here.

There are a lot of good compilations, I like this one from Margaux Lespagne.

Secondly I go through Sketching: In my previous post I showed four examples, two for Apps, I´m going to omit them as Apps buying comes usually by the online store (Apple, Google, Amazon). So I´m going to be focused on the other two examples, the really important things: Pizza and Beer!

So this is for the Take away Pizza Checkout:

Also have a white background version:

And for the Beer, I lent the info from this site.

Now I realise there´s no button to “buy” or call to action on first frame, well it is supposed to be on mobile but there should be one definitely.