< Return Home

Lunch Money Buddy App


I designed a mobile app to give parents and guardians of school age children a convenient and effective tool for managing their student’s in-school lunch accounts, add funds, view balance, set up notifications and schedule upcoming lunch options. To begin the project, I was provided with previously conducted research deliverables including personas, app specifications and user requirements. Using these deliverables as a foundation for the project, while accounting for the needs, goals and motivations of the app’s primary users, I implemented a user-centric design process to create a useful, useable and functional app prototype. This process included planning four user journeys, creating the app’s architecture through a sitemap, representing content, information and navigation within mid-fidelity wireframes and adding dynamic interactions into a prototype. To test the quality of the app, validate design decisions and evaluate core functionality, I concluded the project by putting together a usability test proposal.

To meet user goals and project expectations, the app needed to include seven primary requirements. While these specifications were required, the final prototype featured additional functionality not included below.

  1. Download and sign up. Parents and guardians can download the app on their device, use an email and password to sign in and enter a school-issued 8-digit student access code.
  2. Fund the account. Parents and guardians can add payment methods, add funds, select a primary payment method, change payment methods, delete payment methods and auto-replenish the account.
  3. View account balance. Parents and guardians can view the account balance.
  4. View school lunch menu by child. Parents and guardians can view available lunch menu options among their children.
  5. View subsidy status. Parents and guardians can see if their child is eligible for a lunch subsidy.
  6. Favorite a lunch. Parents and guardians can favorite a lunch and receive notifications about an upcoming meal.
  7. Close account. Parents and guardians can delete their account at anytime.

User journeys: representing key scenarios and interactions

Using the primary personas and application requirements, I developed four user journeys to represent scenarios for which the user might interact with the Lunch Money Buddy app. The goal of each journey was intended to help identify key app functionality, understand user behavior and communicate possible outcomes for the project. Using a progression-based model, I illustrated each step of the user journey through text, hypothetical quotes and representational icons. To provide additional clarity and context for each journey model, I included sequential phases, emotional state, performed actions, digital touchpoints, device used and user location.

View all four user journeys

Sitemap: mapping the project's hierarchy

To account for application specifications, I created a detailed sitemap to organize and present the app’s content hierarchy and navigational flow. Because the primary method for managing the lunch account is through a mobile app, I recommended a deep and narrow framework for the platform’s information architecture. This ensures that users are presented with a limited and more focused selection of available entry points.

Taxonomy. To ensure that users can locate the app’s key functions, I designed three global access points, including Lunch MenuPayment Information and Account Management. These categories were influenced by the result of an internal card sort exercise.

Organizational scheme. To help users more easily interpret and locate content housed within the app’s navigational hierarchy, I selected a single, topic-based organizational scheme for the global navigation. However, for the local navigational structures, I adopted a hybrid scheme to account for both topics and action-based tasks.

Labeling. For accessibility, I used common and conventional words and phrases to label the app’s navigation and headers.

Content organization. To organize and catalog the app’s content, I labeled each of the navigational elements and content components with a unique identifier number.

Wireframes: establishing structure and prioritizing content

To document navigation, content placement and user flow, I sketched, iterated and designed mid-fidelity annotated wireframes for a few high-level user tasks. The primary goals of the wireframes included demonstrating the login and sign up process, highlighting lunch specific details, adding funds to a child’s account, accessing the app’s account settings and managing notifications.

View Annotated Wireframes & Sketches

Interactive prototype: creating a functional representation

Using prototyping software, Proto.io, I translated the static wireframes into an interactive prototype, while accounting for navigation, flow and microinteractions. In addition to the primary wireframes, I designed the remaining screens in order to create a full app experience for the user. The goal of the prototype was to document and represent the interactivity of the app’s key functions and ensure that users could complete their primary lunch-specific tasks in a quick, effortless and efficient manner.

View Non-Interactive Prototype

Usability test plan: outlining a plan to assess the project

To meet the needs and expectations of the target audience, I created a detailed usability test plan. The test plan included project goals and objectives, participant and recruitment requirements, a methodology process and usability metics. To measure performance, understand user satisfaction and gather results, the usability test plan included the following goals.

  • To assess the learnability of the app’s core functionality among first time users including the length of time and number of clicks it takes a user to complete the app’s sixteen primary tasks
  • To identify any accessibility concerns, challenges or problems with the design’s interface and architecture
  • To establish a benchmark of user performance
View Usability Test Plan