The paper-based form for the USDA Food and Nutrition Service's National School Lunch Program and School Breakfast Program used to be as complicated as a tax return. An audit of the program revealed an astonishing amount of errors in form submissions and over $600 billion dollars in erroneous payments. The paper form was revised with a User-Centered Design approach, resulting in a simple 1-page document. We wanted to do the same thing with this online form.

What it does

This online form is a single-page web app that asks a series of questions to collect the required information.

How I built it

To begin, I built a simple prototype of the application using Axure (that my first time using the software, and I love it!). This gave me a way to test out my idea of using a series of questions to build a "Lunch App Wizard." I shared the link with my classmates and coworkers and collected feedback. I continued to improve the Axure prototype, incorporating suggestions and fixing errors as my users reported their test results. Want to see the prototype? (The password is "JMUux").

Andrew jumped in at that point and Bootstrap-ed my Axure prototype. Armed with a working mockup of the user interface, we charged into complete more usability testing. We adjusted colors, layout, and question types based on what we learned. After that, I got to the hard stuff...coding.

Meteor.js is a JavaScript framework that is relatively easy to learn and has loads of open source packages. In the month of February, I went from not being able to write a line of JavaScript to having this working web app! It includes packages such as Collection2 and SimpleSchema to organize your datasets. You can build forms with relative ease with Autoform. And, of course, Iron Router to make the buttons work.

Challenges and Conquests

Oh, man, so much! This was one giant logic puzzle.

Relying on my experience as an ELL teacher, I constantly refined the language to make it as simple and as user-friendly as possible.

Next Steps for Lunch UX

Internationalize the form with i18n!

More guidance and help text, customized user prompts, and a progress bar.

Try to run it on a mobile device without Internet access using Cordova.

Add user accounts to let school districts access the data with Meteor Accounts.

Built With

Share this project: