Helping kids get the lunch they need
USDA's E.A.T. School Lunch UX Challenge
At a Glance
Problem: Students eligible for the USDA’s Free and Reduced-Price meals weren’t receiving benefits due to errors made when completing the paper application.
Solution: To facilitate access to program benefits and strengthen the program’s integrity, we developed a prototype of a digital application form based on UX best practices that could be adopted by school districts around the country.
Context: side project, working remotely in a group with 5 other members
Role: participated in design ideation and sketching sessions, expert review of current paper form, recruited front-end developer, aligned all of the Sketch files and ported them into InVision for user testing of prototype, produced project submission video
Time: 6 weeks
Lesson: Don’t let perfect be the enemy of good. There were plenty of areas that we wanted to research further or design elements that could have been tweaked, but we committed to submitting something by the deadline. This meant we had to strategically decide what items to leave behind (or ‘as-is’) in order for us to move forward.
RESEARCH // IDEATION // PROTOTYPING // FORM DESIGN // MOBILE DESIGN
Understanding the Problem
To get a lay of the land we reviewed the research provided by the USDA, analyzed existing competitive solutions, performed an expert review of the current paper form, conducted baseline testing of the paper form, and sketched storyboards of the current journey when applying for the Free and Reduced-Price lunch program.
Partial view of paper form Expert Review
Establishing Design Principles
Once we had a clear understanding of the pain points of the current journey and its corresponding artifacts, we established six design principles to guide our effort. They were:
Mobile-first design
Research shows that those under the poverty line depend 14x as much on their smartphones for critical services than those above the poverty line. Therefore, it’s critical that the form application be delivered as a mobile-responsive solution. Furthermore, due to the small size of mobile screens, designs will have to be simplified to their essence, which will be helpful in providing a solution that will guide users step-by-step in a way that reduces intimidation and confusion and supports the accurate completion of the form.
Help when you need it
The current paper form is limited in its ability to provide help in terms of explanations and definitions due to its form factor. Making the form digital means that users can be fully supported with contextual help when and where they need it. Providing the goal of the question, in addition to definitions, will help users know how to answer questions.
Simple, clear language
Since this is a government form, it already carries an assumption that it will be complicated and full of risk. While some terminology will have to remain (i.e. SNAP, foster child, migrant) due to government constraints, it should be supported by natural language where possible. The current form has a readability score of 17.8 (which is a post-grad reading level). By bringing it to an 8th grade reading level we can make the form more digestible and less intimidating.
Personalized flow
Leverage the technology of a digital form to carry information forward so that users don’t need to enter the same information multiple times or answer questions that don’t apply to them. Position questions that immediately determine eligibility up-front so that users will be skipped to the end if they are eligible. For example, any household that is on assistance is eligible for free and reduced-price lunch therefore they should be able to state they are on assistance first, rather than go through a series of questions about their and their child’s income.
Consistent design standards
Use the U.S. Web Design Standards created by 18F and the U.S. Digital Service to ensure simplicity, consistency, readability, and accessibility.
Ideation
After establishing our design principles, we began to have ideation and sketching sessions to get the ideas in our head out onto the paper. We sketched icons, flows, and interaction concepts. Through design reviews, we discussed which ideas followed our design principles and should be pushed forward, and which ones should make their way to the trash can.
Initial sketches
Wireframing & Prototyping
We transformed our sketches into basic wireframes and linked them together to form a low fidelity prototype in InVision.
Testing
Then our research teammates moderated usability sessions with friends and family and gathered insights to improve our design. We learned that the acronyms for programs weren't readily known to users, the income flow of the form was still confusing, and after completing the form it wasn't clear whether it had been submitted or saved.
Refining
Based on the feedback we received from the usability sessions, we went back to our designs and made improvements so that programs were written out, the income section was more straightforward, and the completion step was clearer.
Selected screens from final design
Project Outcomes
Our submission, Team Lunchbox, won the Popular Choice award for the challenge on DevPost. Our project was featured on the Bentley University homepage, as well as in Bentley Graduate blog, and the summer edition of the Bentley Magazine.
Video submission for the challenge