The home screen. Depending on the url, the district is delineated by id
The first screen includes the basic family information so they can be contacted. Tooltips help guide the user, and validation is very clear
The second screen - is the family on assistance?
If the family is receiving benefits, they are fast-tracked to the end.
If the family does not receive benefits, they input their children's info
Depending on the children's status, the family must enter income information
This page includes the entire income questionnaire, including SSN info
The non-mandatory race/ethnicity page
Confirm your information here. You can always go back and edit
If all is well, confirm and the data is saved to the database
The admin backend shows one district's information, with downloadable data available.
The goal of this hackathon is to create a highly usable, responsive, adaptive form that will reduce errors and aid families in applying online for free and reduced-price school lunches. As a parent with children currently in the public school system, it is my hope that, by building this hi-res form prototype, I can support the government's efforts to aid this group of school children and their families. I chose the color scheme specifically to inspire families to pick healthy choices - even if they're doing something as mundane as filling out a form.
What it does
This form is accessible, responsive, and adaptive.
Since it is a government form, it includes an accessibility plugin designed for Bootstrap and built by Paypal Engineering for use on screen readers and other handicap-accessible web tools.
The form is designed to be responsive using Twitter Bootstrap and Kendo UI css for styling so that it will display well on small screens (smart phones) - many of my testers tested the form on a mobile device and reported back that it worked well.
Most importantly, the form is meant to be adaptive - based on user input, different parts of the form are shown. The workflow supports four different 'personae' - a family who receives SNAP or TANF benefits, a family whose children do not receive these benefits but ALL OF whose children are all categorized as having 'status' as foster, runaway, homeless, etc, a family who does not receive benefits but SOME OF whose children are categorized as having 'status' as the above family, and a family who have NO children in that category. Depending on the category of the family, the form shows or hides sections, or displays or hides validation.
The tools used in this app are all open-source and the app itself is licensed under the MIT license; see the ReadMe on Github for more information.
The form is also is designed to triage data by district. By changing the URL parameter for 'district' on the homepage and the admin backend, it allows districts to isolate the data flowing into the form; the Wellesley School District, for example, is district number 0317 according to the CKAN API, and a school district could ask all their potential meal recipient families to fill out the form using a url such as http://eatlunch-usda.herokuapp.com/#/?district=0317 to associate families with a district id in the database.
How I built it
This form is built using a technology stack that I have blogged about elsewhere:
- MongoDB - for the database tier
- Express.js - for web routing
- Node.js - for the server side
- Kendo UI Core - for client side routing, page behavior and widgets
- Hosting by Heroku for low-cost hosting
Challenges I ran into
I had some issues with database design, because I am more used to designing relational databases rather than no sql solutions with nested data structures. I had to do a bit of refactoring mid-project. I was particularly careful about UX as this is a UX challenge, so I tried to stick to my '10 form design decisions':
- If a field is irrelevant, it is not displayed. SSN numbers, for example, are requested from and shown to only some users
- If data can be generated by the app, it is input behind the scenes. An example of this is the date, which is set when the final form submission is completed
- The user is always told where s/he is in the app by a top progress bar
- Buttons are disabled until validation passes
- Tooltips are regularly available as prompts to help the users
- Form validation is extremely visible and clear, either as inline error messages, toaster popups at the top, or bars at the top, explaining errors clearly
- Users can go back and correct data, by means of the back button
- Data is editable via popups
- Data is sorted by school district, as set on the home page via the url variable (?district=xxxx)
- Typography shows a hierarchy of importance as the form progresses. Each page has a gradation of type.
Accomplishments that I'm proud of
I work full-time and have a family, and I'm happy that I could complete this project! It was a big technical challenge but it helped validate the usefulness of the web stack that I developed (M.o.N.K.E.y, previously M.I.K.E, when we could swap out Node.js for io.js). For some reason I am particularly happy with the jSignature plugin that was really fun to play with even for my testers. It was cool to see the data collected by that plugin saved right into the database.
What I learned
I have never built a full fledged app using this particular tech stack, so this hackathon gave me a lot of good code samples I can use going forward. I re-learned how important user feedback is. I incorporated many of their comments in the final design.
What's next for Peas and Carrots
Software is never finished, so many iterations could be made to improve various areas. In particular, the admin area could be locked down with a password. It would be interesting as well to further customize the app according to the district since I built in the ability to set the district Id.