The document describes the user interface for managing payment options and credit cards on a mobile device. It includes flows for adding a new card, validating a card, applying promotion codes, and editing or removing existing cards. Key interactions include expanding menus for additional fields, using on-screen keyboards for input, and animations for transitions between states. Validation errors are handled with overlays, and success is indicated with confirmation messages.

1. Payment Options - No Activated Card
Payment Options
Payment Options - Discrepancies for Android
Carrier 12:34 AM 100%
Payment Options
Cards
****************6847
****************6847
****************6847
Add New Card
Active
Inactive
Inactive
Carrier 12:34 AM 100%
****************6847
Promotion Code
****************6847
****************6847
Add New Card
Apply code
Active
Inactive
Inactive
12345
Carrier 12:34 AM 100%
Add New Card
Card Number:
Name on Card:
12
Carrier 12:34 AM 100%
Add New Card
Card Number:
Name on Card:
Carrier 12:34 AM 100%
Add New Card
Card Number:
Name on Card:
Jane Doe
Expiration: Expiration: Expiration:
CVV: Zip Code:
Q
A S D F G H J K L
Z X C V B N M
Next123 space
W E R T Y U I O P
Promotion Code
Promotion Code
Apply code
mm/yy
Carrier 12:34 AM 100%
Card Number:
Expiration:
CVV: Zip Code:
Next Next
Carrier 12:34 AM 100%
Add New Card
Card Number:
Name on Card:
Jane Doe
Expiration:
************1234
************1234
NEXT
199104
199003
July
June
199205August
198902May
198801April
199306September
199407October
CVV: Zip Code:
07/18
Carrier 12:34 AM 100%
Card Number:
Expiration:
CVV: Zip Code:
Done
************1234
07/18
CancelValidate New Card
Carrier 12:34 AM 100%
Save New Card
Add New Card
Card Number:
Name on Card:
************1234
Carrier 12:34 AM 100%
Add New Card
Cancel
Card Number:
Name on Card:
Promotion Code
qwertyqwertyqwertyqwerty
Save New Card
Jane Doe
123
Expiration:
CVV: Zip Code:
07/94
123 94941
Cancel
Promotion Code
Expiration:
CVV: Zip Code:
07/18
123
Carrier 12:34 AM 100%
****************1234
Promotion Code
****************6847
****************6847
Add New Card
Inactive
Active
Inactive
****************6847
Inactive
Apply code
Carrier 12:34 AM 100%
Payment Options
Connect New Card
Card Number:
Name on Card:
CancelValidate card
Expiration:
CVV: Zip Code:
94941
94941
************1234
Carrier 12:34 AM 100%
Cards
****************6847
Promotion Code
Apply code
Active
Enter Code
Add New Card
Save Credit Card
1
1
2
2
3
3
4
4
5
5
6
6
7
7
6
6
7
7
10
10
11
11
When a user hits the edit button,
circle icons appear and nudge
content inward.
When a user taps a circle while in
edit-mode, they are given the option
to remove a credit card: a box slides
in from the right and nudges the content
over.
If a user presses the “REMOVE” button,
the credit card disappears by sliding away
to the left.
TAKE NOTE: only one circle-at-left can
be activated at a time.
A user can hit “DONE” at any point during
edit-mode and exit edit-mode, returning
them to the basic Payment Options screen
seen at the start.
When a user hits the edit button,
the edit button is in an active state.
It now says “Done” instead
of “Edit.”
When a user is in edit-mode, toggles
for ‘active’ or ‘inactive’ states are not
visible.
When a user is in edit-mode, the
“add new card” button and the
promo code fields disappear.
When a user taps “Add New Card” a
menu expands upward pushing
content up, ‘add new card’ is now the
title for this subsection.
NOTE: users can still scroll up and down
beyond the ‘Add New Card’ block.
If a user hits cancel to end the “add new
card” process, the menu contracts back
to its previous position.
When a user taps the “Name on Card”
field, a keyboard overlay rises from
the bottom of the screen.
NOTE: If a user taps anywhere outside
the field or the keyboard, the following
interaction occurs: the keyboard recedes
back to the bottom of the screen. However
any text that has been entered into the
fields is saved.
When a user moves to the “Card
Number” field, a numeric keyboard
replaces the lettered keyboard.
When a user moves to the Expiration
field, it unpacks Apple’s rolling date
picker.
For Android, use a numeric keypad.
When a user moves to the CVV field,
a numeric keyboard with a backspace
button and a Next button appears.
When a user moves to the Zip Code
field, a numeric keyboard with a
backspace button and a Done button
appears.
A user could also conceivably tap
out of the keypad after entering a
zip code, and then hit ‘validate
new card.’ The result would be
the same as the previous section -
the same interaction would occur
where the Add New Card menu
recedes and the new card list-item
is added to the top of the list.
EXCEPTION CASE: In the event that
the card can not be validated, fields
that have been improperly entered
should be called out with a
red outline.
An overlay message should appear
as well.
EXCEPTION CASE: In the event
that the card has already been entered
into the system, the ‘add new card’
menu contracts accordion-style,
and an alert is placed at the top
of the screen.
If a user successfully validates a new
card, the ‘add card menu’ returns to
its position and the new card is listed
at the top of the list, it also becomes the
active card.
A confirmation overlay alerts the user
that they have successfully added a
new card.
Similar to previous wires, if a user successfully
applies a promotion code, they receive
confirmation in a message below the header.
Likewise an invalid promo code results
in a callout overlay at the top and a red
line around the errant field.
NOTE: When a user moves away
from a field in which she has typed,
the content is saved so long as it
isn’t a problem regarding PCI compliance.
Once a card is validated, a confirmation
message appears AND the “Connect
New Card” menu contracts into a list
item and is titled Cards. I have shown the
new menu to the right.
An Add New Card section is added
below it.
The Promotion Code section is now
available.
Only one card is allowed to be
active at a time. If a user toggles a
new card to be active, the previously-
active card is moved to an inactive state.
Once an entry has been made to the
Promotion Code section, the “Apply
code” button goes to an active state.
A user’s cards are listed
in the order in which they were
submitted from most-recent to
last. Nothing happens if a user
taps the card icon, or the card number.
Users can add a new card at any time.
Users can enter and activate promotional
codes at any time. The “Apply”
button is greyed-out until a user types
into the field.
The “Cards Section” has an edit button
which can be toggled to allow users to
remove cards.
1
1
2
2
3
3
3.1
3.1
5
If a user enters the Payment
Options menu and she has NOT
submitted a valid cards, the screen
defaults to the above menu.
User enters valid card information
in the same fashion described above,
however there is no Cards Section or
Promotion Code section.
Again, the Android version will contain
Expiration, CVV, and Zip on the same
line as mentioned earlier.
The section title should be “connect
new card” rather than “add new card”
The Promotion Code section is absent
until a user enters a valid card.
If a user has already entered their name
in the onboarding section, it should
auto-populate the information in this
section.
Once a user has entered information
into all of the fields, the “Validate
card” button goes into an active
state.
Edit
Carrier 12:34 AM 100%
Cards
****************6847
****************6847
****************6847
Done
Payment Options
Carrier 12:34 AM 100%
Cards
****************6847
****************6847
****************6847
Inactive
Done
Payment Options Payment Options Payment Options
Payment Options Payment Options Payment Options Payment Options
Payment Options Payment Options Payment OptionsPayment Options
REMOVE
Validate New Card
Carrier 12:34 AM 100%
Add New Card
Card Number:
Name on Card:
************1234
Jane Doe
Cancel
Promotion Code
Expiration:
CVV: Zip Code:
07/18
123 94941
Payment Options
Validate New CardValidate New Card
Cards Edit
Cards Edit This card has already been added.Card submission error.
12
13
13
Carrier 12:34 AM 100%
****************6847
Promotion Code
****************6847
****************6847
Add New Card
Apply code
Active
Inactive
Inactive
Payment Options
Cards Edit
14
16
16
17
17
18
18
21
23
23 24
24
25
2522
22
22
26
26
27
27
21
19
19
20
20
14
15
15
Promotion code has been applied.
Carrier 12:34 AM 100%
****************6847
Promotion Code
****************6847
****************6847
Add New Card
Apply code
Active
Inactive
Inactive
Payment Options
Cards EditPromotion code not valid.
Your card has been added.
4
4
8
Payment Options
Your card has been added.
Carrier 12:34 AM 100%
Cards
****************6847
Promotion Code
Apply code
Active
Enter Code
Add New Card
Payment Options
Carrier 12:34 AM 100%
Connect New Card
Card Number:
Name on Card:
************1234
Jane Doe
Cancel
Expiration:
CVV: Zip Code:
07/18
123 94941
Payment Options
Validate Card5
8
9
8 In the “Add New Card” flow for Android,
the Expiration, CVV and Zip Code fields
are all on the same line. This is because we
don’t need to use a full width spinner (like iOS).
Instead, we will to use the numeric and lettered
Android keyboards in place of the iOS ones.
We will not be using the Android date
picker for the expiration field - just use
the numeric keyboard.
Carrier 12:34 AM 100%
Payment Options
Add New Card
Validate new card Cancel
Card Number:
Name on Card:
Expiration: CVV: Zip Code:
mm/yy
Promotion Code
Apply code
9
8
8
9
9.1
9.1
9
22312
Users can return to the Menu
Screen by hitting the back button.
The current screen slides
away to the right.
Carrier 12:34 AM 100%
Payment Options
Cards
****************6847
****************6847
****************6847
Add New Card
Active
Inactive
Inactive
Promotion Code
Apply code
Edit
Carrier 12:34 AM 100%
Payment Options
Cards
****************6847
****************6847
****************6847
Delete
Carrier 12:34 AM 100%
Payment Options
Cards
****************6847
****************6847
Edit
Add New Card
Promotion Code
Apply code
Active
Inactive
When a user taps the delete button,
the checked list-items are removed,
and the other list-items ‘fall upward’
into place.
This ‘falling upward’ animation should
be smooth and appealing - first the
checked items disappear, and then
remaining items fall into place.
The user is returned to the original
menu at this point.
7
7
5
5
Check boxes appear at the right
of each list item.
Active/Inactive toggles disappear
in edit mode. Add New Card disappears
in edit mode. The Promotion Code section
disappears in edit mode.
5
When a user taps the “Edit” button,
several things occur simultaneously. The edit
button turns into a delete button.
The back arrow no longer returns the
user to the main menu, instead, it allows
the user to exit edit-mode.
Similarly, the native back-button on
Android devices allows users to exit
edit-mode.
4
4
Users can tap anywhere in the list-item
while the menu is in edit-mode and it
will add a check mark to the box. They
can check as many items as they want.
6
6
Users can remove cards from their
list by tapping the “Edit” button.
3
3
2
2
Carrier 12:34 AM 100%
Payment Options
Cards
****************6847
****************6847
****************6847
Delete1
1
While the user is in edit-mode, the
back arrow no longer returns the
user to the main menu, instead, it allows
the user to exit edit-mode.
CancelValidate New Card
CancelValidate New Card