Lunch Money Buddy: A conceptual app that allows parents to pay for their children’s school lunches from their mobile phones.
Skills: Interaction Design, Wireframes, Prototype Testing
In this fictional setup, Lunch Money Buddy allows parents and guardians to do the following with a school lunch account for their children:
- Sign up for an account.
- Fund the account.
- View account balance.
- View school lunch menu by child.
- View subsidy status.
- Favorite a lunch.
- Close an account.
I did the following:
- Personas were provided, which I analyzed. One was of a grandfather who takes care of his grandson while the other was a pair of parents who live busy lives.
- I created user journeys for each of the personas detailing where they would find the need to use the app.
- Then I created a sitemap of what the app can do.
- I fleshed out the sitemap with wireframes of the interactions and different screens.
Using what I learned from the user journeys, site map, and wireframes, including feedback from classmates, I put together a digital prototype of the app that allowed for the simulation of interactions and navigation. The prototype still resembles the wireframes, but has some color for different types of interactions and is in general a little more high fidelity.
They were loaded into the program Proto.io to simulate actual interations. https://matthewbarrett.proto.io/share/?id=b6e413fe-b2ec-4e11-8300-9f353f2a9427&v=6
Some of the interactions include:
- Logo: Return to the home screen.
- Blue Button: Confirm an action.
- Picker: Choose from a drop down menu.
- Switch: Swipe to turn on or off an option.
- Modal Window: A pop up window.
- X: Tap to close the modal window.
- Heart: Tap to add to your favorite list of foods.
- Search Bar: Search for specific meals.
- Check Box: Tap to toggle an option.
- Arrow: Tap to hide or reveal information.
What I Learned
There is a lot of work that goes into each interaction, from the larger scale navigation to simple buttons that confirm an action.
Things should work fluidly and not get noticed. Good design is invisible.
The structure of the site created in the site map helps determine what the design will be in the wireframes.