EAT School Lunch UX Design Challenge
I was a member of Team Lunchbox, that built and submitted a working prototype in DevPost’s design challenge to create the USDA’s first-ever model electronic application for households that apply for free or reduced-price school meals. The project was submitted in March of 2016 and the Team Lunchbox submission won the People’s Choice Award.
Team member Alex Tran received free and reduced lunch as a young student. Although he was lucky to always had what he needed to do well as a student, he saw firsthand how important it was to have good nutrition to learn. Our team strived to make it easier for all people who could qualify for free and reduced lunch to apply for the the program in a way that’s simple and not intimidating so that their kids have the best possible opportunity to learn.
Before creating a prototype and testing our solution, we wanted to hang out in the problem space a bit. We tested the current paper form, with users that were familiar with filling out complicated forms. Even for these experts, it was a doozy.
I facilitated a feedback session with Bentley University’s Office of International Education (OIE). From the feedback garnered there, combined with our own expert review, we were able to identify two key problem areas:
- Form is confusing: there are many, many fields in the current form, and depending on the user, only a subset of those fields will be used. The flow of the form is just not intuitive, nor welcoming.
- Form is intimidating: One of the goals of the project is to get more users to submit this form. If a user is intimidated by the entire process, they are significantly less likely to submit, even if they may be eligible for benefits.
Based on these two key user issues, we adopted the following design principles:
- Mobile First: Since this is a web based application, it was important to offer a mobil solution, as mobile usage is now outpacing desktop. An added consequence of a mobile first strategy is that it can reduce confusion as it simplifies and modularizes the process, and the system can control what relevant data each user needs to see.
- Welcoming Language: Using natural language that simply explains the process and exactly what is required gives users a chance to set reasonable expectations.
- Help Proximity: This is a complicated process which requires some help, both in definitions of key terms (Foster Child, Runaway, Migrant..etc) as well as scaffolding of subprocesses that allows the user to access help when they get stuck, and become more confident as the process moves forward.
- Intuitive Flow: The current form doesn’t fit the mental model of what our team and our testers feel is how a form should organized, and it’s not optimized to decrease user error while increasing the likelihood of a user successfully completing it. By redesigning the flow of the form we can provide a smoother transition from the varying sections as well as use the system to personalize the user’s path. For example, our version starts with the individual filling out the form that confirms, at the very least, a contact if the form is abandoned, and more appropriately fits the conventional mental model of a government form.
We iterated through paper prototypes, hi-fidelity mockups, and ultimately our coded solution to increase the usability of our product. The app is built with HTML, CSS, JS, and PHP on Bootstrap and hosted on Github.
We were challenged by not having access to the target population to do user research with. So we did the next best thing — we performed web research to find forums where users were talking about their experiences. There we found the frustrations and challenges users had navigating to find the case numbers they needed to fill out the form. We also conducted user research and testing with as many people as possible to remove further usability issues.
We’re very proud of our user-centered design, as well as our People’s Choice award.
Originally published at andyhollenhorst.wordpress.com on January 29, 2016.
