Designer Challenge #DailyUI #002 Credit Card Checkout
This time it was a double challenge for me due to several reasons.
First of all, the sphere: financial. To tell the truth, I am not an expert in this field at all. Even in my native country and my native language.
And …the country. Once you’re playing on an international market, it makes sense to keep focused on that audience. Even though you might be living in another country (Belarus, in my case).
Long story short — no time to waste, just do it.
Research
Check What’s On
I started from checking the typical patterns, trying to understand the standard components and information I need to show:
- action buttons at the top: Done and Cancel
- Credit Card Number
- option to scan a card instead of typing
- Billing address, including country (United States of America), street, apartment, city, state abbreviation, zip code ….
But hold on…
How much do I know about the American addresses? And am I sure about the typical credit cards in the United States? ..
One Step Back
At this point I realized I’m taking a double challenge and started this post.
Going one step back to the question: What does a typical credit card look like and what kind of information does it have.
Here it is:
or this
and even like this
The Elements
After checking the images (thanks Google) and reading the initial task once again
I got the following list of typical credit card information:
- Name and Surname (cardholder’s name)
- Card Number
- Date (Valid Thru / Good Thru)
- Security number
And continued reviewing credit card checkout patterns. Some more elements I found:
- The billing address and the shipping address might be different (a checkbox to tick if they are the same, or a new field to enter new information if they are different is required)
- Set as default option (in case this is a product where person can repeat a purchase / order and it’s more convenient to store the data instead of entering it from the scratch each time)
- Gift card (might be relevant for some cases, depending on the type of business)
And then I remembered I have my own user experience. Recently I’ve been booking a hotel on Booking.com.
So why not turn to my personal user experience?
Getting back to that, repeated the booking steps for a new location. And here’s the information I’ve been asked:
- First Name
- Last Name
- Email Address (to receive my booking confirmation).
A pleasant surprise from the app or the phone: it allows you to choose your name instead of typing it from the scratch.
Skipping the travel details as they belong to a specific area, going straight to credit card information:
- Credit Card type (the choice differs for the app on iOS and Android, still Visa or Mastercard remain everywhere)
- Card Number
- Expiration date
- Option to save the card info so I can use it next time
- The progress (to make it clear at what stage exactly you currently are, how much you have completed and and how much is to be done until you finish your “task”).
Find a Pattern
Understand the list of information to be used . — DONE
Check the existing apps’ patterns — IN PROGRESS
Make my own Credit Card checkout form or page — TO BE DONE.
Stages and Progress
I noticed that both Booking.com and the apps I’ve been examining show your progress.
This option feels so natural that I didn’t even pay much attention to analyzing it before. Or until today. When I started thinking about the necessary components.
For Booking it’s as simple as 1–2-[tick].
While for the apps selling goods it turns into: 1. Shipping — 2. Billing — 3.Review
So finally it all resulted in the following screens:
