Image
Top
Navigation

Lunch Money Buddy: Mobile App

Back to Portfolio

What is Lunch Money Buddy?

The app allows parents and guardians of school age children to manage various aspects of their kids’ in-school cafeteria lunch accounts.  The parent can…

  • Download & Sign up
  • Fund the account
  • View the account balance
  • View school lunch menu by child
  • View subsidy status (if they participate)
  • Favorite a lunch
  • Close the account

User Journeys

The below user journeys were based on provided personas of Jorge & Samatha – two busy parents who are familiar with technology and Henry – grandfather who is not very familiar with mobile technology.

Actions & Results

The user journeys aided in creation of the sitemap and process flow of the interactive prototype.  It is important to keep the user journeys and personas in mind during the creation of the mobile app as to avoid any designer bias.

Site Map

Actions & Results

This sitemap was created using Gliffy.  I found that breaking up the site into different shapes and colors helped me visualize the flow better.  Creating a thought-out site map lead to a  smooth process to create wireframes.  Though this ended up not encompassing every screen the app ended up having, it was a great launching point for the greater picture.  

 

First Round of Wireframes

Adding a Payment Method

The following wireframes show the process of how a user of the Lunch Money Buddy app would add a credit card to refill their children’s accounts.

1. This placeholder represents the Lunch Money Buddy logo which when tapped will bring the user
back to this HOME page.
2. The user can either tap the arrows or the dollar amount to continue to the CHILD’S INFO screen.
3. These three icons at the bottom are a global menu that the user can tap to access the Lunch Menus, notifications, and account settings.
4. Much like on the HOME screen, the user can tap the arrow or dollar amount to continue to the
CHILD’S ACCOUNT screen.
5. Users are able to see what type of payment is being used for their child’s account. If there are any
changes that need to be made at this point the user can click ‘Edit’. They can also remove the card
from the account.
6. Previous lunches can be favorited on this menu. The user can scroll through their child’s lunch
history and tap for more information on each meal.
7. On the CHILD’S ACCOUNT screen, the user can turn on auto replenish and select the amount that
will be replenished on a weekly basis.
8. Much like on the previous screen, the user can edit their payment methods
9. Additionally users can add payment methods by clicking the green Plus icon.


10. The user is able to tap on which payment method they would like to add to their account.
11. The user is able to input their card information on this screen.
12. Once the user taps save, if their information is inputted correctly they will be able to use their card
for the account.
13. The success screen denotes the user can now use their new card and go back to the HOME screen.

Landscape Options


Actions & Results 

After completing research of other financial apps, along with collaborating with my peers, we  realized there was no need for landscape options.  This would not only cost time and money for the client but no financial apps utilized a landscape view.  As for deciding design, I was influenced by various financial and retail apps.  I was interested in looking at how a user checked out and stored their financial information, similar to the tasks a user can perform with Lunch Money Buddy.  Etsy, Chase Bank, Starbucks, and Vibe Credit Union all provided insights to process flow.  I was able to complete a heuristic evaluationin order to find what worked and what failed among these apps.  

There are many more wireframes that were created and subsequently tossed because I had a better idea for layout and function.  Only through a process of trial and error was I able to arrive at the final prototype.  

Interactive Prototype v 2.2

Actions & Results

The choices for the LMB app are correct for the provided personas because it encompasses large icons that are easy to read and access while providing simple screens that are not overloaded with information.  I tried to avoid information and icons that were not necessary to the base function of the app and focused on taking the user from point A to point B, something important to busy parents Jorge and Samantha.  

It was important to keep user journeys in mind in this final stage, especially when users could run into trouble.  I had to be in a state of thinking how the app would resolve user’s pain-points.  For example, Jorge needs to refill his daughter Hailee’s account because it had a low balance.  I attempted to resolve any frustration Jorge may have by creating a simple process to add funds:

  • Tap Hailee’s name
  • Add funds to account (or turn on auto replenish)
  • Select payment method and amount
  • Confirm – Success screen follows

Challenges

In order to keep the app organized it was important that I kept my sitemap in front of me.  I made sure I highlighted each section as I created a screen for it in Proto.io.  The sitemap provided the overarching structure of the app but was fluid enough for me to make edits along the way when necessary.  

In art school I was told that you do not build your house room by room, you build everything one step at a time.  I found myself doing this, except my process turned to out more along the lines of working on the site map, building a wireframe, creating a couple screens in Proto.io, and then back to sketching wireframes.  This was definitely a poor choice in process and ended taking extra time, though now I know better for next time.