Product Overview:

Payment in the ordering experience is a complex flow for the user and it is key to make the complexity of managing payments a simple task for the user.
The mobile wallet is composed of two users, a registered and a guest:

1. Register User Credit Card Payment:
a. The user is able to use a credit card to either pay at checkout or purchase a store value card.
b. The user is able to save a card to profile.
c. The user is able to edit and delete a saved credit card.
d. The user is able to enter credit card information via Checkout.
e. The user is able to enter credit card to add value to a store value card.

2. Register User Store Value Card:
a. The user is able to add a pin and card number from a physical card.
b. The user is able to purchase a digital card and store in wallet.
c. The user is able to pay at Checkout with store value cards.
d. The user is able to add value to excisting store value cards.
e. The user is able to add design to a store value card.

3. Guest User Credit Card Payment:
a. The user is able to use a credit card to either pay at checkout or purchase a store value card.
b. The user is able to enter credit card information via Checkout.

4. Guest User Store Value Card:
a. The user is able to add a pin and card number from a physical card.
b. The user is able to pay at Checkout with store value cards.

ROLE UX, UI, VISUAL DESIGNER
TOOLS SKETCH, INVISION, HTML/CSS PROTOTYPING, ABSTRACT
TEAM MYSELF, PROJECT MANAGER, ENGINEERING TEAM, EXECUTIVE TEAM
TARGET PLATFORMS MOBILE (IOS,AOS), WEB

WIREFRAMING

The payment system enables the user to pay with credit cards, store value cards and OS specific payment options.
I have divided the wireframes in the user scenarios bellow.

Credit card managment wires Payment in My Account and Checkout wires Payment in Dunkin's mobile app wires Gift card management wires wires wires wires SVC in Dunkin's mobile app wires
Register user payment flow wires wires Guest user payment flow wires wires