Image
Top
Navigation

Lunch Money Buddy: Mobile App

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

While I was reviewing my personas of Henry and Samantha & Jorge it was important to consider the types of actions that they would take using LMB, not necessarily how I as the creator would use it.  I was not sold on the intitial implentation of what I considered to be arbitrary graphs within the user journeys, but found visual representation of emotion of a process to be useful in pinpointing pain-points.  These user journeys aided in creation of the sitemap and process flow of the interactive prototype.  One question I do have is that, although I tried my best to project the personas into the user journeys, how much of what I projected is biased off of my own experiences using technology and what I know about people?  It is important to consider this implication throughout the UX process.

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.  I would have sketched out more with paper and pencil but I am definitely prone to digitizing right away.  It is so much faster for me than sketching on paper.  (This process can be seen in any of my illustrations as well, thank you Wacom Intuos4!)  Creating a thought-out site map lead to a smoother time creating wireframes, though this ended up not encompassing every screen the app ended up having.  

 

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 

The first round of wireframes was pretty insightful.  After doing some quick research of other financial apps along with speaking with my peers, we all 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 my credit union all provided me with useful process flow.  I was able to take notes and follow a string of interactions as well as recalling what I found frustrating in 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 my final prototype.  

Interactive Prototype v 2.2

Actions & Results

A culmination of wireframes, revisions, and constant critiques helped me arive to my final prototype.  The choices for my app are correct for the provided personas because my app encompases large icons that are easy to read and access (for Henry) 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.  I made sure to include all intended functions of the app by setting up those screens first to make sure I did not miss them.  These included adding funds, selecting, changing ,or deleting a payment method, adding a child, etc.

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 instance, Jorge needed 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

It is a short process but anything with more frills may leave this busy parent irritated and wanting to get along with the rest of his day.  What resulted is an app that my personas would be able to use with ease.

Lessons Learned

This was my most in-depth exploration into UX.  What resulted was a learning curve using Proto.io as well as how I wanted to organize my own process flow of creation.  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.  Though this was helpful in the beginning, it became apparent that I did not account for additional screen; if the user needed to be told they completed a task or if the registration section needed more details or to be organized differently.

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.