Lunch Money Buddy. Annotated Wireframes. Lindsey Eom 7/30/2017

Size: px

Start display at page:

Download "Lunch Money Buddy. Annotated Wireframes. Lindsey Eom 7/30/2017"

Homer Knight
5 years ago
Views:

1 Annotated Wireframes Lindsey Eom 7/30/2017

2 1. Pages 1.1. Page Tree Home Sign Up Sign Up 1 Sign Up 2 Sign Up 3 Log In Child Screen Favorite Lunches Alerts Account Add Payment Change Payment Delete Payment Close Account View Alerts Lunch Menu Add Funds Page 2

3 1.2. Home User Interface Widget Table Page 3

4 1 When tapped, brings up list of all children available on the app. When a child is tapped, goes to the child page. 2 Brings up account options. Account options are - - View Account -Log Out 3 When tapped, brings up list of all children available on the app. When a child is tapped, goes to the child page. 4 When tapped, brings up list of all children available on the app. When a child is tapped, goes to the child page. 5 If user clicks, it will go to the child screen 6 If user clicks, it will go to the child screen 7 If user clicks, it will go to the child screen 8 If user clicks, it will go to the child screen 9 Current balance on child's account 10 Current balance on child's account 11 Current balance on child's account 12 Current balance on child's account 13 Takes user to lunch menu for the specific child. 14 Takes user to lunch menu for the specific child. 15 Takes user to lunch menu for the specific child. 16 Takes user to lunch menu for the specific child. 17 Pops up with 3 select amounts or an "other" option. User may click amount then click "add" and it will add that amount. If user clicks "other" it takes user to "add funds screen" 18 Pops up with 3 select amounts or an "other" option. User may click amount then click "add" and it will add that amount. If user clicks "other" it takes user to "add funds screen" 19 Pops up with 3 select amounts or an "other" option. User may click amount then click "add" and it will add that amount. If user clicks "other" it takes user to "add funds screen" 20 Pops up with 3 select amounts or an "other" option. User may click amount then click "add" and it will add that amount. If user clicks "other" it takes user to "add funds screen" Page 4

5 1.3. Sign Up User Interface Widget Table 1 Click this to begin the sign up process. 2 Click this to log in. 3 Forgot password takes user to screen to fill out info to retrieve password reset code. 4 Brings up an form to for help. Also lists phone number for tech support. Page 5

6 1.4. Sign Up User Interface Widget Table 1 User inputs the 8 digit access code for child. 2 User inputs that they want to recieve notifications and other information on. 3 Shows user that their will be used for their login. 4 Tells user how to input password that will be acceptable. 5 User must type exact password here again for confirmation. 6 User clicks when all information is filled out. Will not let user keep going unless all info is filled out correctly. Info not filled out correctly will appear in red. 7 User inputs phone number 8 Shows user that their will be used for their login. Page 6

7 9 User clicks this for more information about phone number. This will alert users that phone number is for text message notifications so only cell phone numbers will work 10 Shows user progress of signing up. 11 The 8 digit code will already have parents names and child names associated with it so no need to enter this info. Page 7

8 1.5. Sign Up User Interface Widget Table 1 Credit card number 2 Month of credit card expiration 3 Year of credit card expiration. 4 cvc code for credit card 5 If there is an additional child with a separate access code, the user may save the info and add another child before submitting. 6 Takes user to previous screen. 7 Submits the child. Information will not save if card number/date is wrong. 8 Shows user progress of signing up. Page 8

9 9 Success message to confirm users have successfully signed up. Page 9

10 1.6. Sign Up User Interface Widget Table 1 Success message to confirm users have successfully signed up. 2 Takes user to the login screen Page 10

11 1.7. Log In User Interface Widget Table 1 User inputs they signed up with. 2 User puts in password they signed up with. 3 Forgot password takes user to screen to fill out info to retrieve password reset code. 4 Logs user into their account and takes them to home screen. Once a user has logged in they will not have to log back in unless they log out on the app. Page 11

12 1.8. Child Screen User Interface Widget Table Page 12

13 1 When tapped, brings up list of all children available on the app. When a child is tapped, goes to the child page. 2 Brings up account options. Account options are - - View Account -Log Out 3 When tapped, brings up list of all children available on the app. When a child is tapped, goes to the child page. 4 When tapped, brings up list of all children available on the app. When a child is tapped, goes to the child page. 5 Shows what child page user is on 6 Shows what child page user is on 7 Pops up with 3 select amounts or an "other" option. User may click amount then click "add" and it will add that amount. If user clicks "other" it takes user to "add funds screen" 8 Pops up with 3 select amounts or an "other" option. User may click amount then click "add" and it will add that amount. If user clicks "other" it takes user to "add funds screen" 9 Current balance for child account 10 Current balance for child account 11 Auto-replenish option. If checked, auto replenish is on. If user un-checks box, pop up will come up and say "auto-replenish is being turned off." and will have a save option as well as a close box button. 12 Auto-replenish option. If checked, auto replenish is on. If user un-checks box, pop up will come up and say "auto-replenish is being turned off." and will have a save option as well as a close box button. 13 Dates of current menu 14 Dates of current menu 15 User can go to next weeks menu. Slides in from right. 16 User can go to next weeks menu. Slides in from right. 17 Open heart is not a favorite lunch. 18 Open heart is not a favorite lunch. 19 Closed heart is a favorite lunch. 20 When tapped, user is taken to favorite lunches page for that child. 21 Shows date of first day of week. 22 Shows date of first day of week. 23 Shows lunch menu for day. 24 Shows lunch menu for day. 25 Shows lunch menu for day. 26 Shows lunch menu for day. 27 This section scrolls on mobile so a user can see all lunches for the week as well as the see favorite lunches button. 28 The menu section scrolls so user is able to see all lunches for the week as well as the see favorite lunches button. All five days of lunches will appear on the actual app. Page 13

