lunch moneY BUDDY Process Report for Lunch Money Buddy: A Mobile Application for Parents and Students
Sara Tinnick
Kent State University UXD 61095-002: Interaction Design April - May 2018
Process Report
lunch moneY buddy
About this app Lunch Money Buddy was developed to help streamline the lunch-buying process. Parents can quickly add fund to their LMB account, ensuring their children always have enough funds to purchase a nutritious meal while at school.
"We want to keep our children healthy and happy." - Samantha & Jorge, parents of Hailee and Brenden
2
Sara Tinnick - Kent State University
Table of contents
1. GOALS 4 2. PERSONA OVERVIEW
6
3. RESEARCH
9
4. SITE MAPS
12
5. PROCESS
16
6. FEATURES
25
3
Process Report
lunch moneY buddy
1. Goals 4
Sara Tinnick - Kent State University
Project Goals
User Goals
Download and sign up
Easy access to calendars and menus
Adding funds to the account • Add multiple payment methods • Select default payment method • Modify payment methods • Modify automatic payment options
Simple methods for adding funds
View account balance
Straightforward, clear navigation
Access menus for individual children
Easy to use
Quick access on mobile devices Low balance warning alerts
Access subsidy information Denote favorite lunches Close/delete account
5
Process Report
lunch moneY buddy
2.Persona Overview 6
Sara Tinnick - Kent State University
On-the-Go Parents Parents:
Samantha, 37 & Jorge, 34 Employment: Full Time Use of Technology: Advanced Mobile Adoption: Great Most Commonly Used Devices: Laptop & Mobile
Children:
While Samantha and Jorge are devoted, motivated, and ambitious in both the workplace and at home, their disorganization sometimes gets the better of them. As mobile adopters, they utilize online bill pay. They are definitely technology-savvy. But their digital habits often catch up to them as they lose the school’s lunch calendar. Seeking a digital solution, they often turn to the school’s website, but its disorganization frustrates them as well. Hailee and Brenden are important to both parents, but the hectic lifestyle leaves them concerned about providing reliable lunch options. No one in this family is a morning person, and sometimes preparing lunches leaves them rushed and stressed.
Samantha and Jorge want a mobile solution which allows for easy, onthe-go options for adding funds to their children’s lunch accounts. Low balance warnings would ensure the children always have funds, even if they forget to prepare their lunches. The children would love to be able to plan ahead, marking their favorite meals, so they do not miss them.
Hailee, 12 & Brenden, 8 7
Process Report
lunch moneY buddy
Managing Technology Henry is like most typical retirees: he spends his time with friends, reading with his book club, and playing cards. While many retirees are enjoying the life of leisure, Henry is stressing over ensuring his grandson is receiving a healthy meal while at school. Henry was never a cook, and Joe buys his lunch every day. Henry worries he will forget to give Joe the proper amount each day for his meal. A mobile application allowing him to check the balance of Joe’s account would be excellent, except for one problem: Henry is not comfortable with mobile apps. After several friends urged him to transition to digital books on his eReader and to purchase a smartphone, Henry is ready to learn in order know Joe is taken care of in school. Henry needs clear, easy to understand application with large text and simple navigation.
Guardian/Grandparent
Henry, 70 Employment: Retired Use of Technology: Novice Mobile Adoption: Some Most Commonly Used Devices: Desktop
Children:
Joe, 14 8
Sara Tinnick - Kent State University
3. Research 9
Process Report
lunch moneY buddy
Mobile App: Facebook
Familiar Faces
Horizontal scrolling carousel with graphics and information
While developing Lunch Money Buddy, it was important to give users something they are familiar with to reduce the learning time needed for use. According to Business Insider, in 2017 81% of mobile application users had the Facebook mobile application. As of April 2018, there were 2.20 billion active Facebook users in the world, with 1.45 billion logging in daily. In the United States, 64% of users are over 25. This common usage creates patterns which can be utilized within other mobile applications.
Similar icons to aid feature recognition
10
Sara Tinnick - Kent State University
Mobile App: Huntington
Balance At-A-Glance Balance checking made simple
Due to the popularity of mobile banking, many users are becoming dependent on the technology employed by the applications deployed by financial institutions. Huntington Bank allows registered users who verify their identity via their settings page to view their balance just by launching the app. This ease-of-use feature was incorporated into Lunch Money Buddy by placing the family’s current balance, next charge date, and next charge amount prominently on several pages.
Similar placement of navigation icons
11
Process Report
lunch moneY buddy
4.Site Maps 12
Sara Tinnick - Kent State University
Original Sketches
13
Process Report
lunch moneY buddy
Site Map Draft 1 Site Map: LUNCH MONEY BUDDY
PARENT/GuARDIAN LOGIN Login
Exit to OS Biometric Setup Answer Security Questions Choose Reset Destination
Username Password Stay Logged In Biometric Login Forgot Username Forgot Password
Sign Up 1 of 4 User Details First Name Last Name Email Password
2 of 4 Security Questions Question #1
3 of 4 Accept T&C Email Updates?
4 of 4 Enter School Access Code
Answer #1
Question #2 Answer #2
Confirm Password
Text Message Phone Call Email
Profile Setup PARENT/GUARDIAN CHILD Home Phone Cell Phone Name School Work Phone Home Address Grade Restrictions Email Address Payment Methods Allergies Likes Preferred Contact Method Schools Enrolled Dislikes Comments Add Additional Parent/Guardian YTD Costs YTD Costs Estimates After setup completion or Login Child Username Child Password
Enter Reset Code Enter New Password Confirm Password
CHILD LOGIN Exit to OS Biometric Setup
Username Password Stay Logged In Biometric Login
Funds Available Menu Today’s Meal Tomorrow’s Meal Upcoming (Wk)
Likes Dislikes Comments Send Parent Msg Notifications
Site Map: LUNCH MONEY BUDDY After setup completion or Login Notifications
Messages Compose From Schools From Children From LMB Users Search
Today’s Menu(s) Tmrw’s Menu(s)
Schedule Calendar Cost Likes Nut. Info Restrictions Allergies Alternative Offerings
Dislikes Health Tracker
School 1
Comments
School 2
Alerts Estimates Missed Meals
Menus
Funds
Calendars
Acct Settings
Help
All Menus Child 1 Child 2 Calendar View School View Filter View
Balance YTD Spending Estimates Add Funds
Weekly Daily Monthly Yearly Cost Likes Dislikes Restrictions Per Child Per School Family View
Username Password Add User Manage Users Children Notifications Payment History Update Info Edit Payments Close Account
Tutorials FAQ Help Beacons LMB Updates School Updates Feedback Contact School Contact LMB
Manage Pymt Methods
Date
Auto Pay Check Subsidy
Rating
Year End Options
Frequency Ordered
Child Likes
Refund Rollover
Dislikes Restrictions
Choose Method
Allergies
Prepay Amt Per Child Family Total
When a meal is clicked in any view
Meal Information Photo Description Likes Nutritional Information Dislikes Cost Add to Likes Comments Next Offering
14
Username Password
PayPal Amazon Pay
Credit Card # Expiration Date
Credit Card Bank Account
CSV Name on Card
Account #
Billing Address
Routing #
Choose Method Add Method Edit Method Select Default Delete Method
Verify Refund
LMB School Low Funds Likes
Address Email
Dislikes
Security Q’s Phone
Allergies/Restrict.
Updates
Email Chat Phone Forums Add Edit Names Schools Delete
Home Cell Work
Profile Setup New Code Delete
Sara Tinnick - Kent State University
Site Map Draft 2 Site Map: LUNCH MONEY BUDDY
PARENT/GuARDIAN LOGIN Login
Sign Up
Username Password Stay Logged In Biometric Login Forgot Username Forgot Password
Exit to OS Biometric Setup Answer Security Questions Choose Reset Destination
1 of 4 User Details First Name Last Name Email Password
2 of 4 Security Questions Question #1
3 of 4 Accept T&C Email Updates?
4 of 4 Enter School Access Code
Answer #1
Question #2 Answer #2
Confirm Password
Text Message Phone Call Email
Profile Setup PARENT/GUARDIAN CHILD Home Phone Cell Phone Name School Work Phone Home Address Grade Restrictions Email Address Payment Methods Allergies Likes Preferred Contact Method Schools Enrolled Dislikes Comments Add Additional Parent/Guardian YTD Costs YTD Costs Estimates After setup completion or Login Child Username Child Password
Enter Reset Code Enter New Password Confirm Password
CHILD LOGIN Funds Available Menu Today’s Meal Tomorrow’s Meal Upcoming (Wk)
Site Map: LUNCH MONEY BUDDY After setup completion or Login Notifications
Messages Compose From Schools From Children From LMB Users Search
Today’s Menu(s) Tmrw’s Menu(s)
Schedule Calendar Cost Likes Nut. Info Restrictions Allergies Alternative Offerings
Dislikes Health Tracker
School 1
Comments
School 2
Alerts Estimates Missed Meals
Menus
Funds
Calendars
Acct Settings
Help
All Menus Child 1 Child 2 Calendar View School View Filter View
Balance YTD Spending Estimates Add Funds
Weekly Daily Monthly Yearly Cost Likes Dislikes Restrictions Per Child Per School Family View
Username Password Add User Manage Users Children Notifications Payment History Update Info Edit Payments Close Account
Tutorials FAQ
Manage Pymt Methods
Date
Auto Pay Check Subsidy
Rating
Year End Options
Frequency Ordered
Child Likes
Refund Rollover
Dislikes Restrictions
Choose Method
Allergies
Prepay Amt Per Child Family Total
When a meal is clicked in any view
Meal Information Photo Description Likes Alert Information Dislikes Cost
Username Password
PayPal Amazon Pay
Credit Card # Expiration Date
Credit Card Bank Account
CSV Name on Card
Account #
Billing Address
Choose Method Add Method Edit Method Select Default Delete Method
LMB School Low Funds Likes
Address Email
Dislikes
Security Q’s Phone
Updates
LMB Updates School Updates Feedback Contact School Contact LMB
Verify Refund
Allergies/Restrict.
Likes Dislikes Comments Send Parent Msg
Add Edit Names Schools Delete
Profile Setup New Code Delete
Home Cell Work
Routing #
15
Process Report
lunch moneY buddy
5. Process 16
Sara Tinnick - Kent State University
Feedback Incorporation • Employing the proper biometric logins for Throughout the development process, feedback was given to refine the wireframes into the final prototype. device types Specifically, the following areas were addressed: • Refining forms to decrease the amount of information presented to the user • Presenting critical information sooner • Utilizing the email address as the username • Refining the process to go back to previous screens. • Revisiting the navigation to reduce the amount of information present on the main screen. • Addition of a slide-in menu to allow users to access parts of the app from any screen, without returning to the main navigation screen.
17
Process Report
lunch moneY buddy
Refined Sketch 18
Sara Tinnick - Kent State University
Lunch Money Buddy
Student Main Screen
Notifications
FINAL PROTOTYPE made with
Wireframe
exported on 15/04/2018, 16:39
48/48
• Facebook-inspired carousel replaces Today’s Menu, Tomorrow’s Menu, and Menus Buttons • Notifications, Messages, and Settings buttons replaced with icons in the bottom tray • Slide out menu condenses multiple buttons • Help button replaced with a stationary icon in the top right corner • Funds-at-a-Glance provides critical information right away with an Add Funds button to streamline adding funds
19
Process Report
lunch moneY buddy
Lun
Annotated Sketch
mad
20
Sara Tinnick - Kent State University
nch Money Buddy
de with
Setup Complete/Confirmation
FINAL PROTOTYPE
Wireframe
exported on 15/04/2018, 16:39
14/48
21
Process Report
lunch moneY buddy
Refined Sketches
Initial Sketch
22
Lunch Money Buddy
Lunch Money Buddy Today/Tomorrow Menu
Lunch Money Buddy
School Menu Detail
Calendar: Weekly
Sara Tinnick - Kent State University
Lunch Money Buddy
made with
made withexported on 15/04/2018, 16:39
19/48
made withexported on 15/04/2018, 16:39
Today/Tomorrow Menu Horizontal
23/48
exported on 15/04/2018, 16:39
39/48
Wireframes 23
Process Report
lunch moneY buddy
FINAL PROTOTYPE 24
Sara Tinnick - Kent State University
6. Features 25
Process Report
lunch moneY buddy
Slide out menu to quickly access application features
Help readily available for those unfamiliar with the application interface
Add Funds button accessible from the home screen Funds available area provides quick access to critical information such as account balance, next payment date, next payment amount, year-todate spending, and estimated costs
Horizontal sliding carousel provides easy access to information
Confirmation screens certify actions have been completed and allow easy access to other features
Large, easy to read san-serif typography
Status bars indicate where the user is in a process
26
Sara Tinnick - Kent State University
Add one or more payment methods
Choose which method to use to add funds
Multiple payment options for every user
Set chosen method as default
Easily close LMB Account
Set chosen method as Autopay
Quick access to subsidy information
27
"I do my best to give my grandson a strong foundation" - Henry, Guardian of Joe