Lunch UX Hackathon Winner
Lunch UX Hackathon Challenge
44 teams submitted their best work to USDA Hackathon on Devpost with their eyes set on the $20,000 grand prize. The team sizes ranged from 1 to 15+.

I placed in the top 10 with an honorable mention, which got me $2000.

The requirements were strict, ensuring that a working and legally accurate form was generated. The form had to capture data, have form validation, and an easy way to export. It also had to adhere to meticulous guidelines about family and household information.

You can try the live app here.
 
 
 
Visual Design
I didn't have much time to spend on creating my own visual elements, so I used the US Federal Government Web Component Library. Seems appropriate for the setting, right?

A lot of custom stylization was still needed for things like form transitions, error validation, and grid layout. I opted to use flex box to ensure a responsive experience.
 
 
User Testing
I began user testing as soon as I had a semi-working form. I tested it with about 15 people, and did a couple of rounds of user testing on usertesting.com. I gave my participants fake family information (Name, family size, SSN, etc.) to simulate the need to look up information that wasn't already memorized.

Most feedback was about terminology and wording: "What's the difference between bi-weekly and 2x-per-month?". All participants used mobile phones or tablets to complete the exercise and said that the interactions felt smooth and clear.
 
 
Form Validation
One of the goals of the hackathon was to reduce user error. Each form screen uses the Angular form validation functions to check for the appropriate type of input (Email, phone, etc.) and also to make sure that all required questions are answered.

The error message is a simple red highlight that slides down whenever an error is introduced. The language is friendly and approachable, and my testing participants stated that they didn't feel like they were intrusive or alarming.
 
 
Storing Data
It took some fancy footwork (for me, at least) to get the data storing into Firebase in a CSV-ready structure. The data is validated along the way and, once submitted, restructured into a Firebase-friendly array of objects that display nicely when opened in a spreadsheet.
 
 
Built With
Lunch UX Hackathon Winner
7
209
1
Published:

Lunch UX Hackathon Winner

My submission to the USDA Lunch UX Hackathon. I came in the top 10 with an honorable mention.
7
209
1
Published:

Tools

Creative Fields