index.html

---
layout: landing
script: |
  <script>
    $(document).ready(function() {
      sessionStorage.clear();
      $(".usa-button-big").click(function(event) {
        event.preventDefault();
        window.location.href = "welcome.html";
      });
    });
  </script>
---

<header class="hero--darker">
  <div class="usa-grid">
    <span class="label-big"><a href="#alpha">Alpha Release</a></span>
    <h1>This site hosts a multi-benefit application and enrollment <a href="welcome.html">prototype</a>.</h1>

    <p>This prototype has been designed with applicants for critical public benefit programs to model how to create simpler, user-centered multi-program applications.</p>

    <p>This is a template that local benefits administrators can customize for their enrollment programs. It is not a real application: <strong>no data entered on these pages will be shared or stored</strong>.</p>

    <p><a href="welcome.html" class="usa-button usa-button-big usa-button-secondary">Demo the prototype</a></p>
  </div>
</header>

<section class="panel">
  <div class="usa-grid">
    <h2>Background</h2>

    <p class="usa-font-lead">Building on the work of Medicaid modernization, the <a href="https://www.cms.gov/">Centers for Medicaid and Medicare</a> and the <a href="https://www.usds.gov/">U.S. Digital Service</a> have been working to use the tools of technology and design to <strong>improve how benefit applicants get access to critical services.</strong></p>

    <p>Our team began by exploring the current state of benefit enrollment and delivery across agencies and states in an extensive qualitative user research field study. <a href="{{ base }}assets/discovery-findings-mapping-enrollment-Nov2016.pdf">See the report of our findings</a>.</p>

    <p>From here, our team began working closely with local benefit program administrators to identify tools to help accelerate their program modernization efforts. </p>
  </div>
</section>

<section class="panel--light-gray">
  <div class="usa-grid">
    <h2>About this prototype</h2>

    <p class="usa-font-lead">This prototype demonstrates a user-centered enrollment model that leverages data sharing between agencies to <strong>minimize the burden on applicants in determining program eligibility</strong>.</p>

    <p>In our research, we saw a common need from state programs for an online application template which offices can customize to meet their own policy and user requirements.</p>

    <p>The alpha version of the prototype is designed to model how one or more applicants can apply for SNAP and/or Medicaid — two of the largest programs with demographic eligibility overlap.</p>
  </div>
</section>

<section class="panel--dark-gray">
  <div class="usa-grid">
    <h2>Design principles for user-centered online benefits applications</h2>
  </div>
  <div class="usa-grid design-principles">
    <div class="usa-width-one-third design-principles__item">
      <h3><span class="design-principle__number">1.</span> Design for real-time eligibility determination and same-day enrollment.</h3>
      <p>Model how states would collect data to verify against other government systems when possible.</p>
    </div>
    <div class="usa-width-one-third design-principles__item">
      <h3><span class="design-principle__number">2.</span> Work to connect people to the programs they want and need, in as few steps as possible.</h3>
      <p>Give applicants the option to apply for multiple benefits at once or to apply for just one benefit while informing them of other programs available to them.</p>
    </div>
    <div class="usa-width-one-third design-principles__item">
      <h3><span class="design-principle__number">3.</span> Mobile-first responsive design.</h3>
      <p>Ensure that people can apply on all devices by designing first for small screens and low bandwidth.</p>
    </div>
  </div>
  <div class="usa-grid design-principles">
    <div class="usa-width-one-third design-principles__item">
      <h3><span class="design-principle__number">4.</span> Plain language and warm voice.</h3>
      <p>These programs are complicated: do the hard work to keep the wording deadly simple. Use a conversational, encouraging tone and show people where they are in the process at all times.</p>
    </div>
    <div class="usa-width-one-third design-principles__item">
      <h3><span class="design-principle__number">5.</span> Fewer prompts per screen. </h3>
      <p>Ask people questions in small bite-sized chunks, so as not to overwhelm with multiple complex questions at any single step. Always let people know where they are in the process.</p>
    </div>
    <div class="usa-width-one-third design-principles__item">
      <h3><span class="design-principle__number">6.</span> Personalize and tailor applications.</h3>
      <p>Only show applicants information related to their specific circumstance.</p>
    </div>
  </div>
</section>

<section class="panel" id="alpha">
  <div class="usa-grid">
    <h2>What does “alpha” mean?</h2>
    <p class="usa-font-lead">The alpha stage of product development is a short phase after a deep discovery in which teams <strong>quickly design, build, and test concepts with users</strong>.</p>
    <p>The aim of the alpha phase is to:</p>
    <ol>
      <li>Show that project is technically feasible</li>
      <li>Build and test early versions of a product with real users</li>
      <li>Gather feedback from stakeholders and key partners to identify improvements for a beta release</li>
    </ol>
    <p>In other words: this prototype is a work-in-progress... and we want your help making it better.</p>

    <p><a href="https://github.com/usds/benefits-enrollment-prototype">Leave us feedback on our github repo.</a></p>

    <p><a href="welcome.html" class="usa-button usa-button-big usa-button-secondary">Demo the prototype</a></p>
  </div>
</section>