Feat: eligibility confirm copy and UX (#2026)

cal-itp · Apr 25, 2024 · ea4407b · ea4407b
2 parents b6b0f66 + ffc2f60
commit ea4407b
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 66 deletions.
diff --git a/benefits/core/templates/core/base.html b/benefits/core/templates/core/base.html
@@ -79,10 +79,12 @@
           <div class="row justify-content-center">
             {% block headline %}
             {% endblock headline %}
+            {% block explanatory-text-wrapper %}
             <div class="col-lg-8">
               {% block explanatory-text %}
               {% endblock explanatory-text %}
             </div>
+            {% endblock explanatory-text-wrapper %}
           </div>
           <div class="row justify-content-center">
             {% block inner-content %}

diff --git a/benefits/core/templates/core/includes/form.html b/benefits/core/templates/core/includes/form.html
@@ -20,7 +20,7 @@
 
               {{ field }}
 
-              {% if field.help_text %}<small class="d-block mt-2 form-text text-body">{{ field.help_text }}</small>{% endif %}
+              {% if field.help_text %}<small class="d-block mt-2 pt-1 form-text text-body">{{ field.help_text }}</small>{% endif %}
             </div>
           </div>
         {% endfor %}

diff --git a/benefits/eligibility/forms.py b/benefits/eligibility/forms.py
@@ -45,7 +45,7 @@ class EligibilityVerificationForm(forms.Form):
     id = "form-eligibility-verification"
     method = "POST"
 
-    submit_value = _("Check eligibility")
+    submit_value = _("Find my record")
     submitting_value = _("Checking")
 
     _error_messages = {
@@ -141,12 +141,16 @@ class MSTCourtesyCard(EligibilityVerificationForm):
     def __init__(self, *args, **kwargs):
         super().__init__(
             title=_("Agency card information"),
-            headline=_("Let’s see if we can confirm your eligibility."),
-            blurb=_("Please input your Courtesy Card number and last name below to confirm your eligibility."),
-            name_label=_("Last name (as it appears on Courtesy Card)"),
+            headline=_("Let’s find the record of your transit benefit."),
+            blurb=_(
+                "We use the information on your MST Courtesy Card to find the record of your transit benefit in our system."
+            ),
+            name_label=_("Last Name"),
             name_placeholder="Garcia",
-            name_help_text=_("We use this to help confirm your Courtesy Card."),
-            sub_label=_("MST Courtesy Card number"),
+            name_help_text=_(
+                "Please enter your last name the same way it is printed on your card, including capital letters and hyphens."
+            ),
+            sub_label=_("Courtesy Card number"),
             sub_help_text=_("This is a 5-digit number on the front and back of your card."),
             sub_placeholder="12345",
             name_max_length=255,
@@ -164,12 +168,17 @@ class SBMTDMobilityPass(EligibilityVerificationForm):
     def __init__(self, *args, **kwargs):
         super().__init__(
             title=_("Agency card information"),
-            headline=_("Let’s see if we can confirm your eligibility."),
-            blurb=_("Please input your Reduced Fare Mobility ID number and last name below to confirm your eligibility."),
-            name_label=_("Last name (as it appears on Reduced Fare Mobility ID card)"),
+            headline=_("Let’s find the record of your transit benefit."),
+            blurb=_(
+                "We use the information on your SBMTD Reduced Fare Mobility ID card to find the record of your transit "
+                + "benefit in our system."
+            ),
+            name_label=_("Last Name"),
             name_placeholder="Garcia",
-            name_help_text=_("We use this to help confirm your Reduced Fare Mobility ID."),
-            sub_label=_("SBMTD Reduced Fare Mobility ID number"),
+            name_help_text=_(
+                "Please enter your last name the same way it is printed on your card, including capital letters and hyphens."
+            ),
+            sub_label=_("Reduced Fare Mobility ID card number"),
             sub_help_text=_("This is a 4-digit number on the back of your card."),
             sub_placeholder="1234",
             name_max_length=255,

diff --git a/benefits/eligibility/templates/eligibility/confirm.html b/benefits/eligibility/templates/eligibility/confirm.html
@@ -10,14 +10,20 @@
 {% endblock nav-buttons %}
 
 {% block headline %}
-  <div class="col-lg-8">
+  <div class="col-lg-6">
     <h1>{{ form.headline }}</h1>
   </div>
 {% endblock headline %}
 
-{% block explanatory-text %}
-  <p class="pt-4 pb-4 pb-lg-8">{{ form.blurb }}</p>
-{% endblock explanatory-text %}
+{% block explanatory-text-wrapper %}
+  <div class="row justify-content-center">
+    <div class="col-lg-6">
+      {% block explanatory-text %}
+        <p class="pt-4 pb-4">{{ form.blurb }}</p>
+      {% endblock explanatory-text %}
+    </div>
+  </div>
+{% endblock explanatory-text-wrapper %}
 
 {% block inner-content %}
   <div class="container">

diff --git a/benefits/locale/en/LC_MESSAGES/django.po b/benefits/locale/en/LC_MESSAGES/django.po
@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
-"POT-Creation-Date: 2024-04-18 14:27-0700\n"
+"POT-Creation-Date: 2024-04-19 13:13-0700\n"
 "Language: English\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -303,7 +303,7 @@ msgstr ""
 msgid "Choose this benefit"
 msgstr ""
 
-msgid "Check eligibility"
+msgid "Find my record"
 msgstr ""
 
 msgid "Checking"
@@ -318,38 +318,34 @@ msgstr ""
 msgid "Agency card information"
 msgstr ""
 
-msgid "Let’s see if we can confirm your eligibility."
+msgid "Let’s find the record of your transit benefit."
 msgstr ""
 
 msgid ""
-"Please input your Courtesy Card number and last name below to confirm your "
-"eligibility."
+"We use the information on your MST Courtesy Card to find the record of your "
+"transit benefit in our system."
 msgstr ""
 
-msgid "Last name (as it appears on Courtesy Card)"
+msgid "Last Name"
 msgstr ""
 
-msgid "We use this to help confirm your Courtesy Card."
+msgid ""
+"Please enter your last name the same way it is printed on your card, "
+"including capital letters and hyphens."
 msgstr ""
 
-msgid "MST Courtesy Card number"
+msgid "Courtesy Card number"
 msgstr ""
 
 msgid "This is a 5-digit number on the front and back of your card."
 msgstr ""
 
 msgid ""
-"Please input your Reduced Fare Mobility ID number and last name below to "
-"confirm your eligibility."
-msgstr ""
-
-msgid "Last name (as it appears on Reduced Fare Mobility ID card)"
-msgstr ""
-
-msgid "We use this to help confirm your Reduced Fare Mobility ID."
+"We use the information on your SBMTD Reduced Fare Mobility ID card to find "
+"the record of your transit benefit in our system."
 msgstr ""
 
-msgid "SBMTD Reduced Fare Mobility ID number"
+msgid "Reduced Fare Mobility ID card number"
 msgstr ""
 
 msgid "This is a 4-digit number on the back of your card."

diff --git a/benefits/locale/es/LC_MESSAGES/django.po b/benefits/locale/es/LC_MESSAGES/django.po
@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
-"POT-Creation-Date: 2024-04-18 14:27-0700\n"
+"POT-Creation-Date: 2024-04-19 13:13-0700\n"
 "Language: Español\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -390,7 +390,7 @@ msgstr "¿A qué beneficio de tránsito le gustaría inscribirse?"
 msgid "Choose this benefit"
 msgstr "Elegir este beneficio"
 
-msgid "Check eligibility"
+msgid "Find my record"
 msgstr "Comprobar elegibilidad"
 
 msgid "Checking"
@@ -405,42 +405,34 @@ msgstr "Este campo es requerido."
 msgid "Agency card information"
 msgstr "Información de la tarjeta de agencia"
 
-msgid "Let’s see if we can confirm your eligibility."
+msgid "Let’s find the record of your transit benefit."
 msgstr "Veamos si podemos confirmar su elegibilidad."
 
 msgid ""
-"Please input your Courtesy Card number and last name below to confirm your "
-"eligibility."
+"We use the information on your MST Courtesy Card to find the record of your "
+"transit benefit in our system."
 msgstr ""
-"Ingrese el número de su tarjeta de cortesía y apellido a continuación para "
-"confirmar su elegibilidad."
 
-msgid "Last name (as it appears on Courtesy Card)"
-msgstr "Apellido (tal como aparece en la tarjeta de cortesía)"
+msgid "Last Name"
+msgstr "Apellido"
 
-msgid "We use this to help confirm your Courtesy Card."
-msgstr "Usamos esto para ayudar a confirmar su tarjeta de cortesía."
+msgid ""
+"Please enter your last name the same way it is printed on your card, "
+"including capital letters and hyphens."
+msgstr ""
 
-msgid "MST Courtesy Card number"
+msgid "Courtesy Card number"
 msgstr "Número de tarjeta de cortesía de MST"
 
 msgid "This is a 5-digit number on the front and back of your card."
 msgstr "Este es un número de 5 dígitos en el anverso y reverso de su tarjeta."
 
 msgid ""
-"Please input your Reduced Fare Mobility ID number and last name below to "
-"confirm your eligibility."
+"We use the information on your SBMTD Reduced Fare Mobility ID card to find "
+"the record of your transit benefit in our system."
 msgstr ""
-"Ingrese el número de cuatro dígitos de su Reduced Fare Mobility ID y su "
-"apellido a continuación para confirmar su elegibilidad."
-
-msgid "Last name (as it appears on Reduced Fare Mobility ID card)"
-msgstr "Apellido (tal como aparece en la tarjeta de Reduced Fare Mobility ID)"
-
-msgid "We use this to help confirm your Reduced Fare Mobility ID."
-msgstr "Usamos esto para ayudar a confirmar su Reduced Fare Mobility ID."
 
-msgid "SBMTD Reduced Fare Mobility ID number"
+msgid "Reduced Fare Mobility ID card number"
 msgstr "Número de SBMTD Reduced Fare Mobility ID"
 
 msgid "This is a 4-digit number on the back of your card."

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -16,6 +16,7 @@
   --bs-body-font-family: var(--bs-font-sans-serif);
   --bs-body-line-height: 1.5; /* Displayed as 150% on Figma */
   --heading-line-height: 1.3; /* Displayed as 130% on Figma */
+  --form-field-text-line-height: 1.25; /*Displayed as 125% on Figma */
   --h4-line-height: 1.2; /* Displayed as 120% on Figma */
   --letter-spacing-2: 0.02; /* Displayed as 2% on Figma */
   --letter-spacing-3: 0.03; /* Displayed as 3% on Figma */
@@ -552,23 +553,19 @@ footer .footer-links li a.footer-link:visited {
 /* Form Container: Must use .form-container parent to use these styles */
 
 :root {
-  --form-input-gap: calc(22rem / 16);
-}
-
-@media (min-width: 992px) {
-  :root {
-    --form-input-gap: calc(42rem / 16);
-  }
+  --form-input-gap: calc(24rem / 16);
 }
 
 .form-container .form-group:not(:first-child) {
   padding-top: var(--form-input-gap);
 }
 
-.form-container .form-control-label {
-  font-size: var(--bs-body-font-size);
+.form-container .form-control-label,
+.form-container .required-label {
+  font-size: var(--font-size-16px);
   font-weight: var(--medium-font-weight);
-  letter-spacing: calc(var(--bs-body-font-size) * var(--letter-spacing-5));
+  line-height: var(--form-field-text-line-height);
+  letter-spacing: calc(var(--font-size-16px) * var(--letter-spacing-5));
   padding-bottom: calc(12rem / 16);
 }
 
@@ -591,6 +588,8 @@ footer .footer-links li a.footer-link:visited {
 
 .form-text {
   font-size: var(--font-size-14px);
+  line-height: var(--form-field-text-line-height);
+  letter-spacing: var(--letter-spacing-5);
 }
 
 /* Forms: Radio Buttons */