Building Forms Faster on Vets.gov
Our first form took us 5 months to produce. Our last one took us 5 days. Here’s how…
By Anne Kainic & Jeff Balboni
There are hundreds of forms across the Department of Veterans Affairs (VA) that Veterans can choose from and fill out in order to access their benefits, like applying for VA health care or receiving education benefits. These forms are spread across a variety of disparate websites with varying requirements and levels of accessibility. This makes it complicated and time-consuming for Veterans to find the information they’re looking for.
For the Digital Service team at the VA, our task is to migrate many of the hundreds of VA forms to Vets.gov, which serves as a single destination where Veterans can go to discover, apply for, track, and manage the benefits they’ve earned. In doing so, we’re improving the user experience of applying for benefits and making these forms more accessible and easier to navigate.
One of the biggest challenges we’ve faced is that it takes a long time to build each form. This post describes how we cut down the time it takes us to build a form from several months to only a few days.
First, let’s talk about where we started: the very first form we built on Vets.gov was the health care application. It was built with a React front-end, and our team created the custom form components needed to build it. We started development work in February 2016 and launched the application in June 2016 after about 5 months of development work. The time it took to complete this form encompassed discovery work around VA internal systems, building the form itself and the underlying APIs (application program interface) to communicate with these VA systems, setting up the build and deployment infrastructure from scratch, and testing the form with Veterans and stakeholders, collecting feedback, and iterating.
The next form we built was the first of six applications for education benefits. By leveraging the work we did on the health care application, we were able to reuse many of the custom components we had already created. It still took our team 2 months to build the form, from September to November of 2016.
While 2 months was an improvement, it still wasn’t fast enough for us to be able to migrate so many forms to Vets.gov. The largely custom approach we had taken to building each form — creating our own components and manually configuring and connecting all the separate parts of the application — meant that there was a limit to how quickly we could produce new forms. In order to speed up the process, we had to rethink our approach.
In December, we ran a discovery sprint to investigate new methods for building forms. We needed something that would manage the data flow from the components back to the store, that would require less manual handling of user interface logic and form validations, and would make it easier to update content, like form labels and error messages.
As part of this investigation, one of the technical leads on our project searched for React form builders and came across a library called react-jsonschema-form. Originally built by some folks at Mozilla, this library enables you to write a config object in the JSON Schema format to build a form. You specify the questions and the field types to use; the library produces the React components to match that.
This library enabled us to move from building forms to describing them. Before, the vast majority of our time was spent tweaking React components from our other forms, adding new ones for new questions, and wiring all of them together along with the validation and routing each form needs. Now the focus could be on what form fields we wanted to include and how we were going to present them.
Of course, the library didn’t have everything we needed out of the box. We wanted more control over how error messages are shown and to make use of the U.S. Web Design Standards (USWDS) so that all forms on Vets.gov have a consistent look and feel. We also wanted to use our new configuration-based approach to describe the typical flow of our forms: users complete shorter sections of questions at a time, review and edit their data at the end, and then we send their information to internal back-end systems.
As a result, we started building our own code and configuration format on top of the react-jsonschema-form library. We forked the library in order to add our own customizations, submitting pull requests back with our changes so that we could move back to using the standard version of the library, which we were recently able to do. The team spent over a month building out this new approach to forms.
Once we had our new approach built with form components that follow the USWDS styles and added some of our own custom fields, we were able to build a form by simply writing a config file. The result was that we had a streamlined, working prototype of a form in a week; our former approach would have taken us at least a month to get to that point.
While our work on the library is still in progress, our team is excited about the possibilities this new approach presents. As we polish the code and architecture we’ve created around the library, we have been able to produce a working front-end prototype of a form in a matter of days. This not only helps us make forms available to Veterans faster, but also makes the forms more flexible. Being able to create better forms faster is a significant step forward in getting services to Veterans as efficiently and effectively as possible.
Anne Kainic is a front end developer and Jeff Balboni is a software engineer working with the Digital Service at Veterans Affairs team
