Design Challenge: Credit Card Checkout (iOS)

THE PROMPT: Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc.

Screen 1: Blank Fields ✨

Here is what the credit card payment page would look like on mobile when the user first begins. I included “* required field"* at the top, to let the user know that all of the fields are necessary. Nowadays, we are used to being asked for extra information that isn’t always needed, so this eliminates the guessing and lets them know that all of the fields need an entry.

Screen 2: Inputting Information ✍️

This screen demonstrates how things would look while the user is inputting their credit card information. As you can see, the form that is currently active is outlined with a thicker stroke and filled in with pure white to help the user know exactly where they are in the process. When inputting the month and year of the expiration date, the user would see a drop down appear. They would then scroll to select the year or month and tap “Confirm”.

Screen 3: Error 🚫

In this screen, an error is visible. A user might see a screen similar to this if they tried to “submit payment” when one of the fields was blank. A thick red stroke around the incomplete field with an accompanying error message just above would inform the user of their error.

Screen 4: Completed ✅

Once a user taps “submit payment”, they usually wait for feedback that confirms their payment went through. This is the purpose of this screen. It would briefly appear before redirecting the user back to home.