Inspiration - We believe in transforming everyday processes into delightful user experiences. As professional Business Analysts, that is what we do for a living! We saw a boring and intimidating PDF form and envisioned a fun and stimulating user experience.

What it does - The "Milk Carton UX" saves all user data to a Google Sheets database for a flexible database structure, along with dynamic dashboard statistics and formulas for acceptance or rejection (pending). Our vision is to have a Google Sheets database for each school or school district, and have the form dynamically post to the appropriate database. User data is also re-organized and autopopulated in a new version of the original PDF form. The hope was that this would keep documentation for application submissions, as well as prevent gaps in service when the web form is implemeted. The PDF form contains the applicant's unique NSLP ID# and is automatically sent to the applicant, as well as any other emails desired (such as the selected School District or School).

How I built it - Simple form structure via HTML5, but with fun and aesthetically pleasing "transform" commands to present the web form in the shape of a milk carton - the quintessential school lunch item. Basically, it is one cube, with dozens of unique layers on each side. As the user progresses (or regresses) through the form, the proper layer is brought to the front. Each user input is saved in the web browser via JQuery script, so if they must regress through the form, the inputs are saved, and cookies are not utilized. At the end of Section 4 of the form, the user clicks a "Submit" button which posts all JQuery variables to their appropriate fields within a unique record of the Google Sheets "database". Upon receipt, the database then automatically triggers the new record to autopopulate a PDF form and send it to the email address entered into the web form. Additional email addresses

Challenges I ran into - TIME! We started too late, and we were unable to fully finish our project. The form saves to the database and emails the PDF, but the PDF itself is not yet finalized. We also limited the form to two children and two adults, although the maximum number is virtually limitless. We have yet to install our validation logic, and we only have a couple of tooltips. Currently, the form does not transform properly for IE11, and we have not developed this form for a mobile device (yet). If selected or given a time extension, these features will be added. We hope that you will like our interface enough to allow us extra time to prove our concept. We're not coders by trade, so we definitely underestimated our time. But, we're hoping that you can appreciate the concept, even though our time management wasn't up to our standard!

Accomplishments that we're proud of - We had very little experience building webforms upon entering this hackathon. We also had zero experience with jquery, javascript, Google APIs, Google Forms/Sheets/Docs, and Google Scripts. We truly "hacked" our way through this project! We have learned a great deal, and no matter the outcome, we feel like we've already won!

What we learned - That the internet is a truly valuable resource, and there are some extremely knowledgable and helpful people out there! Seriously though, almost everything built within this submission had to be learned before it could be built.

What's next for E.A.T. for NSLP - Milk Carton UX - Hopefully, a meeting with the selection committee to discuss the implementation steps! We still have a lot of ideas that we'd like to act on, and we'd obviously like to complete all of the functionality we have promised. Anything you can imagine is possible, and we're willing to work with the selection committee and other members to make this web form the new standard for Free and Reduced Lunch applications. We're truly dedicated to making sure this project succeeds if you like our milk carton design!

Share this project:
×

Updates