14 1.9. Favorite Lunches User Interface Widget Table 1 When tapped, brings up list of all children available on the app. When a child is tapped, goes to the child page. 2 Brings up account options. Account options are - - View Account -Log Out 3 Shows what child page user is on 4 Closed heart is a favorite lunch. 5 Closed heart is a favorite lunch. 6 Closed heart is a favorite lunch. Page 14

15 7 Allows a user to set an alert for that specific lunch. If an alert has been set for a lunch, this button will say "remove alert" 8 Allows a user to set an alert for that specific lunch. If an alert has been set for a lunch, this button will say "remove alert" 9 Allows a user to set an alert for that specific lunch. If an alert has been set for a lunch, this button will say "remove alert" Page 15

16 1.10. Alerts User Interface Widget Table 1 When tapped, brings up list of all children available on the app. When a child is tapped, goes to the child page. 2 Brings up account options. Account options are - - View Account -Log Out 3 Shows what child page user is on 4 User can pick a time (hour and minute) to have a text notification, notification, or both the day before a favorite lunch will be served. 5 For the hour to be alerted. 6 User can define minutes for alert 7 User checks box if they want a text notification Page 16

17 8 User checks box if they want notification. 9 Saves the alert. 10 lets user know they will receive notification one day prior to lunch Page 17

18 1.11. Account User Interface Widget Table 1 tap to go to add payment screen 2 tap to go to change payment screen 3 tap to go to delete payment screen 4 Shows subsidary status 5 Shows subsidary status 6 Show status per child 7 Allows user to view all alerts for lunches and low balance settings Page 18

19 1.12. Add Payment User Interface Widget Table 1 Credit card number 2 month of expiration 3 year of expiration 4 cvc code for credit card 5 save to add credit card. will give success message if credit card has been added successfully. information will not save if card number/date is wrong. Page 19

20 1.13. Change Payment User Interface Widget Table 1 When tapped, brings up list of all children available on the app. When a child is tapped, goes to the child page. 2 Brings up account options. Account options are - - View Account -Log Out 3 Lists child's payment methods 4 Lists child's payment methods 5 shows credit card info 6 shows credit card info 7 shows credit card info Page 20

21 8 shows credit card info 9 Saves the payment methods. Page 21

22 1.14. Delete Payment User Interface Widget Table 1 When tapped, brings up list of all children available on the app. When a child is tapped, goes to the child page. 2 Brings up account options. Account options are - - View Account -Log Out 3 Check box to delete credit card information. If credit card being deleted is associated with a child, a warning will appear to notifiy the user. 4 Deletes the credit cards. 5 unchecked cards will remain in account Page 22

23 1.15. Close Account User Interface Widget Table 1 Information about closing the account. 2 Confirming to close account 3 Must check box to close account 4 User must tap to fully close account Page 23

24 1.16. View Alerts User Interface Widget Table 1 When tapped, brings up list of all children available on the app. When a child is tapped, goes to the child page. 2 Brings up account options. Account options are - - View Account -Log Out 3 Lists child's payment methods 4 User checks box if they want a text notification 5 User checks box if they want notification. 6 Lists child's payment methods 7 User checks box if they want a text notification Page 24

25 8 User checks box if they want notification. Page 25

26 1.17. Lunch Menu User Interface Widget Table 1 When tapped, brings up list of all children available on the app. When a child is tapped, goes to the child page. 2 Brings up account options. Account options are - - View Account -Log Out 3 Shows what child page user is on 4 Dates of current menu 5 User can go to next weeks menu. Slides in from right. 6 Open heart is not a favorite lunch. Page 26

27 7 Closed heart is a favorite lunch. 8 When tapped, user is taken to favorite lunches page for that child. This button will be at the bottom of the menu. 9 Shows date of first day of week. 10 Shows lunch menu for day. 11 Shows lunch menu for day. 12 The menu section scrolls so user is able to see all lunches for the week as well as the see favorite lunches button. All five days of lunches will appear on the actual app. 13 Closed heart is a favorite lunch. 14 Shows lunch menu for day. 15 Shows lunch menu for day. 16 Open heart is not a favorite lunch. Page 27

28 1.18. Add Funds User Interface Widget Table 1 User enters an amount they wish to add to child account. 2 Adds the specified funds to the account. 3 Pre set amount for adding funds 4 Pre set amount for adding funds 5 Pre set amount for adding funds 6 Pre set amount for adding funds 7 When tapped, brings up list of all children available on the app. When a child is tapped, goes to the child page. Page 28

29 8 Brings up account options. Account options are - - View Account -Log Out Page 29

EZ Parent Center Directions Parent Sign Up and Purchase Preordering

EZ Parent Center Directions Parent Sign Up and Purchase Preordering Parents should contact your school (or caterer) when any type of support is needed. You can use the following link https://www.ezparentcenter.com/site/ezparentcenter_contact.aspx