Project

Attempt to develop a easy to use online application that would help parents apply for free or reduced school meals for their children.

Goals

We wanted to make the form easy to navigate and break down the form to have clear steps that can guide the user through as well as improve the accuracy of submitted information.

Design

Chose to build a single page app using react.js to make the experience smoother when moving between the different slides. We used more a material design UI to help highlight the areas the user needs to input information from the instructions. Also by separating out each child and adult into a separate card we could help the user focus on one person at a time to help improve accuracy and decrease confusion.

Building in navigation was also important so the user could easily go back and make changes if they realized something was wrong but we wanted to keep the form data the same so the user would not have to re enter information again with some exceptions.

We also designed the web app to only display relevant information that is needed to make the process easier for the user. For example if you check assistance program box in the household information slide then after you enter in the child information you will be taken to the assistance program page where you can enter the case number. You will then be taken to the review page for submission without a box to enter in the SSN. This helps reduce errors and improve efficiency and confusion.

Lastly we also designed this to be easily modified going forward. For example the help box can be easily modified to add relevant information for each school district and check boxes can be easily added or taken away without having to worry about formatting.

Validation

Another import goal was to build in validation which is important for reducing errors in the submission. We built numerous checks to make sure information was entered correctly and by separating the information into slides we could build in validations in each slide to make sure information was checked in segments so a user could easily make corrections before moving on to the next slide.

Exporting

For exporting we decided to save everything in a JSON file when the form is submitted. We chose this format because it allows for the most versatility in choosing what to do with the data. You can easily export this to CSV or save the date in a database. This also makes it possible to easily let the user come back and modify an application. Each school district can choose what the best option is for them.

To View and export the JSON files you can go to http://lunchux-gtjt.herokuapp.com/applications/ to view all the submissions. You can download the files from this directory. Alternatively if you go to the folder on the back end at lunchux/assets/applications/ you can see all the saved submissions and download or copy the files.

Usability Testing

For usability testing we submitted a few slides to next some parts of the UI on Usability Hub. You can see the results by clicking on the links. Usability Test 1 Usability Test 2 Usability Test 3

Developed in cahoots with Garston Tremblay

Built With

Share this project:
×

Updates