Lunch Money Buddy

Preview.png

The problem

Attachements

Personas.pdf

What The App Does

The Lunch Money Buddy app allows parents and guardians to do the following things:

Download and sign up

The parent can download the app from the Android or Apple app stores and sign up for an account using whatever email and password they choose, as well as a school-supplied access code. (Make up an 8-digit number for the access code.)

When the parent signs up, they should see their school-attending child or children in the app.

 

Fund the account

The parent can fund the account so that their children don’t have to bring cash to school. At a minimum, the parent should be able to:

  • Add one or more payment methods.
  • Add funds.
  • Select a primary payment method.
  • Change a payment method.
  • Delete a payment method.
  • Select whether they’d like balance auto-replenishment or not.
  • Turn auto-replenishment on/off.

 

View account balance

The parent can view their account balance.

 

View school lunch menu by child

The parent can view the upcoming menu of school lunches for any school at which they have children attending.

 

View subsidy status

If they participate in a school lunch subsidy program, the parent can view the status of their school lunch subsidy program account.

 

Favorite a lunch

The parent can “favorite” an upcoming lunch for their child or children. The evening before the favorite lunch will be served, the parent will be alerted. (As the designer, you will need to decide how this works - e.g., an app badge, alert, banner, text, email, etc.)

 

Close account

The parent can close their Lunch Money Buddy account, which will delete all payment types and auto-replenishment orders.


Actions

The beginning of the design process included gathering existing requirement documents, persona’s and stakeholder interviews. After collecting all the relevant documentation I created a site map and some preliminary sketches. After receiving feedback from these rough sketches I began the transition to a low fidelity digital format, to a higher fidelity interactive prototype.


Results

Site Map


Sketches


Wireframes

Setting up account (part 1)

User opens the app for the first time and is taken through a step-by-step enrollment process. The first step will be email and password creation, the second will be looking up the schools access code, the third step will be adding children to your account.

 

Setting up account (part 2)

The fourth step is where the user will add their payment information. The user can pay with a credit or debit card or by PayPal. There is also an option to look add a school subsidy.

 

Adding funds to your account

The user can add funds to each child associated with their account, or simply add funds and have it evenly split between their children. There will also be an auto replenish feature.

 

Checking school menu and calendar

User selects the calendar icon and selects the desired school at the top of the page. By default a week view is displayed with a toggle for a month view with abbreviated days and menu titles. This calendar would also show days where the school is closed for holidays etc. (Note there is an option to print these pages but I decided to cut that from scope after the fact.)

 

Changing payment options

User navigates to the settings “tab” selects payment options from the lost of settings and makes desired changes. Selects finish and is taken back to the settings page.

 

Landscape view of My Account and Menu & Calendar

The My Account and Menu & Calendar pages could benefit from a landscape view. The children in the account would align side by side and the menu items would have more horizontal space for labels. Menu would also be scrollable to show all of the content.


Comps

Enrollment

 

Account / Payment

 

Profile

 

Menu & Calendar

 

Settings 


Lessons

There are a lot of design decisions that go into even a simple app like this one. Learning a new prototyping tool (proto.io) as a design didn’t make things any easier. I met with teachers to find out how this app could be used. I found that using real content as placeholders makes a big difference when you are designing. For example, the school menu contains an entrée, veggies, and fruits, and multiple options within those categories. This caused me to completely re-think the menu and calendar screens.