Lunch Money Buddy is a mobile app idea that allows parents and guardians of school age children to virtually manage various aspects of their children’s in-school lunch accounts.
A few examples of what the app does:
My Role
The project shows my ability to build an interaction design that can provide convenience, help save time, and offer an enjoyable experience for various users. It also displays my competency in creating a mid-fidelity digital prototype for usability testing and getting buy-in to the ideas.
Students with a negative balance on their lunch accounts are unable to pay for their lunches. Although the cause of this problem differs case by case, a mobile app that allows parents and guardians of school age children to manage their children’s lunch accounts can help reduce the problem. The app needs to be usable and helpful to users with different circumstances and various levels of technology skill.
To understand user needs, think about the app in context, define functionality needs, and inform user flows, various scenarios were sketched out as story boards for personas provided for this project. This process helped me think about the app and its functionality through considering how and when users would interact with and perform certain tasks on the app.
The story boards were translated and developed into the final four user journeys. This helped reveal content and functionality needs as well as screen flows.
With the user flows identified in the user journeys along with the app specs provided, content organization and navigational structure that support the personas were crafted as a sitemap. Through working on the sitemap, a few gaps in the user journeys were realized. The gaps were worked out to arrive at the final sitemap.
APP SPECS
The content organization and screen flows figured out in the sitemap and user journeys were translated as a series of wireframes. The wireframes illustrated content hierarchy, placements of interaction element, how users move around the app, and where the certain screen is located on the app.
To build a prototype that can be used for user testing and getting buy-in to the ideas, the following design process was taken.
The first time adding funds is made quick and easy, especially for the parents user model who has advanced technology skills.
Adding funds for the first time means that a user needs to add a payment method. Entering card information can be cumbersome especially for busy users. This problem is solved by offering the card scanning technology that auto-populates the card information. The user just needs to enter the CVV and zip code manually. An account to add funds can be chosen from the drop-down menu, avoiding the user from going through multiple screens to get to the specific account. By offering the preset amount, the user won’t need to type in the amount to add unless they want to customize the amount.
Checking out a lunch menu, viewing a child’s favorite lunches, and adding a lunch to favorites can all be done on one screen. The busy parents user model will appreciate this screen.
It seems like a lot of information to cram into one screen. The problem is solved by offering various pliancy and the right amount of microinteractions. The weekly calendar reveals the monthly calendar when the button below it is clicked. Tapping a star icon adds a lunch to favorites, which will be reflected on the monthly calendar. By swiping the lunch menu left and right, the user will be presented with the menu in different weeks. Selecting a child from the drop-down menu changes the calendar and lunch menu to correspond to the child. Setting up lunch alerts is made available through the contextual link.
Closing an account feature is made available under the manage profile setting found from the global nav and hamburger menu. The user journey is designed specifically to accommodate the guardian user model; hence, the task was made extremely simple and easy to do without requiring to perform unique gesture control.
To close an account, a user simply needs to click the “Cancel This Account” button. To prevent a user from accidentally closing an account, the pop-up window with confirmation message is provided. To view and close another child’s account, either the arrow next to the child’s name can be clicked or the screen can be swiped left and right.
The manage payment method is made available under the global nav and hamburger menu. For a user model such as the guardian persona, handling card information virtually can be an intimidating experience. To help the persona, one click edit and delete button are provided.
If a new payment method needs to be added, the guardian persona can perform the task by clicking the Add a Card button, which prompts the user to the Add a Card screen. Instead of scanning a card, which requires advanced technology skills, the guardian can manually enter the card information. When the new card is added, the auto-replenish setting can be set up so the user can forget about adding funds again.
Everything on the app is made available through the global nav, compensating the users who may have trouble using the hamburger menu. The notification is one tap away from the home screen.
The tasks are categorized by subject shown on the global navigation.
NEXT PROJECT