How to build a good form

<div class="usa-grid" style="padding: 2em">
    <div class="usa-width-one-whole">

        <h1>Vets.gov form design process</h1>

        <div class='va-introtext'>
            <p>Creating a good form is not as simple as recreating an existing form with new visuals, or of transferring a paper form to digital. Vets.gov has developed a process that considers stakeholder and user needs, as well as the existing form and
                the process it's a part of.</p>
        </div>

        <h3>Who are the stakeholders?</h3>

        <ul>
            <li>Form owner</li>
            <li>subject matter experts</li>
            <li>VA employees processing form</li>
            <li>VA employees that help Veterans to complete the form</li>
        </ul>

        <h3>Who are the users?</h3>

        <ul>
            <li>Veterans</li>
            <li>family members</li>
            <li>VA employees that help Veterans to complete the form</li>
        </ul>

        <h3>What is the form?</h3>

        <ul>
            <li><b>Review paper form, in detail:</b> Is the form currently being revised by the owner?</li>
            <li><b>If it exists, review digital form, in detail:</b> Create detailed flow diagram using screenshots of each decision point</li>
            <li>Create comparison spreadsheet of fields</li>
            <li>Document all (or relevant) content</li>
            <li>
                <b>[Stakeholder Interviews] Identify elements of offline experience: </b>
                <ul>
                    <li>What kind of communication or followup happens after the form?</li>
                    <li>Can the Veteran find out anything about their status, results, etc. through another online source?</li>
                </ul>
            </li>
        </ul>

        <h3>How does this form process work?</h3>

        <ul>
            <li><b>[Stakeholder Interviews] Understand backend and human processes: </b>Identify constraints for how data needs to be collected based on backend process</li>
            <li>
                <b>[Stakeholder Interviews] Prod for how fields are used in processing: computer, human or otherwise</b>
                <ul>
                    <li>Look for things that are a greater burden on the applicant than they a time saver to VA employees</li>
                    <li>Look for ways the form could be tweaked to easily relieve burden from VA employees. <b>Document these decisions. Why, who, etc.</b></li>
                    <li>Are there any work-arounds being employed to process the forms now?</li>
                </ul>
            </li>
            <li>Note confusing form fields</li>
            <li>Identify related and potentially dependent questions</li>
        </ul>

        <h3>Who uses the form?</h3>

        <ul>
            <li>[Stakeholder Interviews] Identify use cases for the form. Who and why.</li>
            <li>[User Interviews] Interview form users to identify paint points (Commonly: Which form? What does this question mean? When do I fill out the form? How am I supposed to hear back?)</li>
            <li>[User Interviews] Note work arounds that applicants commonly use to complete the form</li>
        </ul>

        <h3>Confirm scope</h3>

        <ul>
            <li>Use design review process to confirm that functionality identified as out of scope is truly non-critical to the success of the form process.</li>
        </ul>

        <h3>How should the form work?</h3>

        <ul>
            <li>Create an outline for each required chapter
                <ul>
                    <li>Identify field types</li>
                    <li>Identify dependent questions</li>
                </ul>
            </li>
            <li>Create punchlist of copy needs (Many of the field level elements may be straightforward or direct copies from other forms)</li>
            <li>If new interactions are required, note these with development team and work on high fidelity mocks of what this new pattern would look like.
                <ul>
                    <li>Get feedback from design team</li>
                    <li>Check with core team to make sure new patterns aren't reinventing the wheel</li>
                    <li>Test new pattern if necessary</li>
                </ul>
            </li>
            <li>Think about entry and exit points for the form
                <ul>
                    <li>Does your form require changes to navigation?</li>
                    <li>Is related static content up to date?</li>
                    <li>Are there any other places you should be able to get to the form from?</li>
                </ul>
            </li>
        </ul>

        <h3>Usability Testing</h3>
        <ul>
            <li>Use the live prototype to test the form process with applicants
                <ul>
                    <li>identify unclear language</li>
                    <li>check whether new patterns are working</li>
                </ul>
            </li>
            <li>Iterate</li>
            <li>Test again if necessary</li>
        </ul>

    </div>
</div>