Detailed Technical Requirements
Detailed Technical Requirements
Requirements
Open Questions
We assume the images are swipeable, similar to how Paytronix’s images function
today. If they are timed to scroll automatically, or function in any other way, we need
to change this assumption.
Question: How do we migrate a rewards member? Who was signed in to the former
Paytronix white label app?
Data Source
Username and password fields can be hard-coded into the app. We are not allowing
other fields such as printed card number to be used for sign-in
Enables guest to sign in to his or her account with a loyalty username and password.
“Back” button will go back to the sign in/sign up home screen above.
Sign In button does not highlight in yellow until information is entered into the
username field (and possible password too? See open question below.)
“FORGOT” button disappears as soon as the user starts typing a password.
Forgot Button Requirements:
o Move to the “Recover” screen. The user can only enter in an email address to
trigger an email to reset their password.
RECOVER PAGE: What happens if a user enters an email an email address that has
two accounts attached to it (i.e., it’s non-unique)? What error should display?
Since we have native back button in android device, shall we remove in-App back
button from Android design?
Should we activate the "Recover Password" button after Guest has entered a valid
email id (or proper format)?
After clicking Recover Password button what is the expected flow? Should we
redirect back to Landing screen or stay in the Recover Password screen?
Do we need to include "forgot user name" option? or How user will recover his
username?
SIGN UP/ENROLLMENT
KG I'm not sure what you're asking here. Can you please
H clarify?
KG No, the keyboard should only appear if the user clicks on the
H field.
Which fields should be set as mandatory in App level? And how to indicate them in
App? (like adding a mandatory star or by adding "required" text)
Is there any limitation to show the date up to 12 years past from current date while
selecting date of birth in SignUp page
Dashboard Screen
Requirements
Depending on whether or not the guest has gone through the sign in / sign up process,
one of two screens will be presented to the user.
o If the user has NOT signed in, they see the GUEST view on the left.
o If the user HAS signed in, they see the SIGNED IN view on the right.
User can access the navigation drawer is visible (and tapable) in the upper left-hand
corner.
GUEST View
(the numbering below corresponds to the blue numbers on the mock up above)
Open Questions
Pay By Mobile Button: We need more clarity around when this button should display,
what pages it leads to when the guest is NOT signed into their pizza dough account.
SIGNED IN; CARDHOLDER FIRST NAME: Should we call userInformation every
time the user opens the app? Or save their name locally?
According to CPK wireframes "seasonally inspired" buttons appear in the place of the
messages button. Under what circumstances does that happen? Should the messages
button not be visible under all circumstances?
Does the "Check-In" button display by default, in place of the "PAY BY MOBILE"
button?
Sometimes the look and feel of the Pizza Dough Rewards images change from
brown/black elements to yellow/black elements. Is there any reason for this? Are both
required to be used? If so, when is it appropriate to show the brown styling vs. the
yellow?
In the wireframes given to Paytronix by CPK, there is a slide that says when location
based services (LBS) are enabled and the user is logged in AND pay by mobile is not
allowed, the yellow Pay by Mobile button is replaced with a check-in button. Is that
what happens? When would pay by mobile NOT be available? (in certain markets??)
CPK confirmed on a call today that their wireframes are incorrect. The yellow
button should always default to Check-In. If a user has already checked in, the
KG
"VIEW CODE" row should appear below messages/seasonally inspired. Also,
H
you are correct - Pay by Mobile will not be available in all markets to start. I
explain this more on the Pay By Mobile wiki. Please reference that.
When we click on the message in dashboard page, do we need to display the exact
message content page or do we need to display messages list screen?
In the case that the user proceeds to the "server code" with pay by mobile and then
switches to any page through navigation drawer and again user clicks on pay by
mobile, which screen do they see either paused activity or from start of the pay by
mobile process?
KG The server code Pay by Mobile flow has been eliminated, per CPK's request.
H Do you still have a question about this?
Home
Pay By Mobile
Button Displays for: GUEST and SIGNED IN USER
Tapping the Pizza Dough Rewards program as a GUEST takes the user to a Sign
Up/Sign In page that is DIFFERENT from the sign up/sign in home page with the
swipeable images.
Hitting Sign Up button will take the user to an enrollment form.
Hitting the back button in the top-left corner of the enrollment form will take the user
to the previous page, with the Sign Up/Sign In buttons.
Hitting the HOME button in the top-right corner of the screen PRIOR to sign up
success will take you back to the GUEST view of the dashboard.
Hitting the HOME button in the top-right corner of the screen AFTER completion of
a successful sign up will take the user to the SIGNED IN view of the dashboard.
When a user successfully signs up, they return to the pizza dough screen as a signed
in user. The requirements for this section are written out in the PIZZA DOUGH
REWARDS: SIGNED IN user flow.
Locations
Seasonally Inspired
Button Displays for: GUEST and SIGNED IN USER
This button should lead to a FRAMED responsive page. CPK will provide the URL to
which we can point, which will display the images and menu items. We have the
"embedded responsive page" concept today in our navigation drawer. This feature is
the same.
Online Ordering
Messages
About
Button Displays for: GUEST and SIGNED IN USER
The button leads to the SAME PAGE for both user profiles (see above image).
The about page (with the details about how to use the app) will be an embedded
HTML page that is framed by the app.
Legal
Sign Up
Sign Out
Open Questions
o Is this card clickable and if Yes then what will be the screen?
The Payments flow enables guests to save credit cards to their account.
Tapping on one of the saved credit cards will bring up the EDIT PAYMENT screen.
User can edit card number information, name, and billing info and change whether or
not the card is the default.
Hitting the “Edit” button, on part “A” allows consumer to remove one or many cards
from the app.
o On tap of “X” (labeled as part C in the mock up), a notification appears that
asks the user if they’re sure they want to remove the credit card.
o Hitting “DONE” button on the top right of the edit state will make the “X”s
disappear.
o While editing, the “Add Payment” button is grayed out and inactive.
Adding a Card:
o Fields Collected: card number, card expiration, cardholder name, billing zip,
and account nickname.
o The credit card is “Nicknamed” during the saving flow.
o Allow for toggle to make this card the “default” for payment. This means, any
time a guest pays by mobile, this credit card will appear as a payment method
first.
Set Tip
This is where the user sets his or her “DEFAULT TIP” percentage. The tip/gratuity
amount will be applied to the entire check during the Pay By Mobile experience.
Tip slider from 0% to YY% gratuity.
Hit “Done” to save the new tip setting.
Hit “Back” to return to the SUB NAVIGATION page.
Order History
Shows history of checks paid through this mobile application.
List of orders displayed by date, in the MM/DD/YYYY format.
When a particular order is opened, the Past Order screen appears. On the past order
screen, the entirety of the check is displayed.
A green star is placed next to any loyalty rewards used in the check. In this example, a
free Tuscan Hummus was redeemed.
Edit Profile
Similar to the existing “Edit Account” functionality in Paytronix white label app.
Existing demographic information can be changed.
Not all fields should be editable, depending on the client’s configuration.
User can change his or her password on the Edit Profile page.
o Validation for the new password: Per the CPK mock up, PW must contain 6-
15 characters with an uppercase letter, lowercase letter, and a number.
Open Questions
For Payments:
o Can a user have set none of the cards as default ? If not, what is the error for
disabling a default payment when there are no alternative defaults?
o Can a user have multiple defaults? My assumption is that the answer is no.
o Is there any limitation for the maximum number of accounts that can be
added?
o In payments do we need to add "CVV" field?
For Set Tip:
o When a customer first signs into the app, what is their default tip displayed as?
o Does CPK want to enforce tip minimum and maximums? In other words,
should the slider go from 0% to 100%? Or from 5% to 25%?
o If user doesn't fix the tip then is there any default value for Tip? Or should we
keep default tip as 0%?
For Order History:
o If a consumer deletes the mobile app, re-downloads their mobile app, should
the app “remember” previous orders?
o How long should the record of paid checks extend backward in time? E.g.,
should we only display paid checks from up to 12-months ago? Longer?
o Is the Email and SMS receipt always available for the historical order?
o It is my assumption that this page will NOT show a history of completed
online ordering orders, since the user cannot pay for an online order via the
app.
o If I have multiple receipts at the same date then how should they be shown?
o Is there any option to remove/delete the "Order History" from application?
o Kindly let us know the calculation of TIP,TAX and is it configurable by
developers or merchants?
Pay By Mobile
SIGNED IN USER Check-In Initiated
Flow assumes location services (LBS) is on and the loyalty user is signed in.
User selects the yellow CHECK IN button.
User is asked to confirm location/store.
o If the location found is not correct, they can click the "Not your location" link.
A Paytronix-generated check-in code appears (example in mock up: CODE #675)
o The timed expiration must appear below (example in mock up: This code is
valid only at this CPK for 179 minutes)
User can click yellow "OK" button to close the screen and return to the signed in
dashboard view.
The yellow bottom button (formerly CHECK IN) should be named "PAY BY
MOBILE" when the check has been released by the server at the POS.
A new button appears on the homescreen, just below the Seasonally Inspired button.
It is called "VIEW CODE"
o VIEW CODE will take the user back to the previous screen that displayed the
Paytronix-generated check-in code (#675). The expiration time (179 minutes)
should be appropriately decremented to show how much time is left.
Tapping Pay by Mobile will take the user to view their open check, assuming the CPK
waiter has taken the appropriate steps to enter the code into the POS.
Tapping Check-In will pop an error that says "Your location cannot be found. Please
turn on Location Services in your settings for the CPK app."
Tapping "OK" will take the users to a map showing all participating pay by mobile
CPK locations. User can type in a zip code or address in order zoom in to a particular
location on the map.
The button should not be changed to Pay by Mobile until the server has entered in the
check in code and the check has therefore been "released" for payment.
If the customer clicks "Pay By Mobile" and, for some reason, the check is not
available, the user should receive a notification that says: "We're sorry, your check is
not ready to be viewed. Please ask your server to enter your check-in code."
NOTE: Pay By Mobile Not Available for all CPK regional areas
CPK has stated that it wants to be able to control which regions/store locations are
offering Pay By Mobile. They are NOT going to roll out Pay By Mobile to all stores
at the very beginning. When designing this feature, it will be important to understand
how CPK will have controls to limit Pay by Mobile.
Open Questions
Messages
Pull Message Center
Tapping the Messages button on the navigation drawer brings the user to the PULL
message center.
The first message listed should be the one that the user received most recently in time.
The rest of the messages should be listed sequentially in descending order, depending
on the date received.
Messages that have not been viewed show a green diamond.
In the message List (INITIAL VIEW), the title is the first 20 characters of the
message. There is no separate message title field.
Users can swipe left to expose a delete button on a message. If the user elects to delete
the message, there is no notification to the user after the the user presses delete.
Deleted messages cannot be restored
Clicking the "EDIT" button in the top-right of the screen allows the user to delete
multiple messages at once. For iOS, red minuses should appear by each of the
messages, which can be tapped to permanently delete the message.
o Unread messages CAN be deleted.
o User should tap "DONE" button to restore initial list view.
Tapping on a message will bring you into a full screen of the message data (text-based
message)
o Message should indicate when it was sent (hence the "Yesterday" in the mock
up)
o When you're viewing the details of the message, the header should indicate
which message of the total messages available you are viewing. In the mockup
it is 2/8, meaning the user is viewing message 2 of 8.
o In the details view, there should also be an up arrow and a down arrow, that
allows the user to view the message just above or below it, sequentially.
o The "BACK" button will take the user to the LIST (INITIAL VIEW).
Push
Pull
Geofencing
Open Questions
The "DELETE" design elements are very iOS-friendly. What does CPK want to do
for the Android app?
Do pull messages need to be able to support images?
Should we use push notification to display in-App messages?
Which JSON should be used for messages?
In Dashboard screen we have messages option. What is the character limit to display?
In some occurrences we could see Messages button but in some it is not. I noticed that
whenever Check-in is enabled then Messages gets disappear. Is there any work flow
between these two features?
How do we track read and unread messages.
Locations
Maps
If LBS is on, show the user's location and the stores within a five mile radius (five
miles is the default)
o Pins will mark the location of CPK locations close to the user, NOT yellow
diamonds (at least for phase one)
o If a user taps on one of the pins, a pop-up should appear (captured in the
screenshot above) that includes: Store Name and Store Address.
Clicking on the arrow again will bring the user to the location details
page, which is discussed in more detail below.
If LBS is off, display a notification to the user that says: "Your location cannot be
found. Please turn on Location Services in your settings for the CPK app." Once the
user hits OK, the map appears. The user's location is not indicated and CPK locations
are not indicated with pins.
Search: The user can search for a location with a city, state, or zipcode
Circle with four prongs icon: Will bring the user to their current location.
"LIST" button will take the user to the store list view - described in detail below.
"FILTERS" button will take the user to the filters page, which is also described in
more detail below.
Locations List
Shows a list of stores
The top-most store should be the closest (in mileage) to the user. From there, the
stores should be listed in descending order.
User can search for a store by city, state, or zip
Map button will return the user to the MAP view, outlined above
Filters button will take the user to the Store Filters page, outlined below.
Tapping on a specific store will take the user to the store details page
Locations:Store Filters
The filters page can be accessed on both the maps page, as well as the store list page
by clicking the "FILTERS" button.
Possible filters:
o Distance - in increments of 1 mile, 5 miles, and 10 miles.
o Checkboxes - for presence or absence of: call ahead, catering, delivery (nights
and weekends), full bar, hosts fundraisers, online ordering, patio seating, and
takeout menu
If user hits "APPLY", the selected filters will take effect
If user hits "BACK", they will return to the page that they were previously visiting
(either locations list or maps)
The Store Details page should include a map of the location (similar to the way
Paytronix's white label store details page functions)
Information about:
o Store Name
o Distance from User, in miles
o Store phone number - Clickable. Should allow user to make a call to that exact
number.
o Get Directions button - Takes user to their device's native maps application
(iOS = Apple Maps, Android = Google Maps) and loads directions from
current location to the selected store.
o Pay by Mobile button - Requirements coming soon...
IF SIGNED IN: Links to code page (in screenshot above)
IF OUT OF RANGE, LBS IS ON AND SIGNED IN: The user is
notified to try again.
IF GUEST: User gets a notification that loyalty program sign up is
required to use pay by mobile.
o Order Online button - Our assumption is that this will pop an external browser
to the online ordering page, similar to the way the Online Ordering button
works on the dashboard screen.
In the event that the user is SIGNED IN, LBS is enabled, but mobile pay is not
offered in their area, the store details page should display the following button
options:
o Check In and Earn Rewards
o Online Ordering (opens external browser to online ordering website)
o Get Directions (opens native maps app)
When they hit check-in to earn rewards, they go to the check-in screen, detailed on a
separate wiki page.
When they return to the store details page that they were previously on, the "Check In
and Earn Rewards" button text becomes "View Code."
Open Questions
When a user navigates to the locations page, is the locations LIST the first screen they
see? Or the locations MAP?
For Locations List:
o Should ALL stores appear (whether or not LBS is enabled or disabled)? Or
should a filter apply, for example, show only stores within 5-miles of the user?
o What does the circle with the four prongs do? I think this icon should be
removed.
o How many distance filters we need to show to user(In existing px App we
have 5,10,15,25,50,100,500,1000 and 5000)
o Is there the feature like swipe down to enter ZIP code in locations list like in
existing app(Paytronix App)
For Store Details Page:
o There's a discrepancy between the store details with & without mobile pay
mock ups and the mock ups of the "Locations" page on a separate page of
CPK's wireframes. In one, the phone number displays on its own row, on the
with & without mobile pay mocks, the phone number appears underneath the
store hours. Which version does CPK prefer?
In the case of LBS OFF when we tap on "pay by mobile" we are going to display pop-
up window then what will the flow after clicking on OK in the pop-up window
When we show the locations list, are we going to apply any default filters if user
doesn't applied any filters yet.
How can we navigate to store details page in the case LBS ON/LOGGED
IN/CHECKED IN USER and WITH MOBILE PAY
When user taps on phone number in store details screen are we going to navigate to
the dialler
When user search for a store using "city/state/Zip" in map view do we need to include
suggestion list as Autocomplete?
In what scenario do we need to display "don't forget" remainder message when user
taps pay by mobile.
What is the screen design for "GET DIRECTION" Menu?