Forms are an essential (yet often overlooked) part of designing a digital product. Even the simplest digital form represents a significant amount of interactions between the user and the system. For a program like the NSLP, the application form is critical because erroneous information can have serious repercussions for the children involved.
According to the USDA, “... more than two-thirds of NSLP lunches were served free or at a reduced price to children from low-income households.” Despite this benefit, 75% of underpayments result from improper reporting from households, which indicates challenges with the current paper application forms. These issues can be addressed effectively in a digital form, but only when it is deliberately designed to minimize user errors.
What it does
SAMS is not simply a digital translation of the existing paper form. It takes advantage of the interactive nature of digital and applies behavioral UX principles to create a better experience.
- It takes off cognitive weight off a long form by grouping questions and displaying them to the user one section at a time. It also skips section if certain criteria is met (e.g. if the household receives assistance, the applicant doesn’t need to fill out income information).
- It validates the user’s information as they are entered, and displays error messages accordingly to allow them to fix errors sooner rather than later.
- It provides default values when appropriate to improve the form’s efficiency and reduces burden on the user. For instance, in the “Household Income” section, the first adult’s name is automatically filled with the signer’s name (provided in the beginning of the application) and the income values are defaulted 0 so the user doesn’t need to enter this manually if they receive no income in that category.
- It is keyboard-friendly and accessible, allowing users with varying levels of physical abilities to complete the form.
- It works on mobile as well as desktop.
- It strikes a balance between keeping the application clean and displaying helpful information. Help texts are placed contextually on the field or title, and they are hidden but can be triggered by the user. Additionally, informational texts are always shown but given distinct visual treatment to help the user differentiate it from other parts of the application.
How I built it
On the front-end, the application is built on top of the US Web Design Standards with some modifications to the visual styling (CSS). The interaction logic and UI animation are handled via jQuery.
On the back-end, the application uses PHP and stores the user data using MySQL.
Challenges I ran into
Architecting and building a smart form with skip logic, validation rules, and reusable information proved to be no small task. I spent a good amount of time building the features bit by bit, testing them, and re-testing them before finally arriving to a prototype that can handle different types of cases.
Being a one-man operation has its own set of challenges. On one hand, I could make decisions and execute quickly, but on the other hand, I could not work on multiple things in parallel (like a team would be able to).
I also had some difficulties interpreting the requirements for the skip logic, since there seemed to be conflicting information floating around.
Accomplishments that I'm proud of
The final prototype is pretty robust and includes key features that reflect good UX best practices. It handles common and edge cases elegantly, while simplifying the application process for the user.
In general, users who tested the application were able to complete it without much difficulty. When there were ambiguities, the instruction and help text were enough to guide the users accordingly. If there were errors, the system showed enough information to help users fix them.
What I learned
After testing the prototype with a number of users, I discovered that parts of the form could benefit from more explicit description. For instance, two users mistakenly entered their personal info in the first section, even though it’s meant for the children.
Additionally, some users expressed hesitation when prompted to fill out migrant status for fear of how this data will be used. This made me realize how sensitive this information might be for some applicants, which led me to include an explicit informational text to assuage the user’s concerns.
What's next for EAT UX
SAMS is the first step to creating a better, more user-friendly experience for those who wish to participate in the free/reduced price lunch program. Converting this into a digital experience also makes the school admins’ lives easier because they can now access and process the data much more easily.
SAMS demonstrates that digital interaction with public agencies need not be a frustrating experience. Beyond the school lunch program example, I hope that SAMS paints a new vision of what an application form could look like for US government agencies and how it can greatly benefit all the parties involved.