Lunch Money Buddy
Design the UI for a mobile app named “Lunch Money Buddy” that allows parents and guardians of school age children to manage various aspects of their kids’ in-school cafeteria lunch accounts.
I was provided with user personas and application specifications, which allowed me to focus solely on taking the gathered data and transforming it into a working prototype.
The design needed to address the following user goals:
- Quick access to lunch calendar and menu
- Convenient access to filling or refilling lunch account
- Access account through mobile while on the go
- A way to help track kid’s favorite school meals
- Alerts to warn of low balance, or a way to set up auto-replenish
- Easy, clear, and straightforward navigation
- Easy to learn
- Ability to check or add funds in one simple step, without additional sites or apps
- Simple to set up and use
The parent/guardian can download the app from the Android or Apple stores and sign up for an account using whatever email and password they choose, as well as a school-supplied access code. When the parent signs up, they should see their school-attending child or children in the app.
- Add one or more payment methods
- Add funds
- Select a primary payment method
- Change a payment method
- Delete a payment method
- Select whether they’d like balance auto-replenish or not.
- Turn auto-replenish on/off
The parent can view their account balance and the upcoming menu of school lunches for any school at which they have children attending. If they participate in a school lunch subsidy program, the parent can view the status of their school lunch subsidy program account. The parent can also “favorite” an upcoming lunch for their child or children and receive an alert the night before the meal will be served at school. The parent can close their account, which will delete all payment types and auto-replenishment orders.
User Journey Maps
I created user journeys for the personas provided in order to keep my focus on user goals throughout the design process. It also helped to define the functionality needed and inform the flow of content.
This example user journey helped to define the goals and emotions that users might have when first downloading the app. Using this journey I determined that during user sign up the user can skip sections in order to get right to the calendar.
The journey maps helped to create a sitemap of the app’s screens, further defining flow and navigation. While some screens changed and were added, the sitemap helped to start the wireframing process.
After I had a general sense of the screens that needed to be created, I began sketching wireframes to flesh out ideas for content, navigation, and interaction.
The sitemap and sketches were turned into basic wireframes, illustrating the structure of content and navigation. Basic interaction was applied to link screens together to create a low-fi interaction wireframe.
Finally, I added advanced interaction and visual design to create a hi-fi (high fidelity) prototype that addressed the user goals.
During the design process I received feedback from peers that helped the direction of interactions and allowed me to rethink certain areas. For example, originally I was set on including a calendar view for the meal schedule but based on feedback and testing I decided it would be better to simply allow the user to scroll through weeks.
While a calendar was mentioned during the research phase, it didn’t mean it had to be designed like most calendars. I’m happy with the end result based on positive feedback from my class.
Another UX element that I included was the ability to “like” a meal instead of using the terms “favorite” or using a star icon. While this app isn’t by any means Facebook, I still considered it to be a social app being that parents/guardians and students both work together within the space.
To try the prototype please view on desktop.
What I Learned
Don’t Sweat the Small Stuff
This project was my first experience using Proto.io or any prototyping software in general. In learning the product I realized that I was spending a lot of time trying to create pixel perfect screens and interactions. When it comes to design I tend to be a perfectionist and in this case that worked against me. If you are creating hi-fidelity screens for production that makes sense, but for a prototype that will most likely go through many versions and testing, spending time on the extra small details takes away time from the things that really matter.
On a positive note, I was able to learn this tool in a fairly short amount of time, which has given me confidence in my ability to learn new tools quickly.