Lunch Money Buddy App

Gray Structure

APP REDEVELOPMENT

UX DESIGN STUDY 

OVERVIEW

The Lunch Money Buddy Application was a project for the Kent State University for its Masters in User Experience Design program. The app was designed for parents and legal guardians to manage their kids’ lunch meals at school. 

CHALLENGE

The application was created to help parents monitor and oversee their kids’ meals from anywhere, including kids that are attending different schools. It also gives parents the security of controlling the funds from their end, and the relief of not having the kids carry cash to school. Moreover, parents who are concerned about meal habits can choose the meal of their choice and make sure that the child eats healthy food (and not just sweets or junk food). 


To design this project, we were provided with personas of a couple and an elderly man who would be able to do the following in the application:

  • Sign up for an account using email, password and school-supplied access code (8 digits)

  • See the kids’ information on the home screen

  • Fund the account from a different type of payments and also include auto-replenishment

  • Check account balance

  • Ability to view subsidy status

  • Mark lunch meal as "favorite"

  • Receive notifications about the upcoming meal

  • Close account and delete all payment information

 

 

ACTION

Using these deliverables for application and taking into consideration persona needs, we created a user-centric functional prototype that consisted of the following processes:

 

  • Planning of 4 User Journeys

  • Creating a sitemap

  • Presenting mid-fidelity wireframes

  • Adding dynamic interaction into the high-fidelity prototype​​

User Journey Maps and Scenarios

The user journeys and scenarios were developed using various personas. Each reflects a short story of a user’s actions and interactions with the application. The interaction includes the context of each step, its progression, the functionality of the app, and the emotion experienced throughout. 
During this stage, we were able to think through not just how to build the application but also include the easiest possible way to execute and complete the action in its entirety. 

Site Map

The next step involved developing a sitemap where we organized all of the steps needed, from the user’s journeys to the checklist form that must be completed. The primary idea was to present the app's content in a hierarchical way with a navigation flowchart. Our main options were to include the kid's name, daily menu and account settings. From each option, the user would be able to easily access their financial payment, daily menu based on the school they attended, user settings, and much more. For UX purposes, we used familiar words and meanings, which also made the application more accessible. 

 

Wireframes

By using the sitemap, we were able to put all of the ideas into low-fidelity wireframes that covered a majority of what would appear in the application. The primary goal was to present all of the features in the application, and showcase a logical transition between the pages, as all of the details were documented and mentioned in the sitemap.  

 

Prototyping

The final step was to add an interaction display to the application by using prototyping software Proto.io. We finished the remaining pages and included the interaction by connecting the pages to present a fully functional application. The user can thereby access the login page and depend on their action to get to the specific screen that they desire.

 

We also added UI elements for a better experience, and added affordances through familiar icons and logos. This would complete the goal to understand the user flow and ensure that all of the features work in a more quick and efficient way. 

 

RESULTS

Using feedback from the other designers, we made a few changes. As an example, we added a current balance to the home screen, redid the menu options and advanced the interactivity with several new options. For instance, the Lunch Money Buddy needed to be tested by real users, and all of the ideas that were originally designed were validated as well. 
We would also recommend conducting further research to determine calendar features and settings, add customer support, and include additional notes to the end user. 

 

 

Vili Marketing

  • White Facebook Icon
  • White Instagram Icon

917 732 3734

Boston, MA

New York, NY

Philadelphia, PA

Tampa, FL

Seattle, WA