The product is an electronic payment terminal. This terminal has a 7" LCD in portrait mode only. The customer interacts with the payment terminal during the payment process.
This product is going to be introduced into the USA marketplace this year. We want a user interface that is smart, catches the eye, and is fun to look at. It also must be easy to figure out and use quickly.
Here's what we need:
1. We need a coherent design that is consistent throughout the user interface.
2. We need the graphics to be in separate components. i.e. Background, Prompt, Button, all are separate graphics files. This is because our software programmatically builds the screens on the fly.
3. Graphics should be png with transparency.
The native resolution of the LCD display is :
Height = 1280 pixels
Width = 800 pixels
The final graphics deliverable will need to conform to this resolution so we don't lose image integrity by having to dynamically
4. We need enough graphics to build at least the following screens:
A: Prompt user to insert card.
Note: The elements on this screen will dynamically change depending on what credit card types the merchant accepts. So the 'Swipe Card', 'Tap Card', and 'Insert Chip Card' are displayed under program control. NOTE: The icon at the top for the contactless (NFC) card landing spot MUST look like the one in this sample...The color can change, but not the design of this icon. This is a Visa/MC/Amex requirement.
B: PIN entry.
This is an EXAMPLE of a basic PIN entry screen. Note the prompt 'Enter PIN' text disappears once PIN entry has begun. Also note that only *'s are displayed... the PIN numbers are not displayed.
*Note the "<-" key is a 'backspace'. Please make this look better
C: Select Debit or Credit
Pretty self-explanatory, nothing difficult here
E: Processing Screen.
This is the screen the consumer see's while they anxiously await the verdict handed down by the cold hard electronic brain that makes these decisions.
Let's make a screen that takes some of the anxiety out of this part of the transaction!
D: Approved / Declined screen
Actually, single screen that messages the result of the transaction. Perhaps this can be made more winsome, and a little less serious?
E: Amount entry
Here is where the transaction amount is manually entered.
*Note: The '<<' key is backspace, 'X' is cancel. Please change as needed to fit your design.
F: Manual entry of credit card number, expiration date, and CVV.
No example to show here however the following rules apply:
1. Credit card number should allow up to 19 characters
2. Expiration date is two 2-digit numbers, Month, and Year.
3. CVV - up to 4 characters.
Cancel, and Ok, or Continue buttons.
Here's how we need it:
1. If you use a custom or non-standard font, we will need the entire font set. If it is commercial, let us know where we can buy it, if it is open source then that's fine. We dynamically display what's needed by the customer.
We PREFER to have the full ISO 8859-1 character set in any font we use. While we are in the USA and English is the primary language, we will need support for other languages, primarily Spanish, German, French, Italian, and Portuguese. NOTE: THIS IS NOT A 'DEAL BREAKER', it's just a 'nice to have' and preference will be given to those who can supply this.
Custom buttons such as the numeric keys for entry on the PIN pad, card info etc, will need the standard Android 4-states as illustrated below:
NOTE: This image is ONLY to illustrate button states needed. Please don't give us these exact buttons! We will pull our hair out with deleterious self doubt due to our obvious lack of ability to convey the crucial meaning of this message, if you do.
3. Background, and other images
We need these as stand-alone components. Please use the PNG format.
PLEASE give us your questions, comments, suggestions, and criticisms!
We want this contest to go smoothly, and we want you too NOT waste time going down a path that won't work. We also want to make sure we have adequately explained what we need.