Lunch Money Buddy
UXD61095 INTERACTION DESIGN
During the Interaction Design course, I developed the interaction portion of a mobile application entitled Lunch Money Buddy. This application would allow parents or guardians to manage the process of funding and tracking their child’s lunch money accounts.
The application had to accomplish the following:
- Sign up for an account using their email/password
- Input an 8-digit, school supplied code to enroll the child in the program
- Add payment methods and funds
- Establish a primary method of payment, change the primary payment method, and delete a payment method
- Turn on/off automatic payment options
- View account balances
- View subsidy status
- Create a “favorite” lunch for a child
- Close the LMB account
Utilizing personas and raw specifications given, two families with varying needs were studied and the following areas were explored:
- User Journeys
- Sitemap Creation
- Creation of an Interactive Prototype
User Journeys
Sketched user journeys were created after reviewing personas for Henry, a 70 year old caring for his teenage grandson, and for Samantha and Jorge who have two children. These journeys had to demonstrate a logical progression through the application to complete tasks. Each journey had to include context, progression, functionality, device, and emotion, as each will affect the user’s goals, state of mind, use of the application.
Site Map
Building off of the user journeys, a site map was created to diagram the content structure appropriate for the application. Navigational structures as well as workflow had to be considered from one function of the application to another.
Interactive Prototyping
Starting with sketches, the application was drawn and scanned into a digital format for feedback from classmates. Once basic functionality was established, a digital version was created in Proto.io to include navigation, screens, and application sections.
Finalized Prototyping
Once feedback was incorporated, the prototype was refined with the inclusion of color, typography, and UI elements.
The following deliverables were created:
- Sketched User Journeys
- Sketched Site Map
- Two versions of digital Site Maps: initial and revised
- Proto.io prototype
- PDF User Report
- PARL based website with additional steps in the process and promotional video created in Adobe AfterEffects CC 2018
This project was eye-opening because it forced me to follow the steps I lecture my students on: sketch first, listen to the feedback, and do not become fixated on colors, fonts and imagery.
Initially, I lost sight of the basics of the application. I wanted to do so many “cool” things that I over complicated the process. I knew what the application should do, how it should function but I failed to consider how a user like Henry would feel when confronted by some of the more advanced features such as gestures, peeks-and-pops via iPhone. This became very apparent as I started to push the prototype into Proto.io. It got very unwieldy very quickly. I had problems getting screens to load and functionality was seriously undermined. It took several attempts on three different WiFi connection for me to determine I had just too much data. I did a file count and ended up with approximately 300 digital assets and the cutting began. I went back and refined the process and ended up with a far more streamlined application. The lesson: start simple and make sure it functions before adding more.
An excellent lesson was also that form follows function. I consider myself half developer, half designer, but the design side comes out more readily. I like color, I love fonts, and imagery calls to me. By taking nearly 6 weeks to work on the prototype before working on color, image, or font choices, I focused on the functionality first. In the end, I feel my product was so much stronger because it was built on a solid foundation.
